Display GridView row details in Bootstrap modal popup on LinkButton click using C# and VB.Net in ASP.Net

Last Reply on Sep 21, 2017 06:18 AM By AnandM

Posted on Sep 21, 2017 04:55 AM

i wants to show row data in bootstrap modal dialog when linkbutton clicks

here is my code

 

                                   <asp:GridView ID="GridView1" runat="server" CssClass="table table-striped table-hover" 
                                   DataKeyNames="student_Id" AutoGenerateColumns="false" GridLines="None">
                                    <Columns>
                                        <asp:TemplateField HeaderText="Admission No">
                                            <ItemTemplate>
                                                <asp:Label ID="lblstudent_Id" runat="server" Text='<%# Eval("student_Id") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField> 
                                         <asp:TemplateField HeaderText="Month">
                                            <ItemTemplate>
                                                <asp:Label ID="lblMonth_Name" runat="server" Text='<%# Eval("Month_Name") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>                                    
               <asp:TemplateField HeaderText="Amount">
                                            <ItemTemplate>
                                                <asp:Label ID="lblAmount" runat="server" Text='<%# Eval("Amount") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                <asp:TemplateField HeaderText="IsPaid">
                                            <ItemTemplate>
                                                <asp:Label ID="lblIsPaid" runat="server" Text='<%# Eval("IsPaid") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField> 
                 <asp:TemplateField HeaderText="date">
                                            <ItemTemplate>
                                                <asp:Label ID="lbldate" runat="server" Text='<%# Eval("date") %>'></asp:Label>
                                            </ItemTemplate>
                                        </asp:TemplateField>               
                <asp:TemplateField HeaderText="Pay">
                   <ItemTemplate>
                       <asp:LinkButton ID="lnkBtnEdit" runat="server" CommandArgument='<%# Eval("Student_Id")%>'
                                        CommandName="rowEdit" Text="Pay Now" CssClass="btn btn-info"   data-toggle="modal" data-target="#myModal"></asp:LinkButton>
                   </ItemTemplate>
               </asp:TemplateField>
           </Columns>
                                   </asp:GridView>      

 

<div class="modal fade" id="myModal" 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">
                    Student Fee Details</h4>
            </div>
            <div class="modal-body">
                <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                    <div class="form-group">
                       <asp:Label ID="lblstudent" runat="server" Text="Aadmission No: "></asp:Label>
                        <asp:Label ID="lblstudentid" runat="server" Text=""></asp:Label>
                    </div>
                    <div class="form-group">
                        <asp:Label ID="Label1" runat="server" Text="Month"></asp:Label>
                        <asp:Label ID="lblmonth" runat="server" Text=""></asp:Label>
                    </div>
                    <div class="form-group">
                        <asp:Label ID="lblAmount" runat="server" Text="Amount"></asp:Label>
                        <asp:TextBox ID="txtAmount" runat="server" TabIndex="3" MaxLength="75" CssClass="form-control"
                            placeholder="Enter Amount"></asp:TextBox>
                    </div>                   
                  </div>
            </div>
            <div class="modal-footer">
                <asp:Button ID="btnSave" runat="server" Text="Pay" OnClick="btnSave_Click" CssClass="btn btn-info" />
                <button type="button" class="btn btn-info" data-dismiss="modal">
                    Close</button>
            </div>
        </div>
    </div>
</div>

 

<script type='text/javascript'>
        function openModal() {
            $('[id*=myModal]').modal('show');
        }   
</script>

 

 Protected Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand
       
        Dim rowIndex As Integer = Convert.ToInt32(e.CommandArgument)
        Dim row As GridViewRow = GridView1.Rows(rowIndex)

        lblstudentid.Text = TryCast(row.FindControl("lblstudent_Id"), TextBox).Text
        lblmonth.Text = GridView1.Rows(rowIndex).Cells(1).Text
        txtAmount.Text = GridView1.Rows(rowIndex).Cells(2).Text

    End Sub

    Protected Sub GridView1_RowEditing(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewEditEventArgs) Handles GridView1.RowEditing
        ClientScript.RegisterStartupScript(Me.GetType(), "Pop", "openModal();", True)
    End Sub

i am able to show dialog but not getting data in dialog fields

Posted on Sep 21, 2017 06:18 AM

Hi yogeshc,

The way you have approached is wrong for accessing the values and assigning them to the respective controls.

