Hi nadeem1218,
I have created sample code which fullfill your requirement.
HTML
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type='text/javascript'>
function openModal() {
$('#myModal').modal('show');
}
</script>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<br />
<asp:Button ID="btnAdd" Text="AddCustomer" OnClick="OnAdd" runat="server" />
<div>
<asp:UpdatePanel ID="UpdatePanel2model" runat="server">
<ContentTemplate>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
Add Customer</h4>
</div>
<div class="modal-body">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
Name:
</td>
<td>
<asp:TextBox ID="txtName" runat="server" />
</td>
</tr>
<tr>
<td>
Country:
</td>
<td>
<asp:TextBox ID="txtCountry" runat="server" />
</td>
</tr>
<tr>
<td align="right">
</td>
<td align="left">
<asp:Button ID="btnSubmit" type="button" Text="Submit" OnClick="OnSubmit" class="btn btn-default"
runat="server" />
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<br />
<br />
<asp:GridView ID="gvCustomers" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
C#
private string constring = ConfigurationManager.ConnectionStrings["Constring"].ToString();
System.Text.StringBuilder sb = new System.Text.StringBuilder();
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.PopulateCustomers();
}
}
protected void OnAdd(object sender, EventArgs e)
{
ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal()", true);
}
protected void OnSubmit(object sender, EventArgs e)
{
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("INSERT INTO Customers VALUES(@Name,@Country)", con))
{
cmd.Parameters.AddWithValue("@Name", txtName.Text);
cmd.Parameters.AddWithValue("@Country", txtCountry.Text);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
sb.Append(@"<script type='text/javascript'>");
sb.Append("$(function () {");
sb.Append(" $('#myModal').modal('hide');});");
sb.Append("</script>");
txtName.Text = "";
txtCountry.Text = "";
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "ModelScript", sb.ToString(), false);
this.PopulateCustomers();
}
}
private void PopulateCustomers()
{
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("SELECT * FROM Customers WHERE CustomerId > 5", con))
{
DataTable dt = new DataTable();
SqlDataAdapter sda = new SqlDataAdapter(cmd);
sda.Fill(dt);
gvCustomers.DataSource = dt;
gvCustomers.DataBind();
}
}
}
Screenshot
