Open particular Bootstrap popup based on ASP.Net GridView row selection using C# and jQuery

Hi mukesh1,

Check this example. Now please take its reference and correct your code.

HTML

<div>
    <asp:Label ID="lblpopid" runat="server" Text=""></asp:Label>
    <asp:GridView ID="grdshortlist" runat="server" AutoGenerateColumns="False" Width="100%"
        GridLines="None" OnRowUpdating="grdshortlist_RowUpdating" DataKeyNames="applicationid">
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    <div class="col-md-3">
                        Candidate & Experience</div>
                    <div class="col-md-3">
                        Employer & Designation</div>
                </HeaderTemplate>
                <ItemTemplate>
                    <dt>
                        <asp:LinkButton ID="LinkButton5" runat="server" CommandName="update" Font-Size="Medium"
                            Text='<%# Eval("name") %>'>LinkButton</asp:LinkButton></dt>
                    <dd>
                        <asp:LinkButton ID="LinkButton2" runat="server" CommandName="update" Text='<%# Eval("years") %>'
                            Font-Size="Medium"></asp:LinkButton>
                        .<asp:LinkButton ID="LinkButton6" runat="server" CommandName="update" Text='<%# Eval("month") %>'
                            Font-Size="Medium"></asp:LinkButton>
                    </dd>
                    <asp:LinkButton ID="LinkButton4" runat="server" CommandName="update" Text='<%# Eval("employer") %>'
                        Font-Size="Medium">LinkButton</asp:LinkButton></dt>
                    <dd>
                        <asp:LinkButton ID="LinkButton3" runat="server" CommandName="update" Text='<%# Eval("designation") %>'
                            Font-Size="Medium">LinkButton</asp:LinkButton>
                    </dd>
                    <div id="<%# Eval("applicationid") %>">
                        <div class="modal fade" id="myModal<%# Eval("applicationid") %>" role="dialog">
                            <div class="modal-dialog">
                                <!-- Modal content-->
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">
                                            &times;</button>
                                        <h4 class="modal-title">
                                            Modal Header</h4>
                                    </div>
                                    <div class="modal-body">
                                        <asp:Label ID="lblcandidateid" runat="server" Text=""></asp:Label>
                                        <asp:Label ID="lblappid" runat="server" Text=""></asp:Label>
                                        <asp:Label ID="lbljobid" runat="server" Text=""></asp:Label>
                                        <div class="row" style="background-color: #FFFFFF; width: 500px">
                                            <div class="col-md-6">
                                                <font color="black">Designation:</font>&nbsp;
                                                <asp:Label ID="lbldesig" runat="server" Text='<%# Eval("designation") %>'></asp:Label><br />
                                                <font color="black">Experience:</font>&nbsp;
                                                <asp:Label ID="lblexp" runat="server" Text='<%# Eval("years") %>'></asp:Label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
<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(id) {
        $('[id*=myModal' + id + ']').modal('show');
    }
</script>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { 
            new DataColumn("name", typeof(string)),
            new DataColumn("years", typeof(string)),
            new DataColumn("month",typeof(string)),
            new DataColumn("employer",typeof(string)),
            new DataColumn("designation",typeof(string)),
            new DataColumn("applicationid",typeof(int))});
        dt.Rows.Add("John Hammond", "2008", "10", "Test", "SE", 1);
        dt.Rows.Add("Mudassar Khan", "2010", "5", "Test 1", "CEO", 2);
        dt.Rows.Add("Suzanne Mathews", "2012", "6", "Test 2", "MD", 3);
        grdshortlist.DataSource = dt;
        grdshortlist.DataBind();
    }
}

protected void grdshortlist_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
    try
    {
        var index = e.RowIndex;
        GridViewRow row = grdshortlist.Rows[index];
        int applicationId = Convert.ToInt32(grdshortlist.DataKeys[row.RowIndex].Values[0]);
        ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal('" + applicationId + "');", true);
    }
    catch { }
}

Screenshot