ModalPopUp 作为用户控件 ASP.NET C#答案

【问题标题】：ModalPopUp as User Control ASP.NET C#ModalPopUp 作为用户控件 ASP.NET C#
【发布时间】：2016-07-30 01:55:43
【问题描述】：

我正在尝试构建一个 ModalPopUp 作为控件。它有这些控件：

TextBox- 过滤器占位符
Button - 搜索按钮
Button - 取消按钮
GridView - 显示结果

<ajax:toolkitscriptmanager id="searchPopUp" runat="server"></ajax:toolkitscriptmanager> 
<asp:Panel
    BackColor="White"
    ID="searchPanel"
    CssClass="modalPopup"
    runat="server"
    Style="display: table">

    <div class="myContainer">
        <uc1:ScreenSearch
            runat="server"
            ID="mySearch" />

        <asp:Button ID="btnToHide" runat="server" Text="Tohide" Style="display: none" />
        <asp:Button ID="btnToShow" runat="server" Text="ToShow" Style="display: none" />
    </div>
    </asp:Panel>

<ajax:ModalPopupExtender 
    ID="ModalPopUpSearch" 
    runat="server"
    TargetControlID="btnToShow"
    PopupControlID="searchPanel"
    CancelControlID="btnToHide"
    DropShadow="true"
    BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>

后面的代码：uc1:ScreenSearch

protected void Page_Load(object sender, EventArgs e){...}

protected void fillGridView()
        {
            myDao dao = new myDao();

            DataSet ds = new DataSet();
            ds = dao.retornarPesquisa(txtFilter.Text); //return data source
            DataTable dt = new DataTable();

            gv.DataSource = ds;
            gv.DataBind();
        }

uc1:ScreenSearch 是我的控件，包含TextBox、Button（执行搜索调用方法：fillGridView()）和GridView。

当我尝试执行搜索时，单击绑定GridView。在我的用户控件的 GridView 中获得结果的最佳方法是什么？

【问题讨论】：

你能告诉我们你的搜索代码吗？

标签： c# asp.net gridview asp.net-ajax modalpopupextender

【解决方案1】：

您还没有发布任何代码，因此很难说出它为什么不起作用。下面是一个显示 Bootstrap 模式弹出窗口的工作示例 -> 允许用户搜索 -> 在 GridView 中显示结果在模式弹出窗口内：

背后的代码：

public class Person
{
    public string Name { get; set; }
    public string Surname { get; set; }
}

public partial class ModalPopupFromGridView : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void btnSearch_Click(object sender, EventArgs e)
    {
        //Use txtSearch.Text to lookup the data you want to bind to the GridView, mine is hardcoded for the sake of simplicity
        var p1 = new Person { Name = "Name 1", Surname = "Surname 1" };
        var p2 = new Person { Name = "Name 2", Surname = "Surname 2" };
        GridView1.DataSource = new List<Person> { p1, p2 };
        GridView1.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">

        //It'svery important that showPopup() is outside of jQuery document load event
        function showPopup() {
            $('#myModal').modal('show');
        }

        $(function () {
            $(".show").click(function () {
                showPopup();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <a href="#" class="show">Show Popup</a>
        <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">Details</h4>
                    </div>
                    <div class="modal-body">
                        <asp:TextBox ID="txtSearch" runat="server">
                        </asp:TextBox><asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" />
                        <br /><br />
                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                            <Columns>
                                <asp:BoundField DataField="Name" HeaderText="Name" />
                                <asp:BoundField DataField="Surname" HeaderText="Surname" />
                                <asp:TemplateField HeaderText="User Details">
                                    <ItemTemplate>
                                        <a class="details" href="#" data-name='<%# Eval("Name") %>' data-surname='<%# Eval("Surname") %>'>Details</a>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </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>

输出：

【讨论】：

我认为这对我来说不是一个好的解决方案，因为它不是用户控件。在我的情况下，我需要将控件放在用户控件中。
所以复制到用户控件中。就这么简单

【解决方案2】：

检查搜索按钮自动回发是否设置为 true。您还将在 gridview_itemchanged 事件中获得搜索按钮单击事件，因为搜索按钮位于 gridview 控件内。希望会奏效

【讨论】：