Hi nid@patel,
Refer below sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
media="screen" />
<script type="text/javascript">
$(function () {
$("[id*=btnVerify]").click(function () {
$("[id*=MyPopup]").modal("show");
$("[id*=myModal1]").modal("show");
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="lbl_session" runat="server" Text="Label" Visible="false"></asp:Label>
<div class="container">
<div>
<h1 class="text-center">
Your Profile</h1>
<hr />
</div>
<div>
<asp:GridView ID="GridView1" CssClass="table table-bordered table-striped table-hover"
runat="server" AutoGenerateColumns="False" DataKeyNames="Id">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" InsertVisible="False"
SortExpression="Id"></asp:BoundField>
<asp:BoundField DataField="name" HeaderText="Name" SortExpression="name"></asp:BoundField>
<asp:BoundField DataField="state" HeaderText="State" SortExpression="state"></asp:BoundField>
<asp:BoundField DataField="district" HeaderText="District" SortExpression="district">
</asp:BoundField>
<asp:TemplateField HeaderText="Approve">
<HeaderTemplate>
<div class="text-center">
</div>
</HeaderTemplate>
<ItemTemplate>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyPopup">
Edit
</button>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
<%-- update profile--%>
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
Select Fruit
</h4>
</div>
<div class="modal-body" style="height: 500px">
<div class="signup-form">
<%-- cname--%>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i></span>
<asp:TextBox ID="txt_cname" CssClass="form-control" runat="server" placeholder="Company Name"
required="required"></asp:TextBox>
</div>
</div>
<%--state--%>
<div class="form-group">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i></span>
<asp:TextBox ID="txt_state" CssClass="form-control" runat="server" placeholder="State"
required="required"></asp:TextBox>
</div>
<div class="input-group">
<span class="input-group-addon"></span>
<asp:DropDownList ID="ddl_state" CssClass="form-control" AutoPostBack="true" placeholder="Select State"
runat="server" required="required" OnSelectedIndexChanged="ddl_state_SelectedIndexChanged">
</asp:DropDownList>
</div>
</div>
</div>
<%-- district--%>
<div class="form-group">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i></span>
<asp:TextBox ID="txt_dist" CssClass="form-control" runat="server" placeholder="District"
required="required"></asp:TextBox>
</div>
<div class="input-group">
<span class="input-group-addon"></span>
<asp:DropDownList ID="ddl_dist" CssClass="form-control" AutoPostBack="true" placeholder="Select State"
runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
</asp:DropDownList>
</div>
</div>
</div>
<%--address--%>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i></span>
<asp:TextBox ID="txt_address" CssClass="form-control" runat="server" placeholder="Address"
required="required" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<%--email--%>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i></span>
<asp:TextBox ID="txt_mail" CssClass="form-control" runat="server" placeholder="E-mail"
required="required"></asp:TextBox>
</div>
<div>
<button type="button" id="btnVerify" class="btn btn-default" data-dismiss="modal"
data-target="#myModal1">
Verify</button>
</div>
<div id="EmailVerifyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
Select Fruit
</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
Close</button>
</div>
</div>
</div>
</div>
</div>
<%--number--%>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class=""></i></span>
<asp:TextBox ID="txt_num" CssClass="form-control" runat="server" placeholder="Contact Number"
required="required"></asp:TextBox>
</div>
</div>
</div>
<%--popupEmail--%>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
Close</button>
<asp:Button ID="Button1" class="btn btn-danger" runat="server" Text="Update" OnClick="Button1_Click" />
</div>
</div>
</div>
</div>
<%-- change pwd--%>
<div class="container">
<!-- Button to Open the Modal -->
<button style="float: right" type="button" class="btn btn-primary" data-toggle="modal"
data-target="#myModal1">
Change Password
</button>
<!-- The Modal -->
<div class="modal fade" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">
Change Password</h4>
<button type="button" class="close" data-dismiss="modal">
×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="signup-form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"></span>
<asp:TextBox ID="txt_email" ReadOnly="true" CssClass="form-control" runat="server"
placeholder="Email" required="required"></asp:TextBox>
</div>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<asp:Button ID="Button2" class="btn btn-danger" runat="server" Text="Next" />
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Namespaces
C#
using System.Data;
VB.Net
Imports System.Data
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[] { new DataColumn("Id", typeof(int)), new DataColumn("name", typeof(string)), new DataColumn("state", typeof(string)), new DataColumn("district", typeof(string)) });
dt.Rows.Add(1, "Mudassar Khan", "Maharashtra", "Mumbai");
dt.Rows.Add(2, "John Hammod", "Westchester", "New Rochelle");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
}
protected void ddl_state_SelectedIndexChanged(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn() {New DataColumn("Id", GetType(Integer)), New DataColumn("name", GetType(String)), New DataColumn("state", GetType(String)), New DataColumn("district", GetType(String))})
dt.Rows.Add(1, "Mudassar Khan", "Maharashtra", "Mumbai")
dt.Rows.Add(2, "John Hammod", "Westchester", "New Rochelle")
GridView1.DataSource = dt
GridView1.DataBind()
End If
End Sub
Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub ddl_state_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Screenshot
