Database
I have made use of the following table Customers with the schema as follows.
Note: You can download the database table SQL by clicking the download link below.
Stored Procedure
This
Stored Procedure accepts
Name and
Country parameters, which are used to
Insert the records in
Customers Table.
CREATE PROCEDURE [Customers_InsertCustomer]
@Name VARCHAR(100),
@Country VARCHAR(50)
AS
BEGIN
INSERT INTO [Customers]
([Name]
,[Country])
VALUES
(@Name
,@Country)
SELECT SCOPE_IDENTITY()
END
HTML Markup
Inside the HTML Form the following CSS is inherited.
1. bootstrap.min.css
Then, the following JS scripts are inherited.
1. jquery.min.js
2. bootstrap.bundle.min.js
The HTML Markup consists of following controls:
HTML Button – For opening the
Bootstrap Modal Popup.
TextBox – For inputting Name.
DropDownList – For selecting Country.
Button – For submitting the Form.
The Button has been assigned with an OnClick event handler.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" media="screen" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Insert</button>
<div id="exampleModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Customer Details Form</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Name:</label>
<asp:TextBox runat="server" ID="txtName" CssClass="form-control"/>
</div>
<div class="form-group">
<label>Country:</label>
<asp:DropDownList runat="server" ID="ddlCountries" CssClass="form-control">
<asp:ListItem Text="Please select" Value=""/>
<asp:ListItem Text="India" Value="India"/>
<asp:ListItem Text="China" Value="China"/>
<asp:ListItem Text="Australia" Value="Australia"/>
<asp:ListItem Text="France" Value="France"/>
<asp:ListItem Text="Unites States" Value="Unites States"/>
<asp:ListItem Text="Russia" Value="Russia"/>
<asp:ListItem Text="Canada" Value="Canada"/>
</asp:DropDownList>
</div>
<div class="modal-footer">
<asp:Button Text="Save changes" runat="server" CssClass="btn btn-primary" OnClick="OnInsert" />
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
VB.Net
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
Inserting record in Database using Stored Procedure in ASP.Net
When the Save changes button is clicked, first the connection is read from Web.Config file.
The values of Name and Country are added as parameter to SqlCommand object.
C#
protected void OnInsert(object sender, EventArgs e)
{
int customerId;
string spName = "Customers_InsertCustomer";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(spName, con))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@Name", txtName.Text);
cmd.Parameters.AddWithValue("@Country", ddlCountries.SelectedItem.Text);
con.Open();
customerId = Convert.ToInt32(cmd.ExecuteScalar());
con.Close();
}
}
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Inserted Customer ID: " + customerId + "');", true);
}
VB.Net
Protected Sub OnInsert(ByVal sender As Object, ByVal e As EventArgs)
Dim customerId As Integer
Dim spName As String = "Customers_InsertCustomer"
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand(spName, con)
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@Name", txtName.Text)
cmd.Parameters.AddWithValue("@Country", ddlCountries.SelectedItem.Text)
con.Open()
customerId = Convert.ToInt32(cmd.ExecuteScalar())
con.Close()
End Using
End Using
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('Inserted Customer ID: " & customerId & "');", True)
End Sub
Screenshots
The Form
Record after Insert in database
Downloads