Greetings,

I'm kinda new to ASP.NET so I'm unsure as to how to proceed with accomplishing this task. I have a webpage that contains a GridView and controls associated to that such as Add, Issue Equipment, Edit, Delete. What I'm trying to do is when I click on a cell on the gridview the row will be selected then when I click Edit, the modal popup for editting will display with the values and details of that gridview item that Ive selected. How do I pass that gridview item and its values to that Edit modal popup?

I use a script to bring up my modal popup:

 <script>

        settings = {
            //Model Popup
            objModalPopupBtn: ".modalButton",
            objModalCloseBtn: ".overlay, .closeBtn",
            objModalDataAttr: "data-popup"
        }
        $(settings.objModalPopupBtn).bind("click", function () {
            if ($(this).attr(settings.objModalDataAttr)) {

                var strDataPopupName = $(this).attr(settings.objModalDataAttr);

                //Fade In Modal Pop Up
                $(".overlay, #" + strDataPopupName).fadeIn();

            }
        });

        //On clicking the modal background
        $(settings.objModalCloseBtn).bind("click", function () {
            $(".modal").fadeOut();
        });

    </script>

Here's my gridview and the controls:

 <div style="margin-left: 500px; margin-bottom: 20px; margin-top: 20px">
                        <a href="#" class="modalButton" data-popup="popupOne">Add New Staff</a>
                        <a href="#" class="modalButton" onclick="lbtnIssue_click" id="lbtnIssue" data-popup="popupTwo">Issue Staff Equipment</a>
                    </div>
                    <!-- End of GridView Controls -->

                    <asp:GridView ID="gvPerson" CssClass="EU_DataTable" runat="server" AutoGenerateColumns="False" DataKeyNames="SempID" DataSourceID="SqlDataSource2" AllowPaging="True" PageSize="6" AllowSorting="True" OnRowDataBound="gvPerson_RowDataBound">
                        <Columns>
                            <asp:CommandField ShowSelectButton="True" />
                            <asp:BoundField DataField="ID" HeaderText="SempID" InsertVisible="False" ReadOnly="True" SortExpression="SempID" />
                            <asp:BoundField DataField="Name" HeaderText="EmpName" SortExpression="EmpName" />
                            <asp:BoundField DataField="PDNo" HeaderText="PDNo" SortExpression="PDNo" />
                            <asp:BoundField DataField="Position" HeaderText="Position" SortExpression="Position" />
                            <asp:BoundField DataField="DateHired" HeaderText="DateHired" SortExpression="DateHired" />
                            <asp:BoundField DataField="ContactNo" HeaderText="ContactNo" SortExpression="ContactNo" />
                            <asp:BoundField DataField="Email" HeaderText="Email" SortExpression="Email" />
                            <asp:BoundField DataField="EmergencyContactNo" HeaderText="EmergencyContactNo" SortExpression="EmergencyContactNo" />
                            <asp:BoundField DataField="DateQuitTerminated" HeaderText="DateQuitTerminated" SortExpression="DateQuitTerminated" />
                            <asp:BoundField DataField="ContactPerson" HeaderText="ContactPerson" SortExpression="ContactPerson" />
                            <asp:BoundField DataField="Remarks" HeaderText="Remarks" SortExpression="Remarks" />
                        </Columns>
                        <SelectedRowStyle BackColor="#54a1e5" Font-Bold="True" ForeColor="#CCFF99" />
                    </asp:GridView>

                    <asp:SqlDataSource ID="SqlDataSource11" runat="server" ConnectionString="<%$ ConnectionStrings:DBConnectionString %>" SelectCommand="SELECT [ID], [Name], [PDNo], [Position], [DateHired], [ContactNo], [Email], [EmergencyContactNo], [DateQuitTerminated], [ContactPerson], [Remarks] FROM [Personnel]"></asp:SqlDataSource>

                </div>

This is the modal popup:

<section class="modal modalWindow" id="popupOne" style="margin-top: 100px; height: 590px; border: solid">
                        <section class="modalWrapper">
                            <h2>Edit Staff </h2>
                            <hr />
                            <div>
                                <div class="form-row">
                                    <div class="form-group col-md-2" style="margin-right: 150px">
                                        Name:&nbsp;
            <asp:TextBox ID="tbEmpName" class="form-control" runat="server" Style="margin-right: 15px" Width="210px"></asp:TextBox>
                                    </div>
                                    <div class="form-group col-md-2">
                                        Position:&nbsp;&nbsp;
            <asp:TextBox ID="tbPosition" class="form-control" runat="server" Style="margin-right: 15px" Width="173px"></asp:TextBox>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-2" style="margin-right: 100px">
                                        Badge No:
            <asp:TextBox ID="tbPDNo" class="form-control" runat="server" Style="margin-right: 15px" Width="168px"></asp:TextBox>
                                    </div>
                                    <div class="form-group col-md-2">
                                        Hire Date:
            <asp:TextBox ID="tbDateHired" class="form-control" runat="server" Style="margin-right: 15px" TextMode="Date" Width="180px"></asp:TextBox>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-2" style="margin-right: 100px">
                                        Contact #: 
            <asp:TextBox ID="tbContactNo" class="form-control" runat="server" Width="150px" Style="margin-right: 100px"></asp:TextBox>
                                    </div>
                                    <div class="form-group col-md-2">
                                        Email:&nbsp;&nbsp;
            <asp:TextBox ID="tbEmail" class="form-control" runat="server" Width="210px" Style="margin-right: 15px"></asp:TextBox>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-group col-md-2" style="margin-right: 100px">
                                        Emergency#:
            <asp:TextBox ID="tbEContactNo" class="form-control" runat="server" Width="143px" Style="margin-right: 15px"></asp:TextBox>
                                    </div>
                                    <div class="form-group col-md-2">
                                        Contact:
            <asp:TextBox ID="tbContactP" class="form-control" runat="server" Width="170px" Style="margin-right: 15px"></asp:TextBox>
                                    </div>
                                </div>
                                Remarks:
            <asp:TextBox ID="tbRemarks" class="form-control" runat="server" Width="473px" Style="margin-right: 15px; margin-bottom: 15px"></asp:TextBox>

                                <asp:LinkButton ID="lbtnSubmit" runat="server" OnClick="lbtnSubmit_Click">Submit</asp:LinkButton>
                                &nbsp;&nbsp;&nbsp;
            <asp:LinkButton ID="lbtnCancel" runat="server" OnClick="lbtnCancel_Click">Cancel</asp:LinkButton>
                                &nbsp;&nbsp;&nbsp;
                            </div>

                        </section>
                        <a class="closeBtn">CLOSE X</a>
                    </section>

Why not launch a modal pop-up from client side or server side using Ajax Toolkit? See Here

There is a great article on this reasonably complex topic. A lot is involved because of the disconnect between server-side rendering and user/ajax side requests. The server renders a row at a time and does not keep the complete data-set around, while the user is looking at that data the whole time. Any request by the user has to get the server-side synchronized with the requested row.

In 2007 Brian Smith posted a great discussion on this at 4 Guys From Rolla:
Displaying Extended Details in a GridView Using an Ajax Pop-Up

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.