I have created a sample which full fill your requirement you need to modify the code according to your need.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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>
    <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.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" CssClass="table table-striped table-hover"
            DataKeyNames="student_Id" AutoGenerateColumns="false" GridLines="None">
            <Columns>
                <asp:TemplateField HeaderText="Admission No">
                    <ItemTemplate>
                        <asp:Label ID="lblstudent_Id" runat="server" Text='<%# Eval("student_Id") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Month">
                    <ItemTemplate>
                        <asp:Label ID="lblMonth_Name" runat="server" Text='<%# Eval("Month_Name") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Amount">
                    <ItemTemplate>
                        <asp:Label ID="lblAmount" runat="server" Text='<%# Eval("Amount") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="IsPaid">
                    <ItemTemplate>
                        <asp:Label ID="lblIsPaid" runat="server" Text='<%# Eval("IsPaid") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="date">
                    <ItemTemplate>
                        <asp:Label ID="lbldate" runat="server" Text='<%# Eval("date") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Pay">
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkBtnEdit" runat="server" Text="Pay Now" CssClass="btn btn-info"
                            OnClick="Display"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    <div>
        <div class="modal fade" id="myModal" 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">
                            Student Fee Details</h4>
                    </div>
                    <div class="modal-body">
                        <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
                            <div class="form-group">
                                <asp:Label ID="lblstudent" runat="server" Text="Aadmission No: "></asp:Label>
                                <asp:Label ID="lblstudentid" runat="server" Text=""></asp:Label>
                            </div>
                            <div class="form-group">
                                <asp:Label ID="Label1" runat="server" Text="Month"></asp:Label>
                                <asp:Label ID="lblmonth" runat="server" Text=""></asp:Label>
                            </div>
                            <div class="form-group">
                                <asp:Label ID="lblAmount" runat="server" Text="Amount"></asp:Label>
                                <asp:TextBox ID="txtAmount" runat="server" TabIndex="3" MaxLength="75" CssClass="form-control"
                                    placeholder="Enter Amount"></asp:TextBox>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <asp:Button ID="btnSave" runat="server" Text="Pay" OnClick="btnSave_Click" CssClass="btn btn-info" />
                        <button type="button" class="btn btn-info" data-dismiss="modal">
                            Close</button>
                    </div>
                </div>
            </div>
            <script type='text/javascript'>
                function openModal() {
                    $('[id*=myModal]').modal('show');
                }  
            </script>
        </div>
    </div>
    </form>
</body>
</html>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] {
        new DataColumn("student_Id")
        ,new DataColumn("Month_Name")
        ,new DataColumn("Amount")
        ,new DataColumn("IsPaid")
        ,new DataColumn("date")
    });

        dt.Rows.Add(1, "Jan", 5200, "Yes", DateTime.Now.AddDays(-263));
        dt.Rows.Add(2, "Feb", 6500, "No", DateTime.Now.AddDays(-50));
        dt.Rows.Add(3, "Mar", 7500, "", "");
        dt.Rows.Add(4, "Apr", 6333, "No", DateTime.Now.AddDays(-63));
        dt.Rows.Add(5, "Jun", 15000, "Yes", DateTime.Now.AddDays(-93));
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

protected void Display(object sender, EventArgs e)
{
    int rowIndex = Convert.ToInt32(((sender as LinkButton).NamingContainer as GridViewRow).RowIndex);
    GridViewRow row = GridView1.Rows[rowIndex];

    lblstudentid.Text = (row.FindControl("lblstudent_Id") as Label).Text;
    lblmonth.Text = (row.FindControl("lblMonth_Name") as Label).Text; ;
    txtAmount.Text = (row.FindControl("lblAmount") as Label).Text;
    ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
}

protected void btnSave_Click(object sender, EventArgs e)
{ 
    //Your Saving code.
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("student_Id"), New DataColumn("Month_Name"), New DataColumn("Amount"), New DataColumn("IsPaid"), New DataColumn("date")})

        dt.Rows.Add(1, "Jan", 5200, "Yes", DateTime.Now.AddDays(-263))
        dt.Rows.Add(2, "Feb", 6500, "No", DateTime.Now.AddDays(-50))
        dt.Rows.Add(3, "Mar", 7500, "", "")
        dt.Rows.Add(4, "Apr", 6333, "No", DateTime.Now.AddDays(-63))
        dt.Rows.Add(5, "Jun", 15000, "Yes", DateTime.Now.AddDays(-93))
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub

Protected Sub Display(sender As Object, e As EventArgs)
    Dim rowIndex As Integer = Convert.ToInt32(TryCast(TryCast(sender, LinkButton).NamingContainer, GridViewRow).RowIndex)
    Dim row As GridViewRow = GridView1.Rows(rowIndex)

    lblstudentid.Text = TryCast(row.FindControl("lblstudent_Id"), Label).Text
    lblmonth.Text = TryCast(row.FindControl("lblMonth_Name"), Label).Text


    txtAmount.Text = TryCast(row.FindControl("lblAmount"), Label).Text
    ClientScript.RegisterStartupScript(Me.[GetType](), "Pop", "openModal();", True)
End Sub

Protected Sub btnSave_Click(sender As Object, e As EventArgs)
    'Your Saving code.
End Sub

ScreenShot