c# - 如何在 ASP 中单击 ListView 中的订单号时打开包含订单详细信息的弹出窗口

Question

我在 ListView 中列出了一个订单列表，并且在每一行上都放置了按钮。

需要在单击按钮时打开一个模型弹出窗口，其中包含与数据库中特定订单相关的产品，我已经使用 Bootstrap 完成了设计，并在客户 ListView 中加载了数据。

我不确定如何将值传递给 ListView 中同一页面上定义的模型弹出窗口。

我在模型弹出窗口中使用 gridview 来显示子表数据。

下面是我正在处理的代码..

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

您真正需要发送到服务器以获取详细信息的所有内容应该是您记录的唯一ID。这可以在命令按钮中传递，如下所示CommandArgument='<%# Eval("ID") %>'

然后在点击事件中你可以:

1. 使用 ID 查找实体详细信息。
2. 绑定(bind) GridView控制细节。
3. 最后调用ScriptManager.RegisterStartupScript(this, this.GetType(), "myModal", "showPopup();", true);显示模态弹出窗口。

代码隐藏:

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>

输出: