How to open popup window with order details while order no from listview clicked in ASP

Question

I have a list of Orders listed in ListView and have button placed on each row.

Need to open a model popup window on button click with products related to that particular order from database, I have done the design using bootstrap and the data loading in the Customer list view.

I'm not sure how to pass values to the model popup defined on the same page from the list view.

I'm using a gridview inside the model popup to display the child table data.

Below is the code I'm working on..

ASPX

  <div>
    <asp:ListView ID="lvCustomers" runat="server" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1"
        OnPagePropertiesChanging="OnPagePropertiesChanging">
        <LayoutTemplate>
            <table id="product-master" class="table table-bordered table-striped">
                <tr>
                    <th>OrderNo</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Date</th>
                    <th>Amount</th>
                    <th>Status</th>
                    <th></th>
                </tr>
                <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
                <tr>
                    <td colspan="3">

                        <asp:DataPager ID="DataPager1" runat="server" PagedControlID="lvCustomers" PageSize="10">
                            <Fields>
                                <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"
                                    ShowNextPageButton="false" />
                                <asp:NumericPagerField ButtonType="Link" />
                                <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false"
                                    ShowPreviousPageButton="false" />
                            </Fields>
                        </asp:DataPager>

                    </td>
                </tr>
            </table>
        </LayoutTemplate>

        <GroupTemplate>
            <tr>
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
            </tr>
        </GroupTemplate>

        <ItemTemplate>
            <td><%# Eval("OrderNo") %></td>
            <td><%# Eval("Name") %></td>
            <td><%# Eval("Email") %></td>
            <td><%# Eval("Date") %></td>
            <td><%# Eval("Amount") %></td>
            <td><%# Eval("Status") %></td>
            <td>
                <button type="button" class="btn btn-primary btn-flat" data-toggle="modal" data-target="#myModal">Pick</button></td>
        </ItemTemplate>

    </asp:ListView>
</div>
<div class="modal fade modal-primary" 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" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>

                <h4 class="modal-title">Products List</h4>
            </div>
            <div class="modal-body">
                <div class="box-body table-responsive no-padding">

                    <table class="table table-hover">
                        <tr>
                            <th>ORDER #</th>
                            <th>Bin Loc</th>
                            <th>Product Name</th>
                            <th>Gramage</th>
                            <th>Quantity</th>
                            <th>Scan</th>
                        </tr>

                        <tr>
                            <td>65489</td>
                            <td>A14</td>
                            <td>RRRR</td>
                            <td>200</td>
                            <td>5</td>
                            <td>
                                <asp:TextBox ID="TextBox4" class="form-control input-sm" runat="server"></asp:TextBox></td>
                        </tr>
                    </table>

                </div>
                <!-- /.box-body -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Done</button>
                <button type="button" class="btn btn-outline pull-right">Save changes</button>
            </div>
        </div>

    </div>
</div>

Answer 1

All you really need to send to the server to get the details should be the unique ID of your record.This can be passed through in a command button like this CommandArgument='<%# Eval("ID") %>'

Then in the click event you can:

1. Look up the entity details using the ID.
2. Bind the GridView control to the details.
3. And finally call ScriptManager.RegisterStartupScript(this, this.GetType(), "myModal", "showPopup();", true); to display the modal popup.

Code behind:

protected void Page_Load(object sender, EventArgs e)
{
    if(!Page.IsPostBack)
    {
        var c1 = new Customer { ID = 1, Name = "Customer 1" };
        var c2 = new Customer { ID = 2, Name = "Customer 2" };
        lvCustomers.DataSource = new List<Customer> { c1, c2 };
        lvCustomers.DataBind();
    }
}

protected void btnDetails_Command(object sender, CommandEventArgs e)
{
    if(e.CommandName == "ViewDetails")
    {
        int id = Int32.Parse(e.CommandArgument.ToString());
        //Do the database lookup using the ID...
        gvDetails.DataSource = new List<string> { "Customer Surname", "Customer Phone", "Customer Address" };
        gvDetails.DataBind();
        ScriptManager.RegisterStartupScript(this, this.GetType(), "myModal", "showPopup();", true);
    }
}

.ASPX:

<head runat="server">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script type="text/javascript">
        function showPopup() {
            $('#myModal').modal('show');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ListView ID="lvCustomers" runat="server">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"><%# Eval("Name")  %></asp:Label>&nbsp;<asp:Button ID="btnDetails" runat="server" Text="Details" CommandName="ViewDetails" CommandArgument='<%# Eval("ID")  %>' OnCommand="btnDetails_Command" /><br />
            </ItemTemplate>
        </asp:ListView>
        <div id="myModal" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Customer Details</h4>
                    </div>
                    <div class="modal-body">
                        <asp:GridView ID="gvDetails" runat="server"></asp:GridView>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>

Output: