动态填充ASP.NET用户控件

9gm1akwq  于 2022-11-19  发布在  .NET
关注(0)|答案(1)|浏览(191)

有没有一个ASP.NET页面,比如说它上面有一个网格视图,把一个用户控件加载到一个模态弹出窗口中。我想使用用户控件onload函数,但是它是在加载父页面时触发的,而不是在你点击网格视图中的一个叫做“编辑”的链接时触发的。
我不想重定向到另一个ASP.NET页面,我想弹出一个编辑页面,其中包含许多控件,如下拉列表和列表框,它们本身包含数百条记录。
我尝试过使用 AJAX 和JSON,但是下拉列表和列表框的填充速度非常慢。
任何帮助都将不胜感激!
我尝试过使用 AJAX 和JSON,但是下拉列表和列表框的填充速度非常慢。

zour9fqk

zour9fqk1#

我一直都这样。
比如说一个简单的酒店。
我们的弹出控件是一个“类似窗体”布局的用户控件,用于编辑一行。
注意,“困难”的问题是,如果用户进行编辑,那么我们需要触发网格的刷新。
所以,说我们的灵台--相当简单。
我们在一个普通的简按钮(编辑)下降。
因此,我们有了这个标记(网格视图)

<div id="MyGridArea" runat="server" clientidmode="static">
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
        DataKeyNames="ID"
        CssClass="table table-hover" Width="60em" AllowPaging="True" GridLines="None"
        ShowHeaderWhenEmpty="true" EnableViewState="false">
        <Columns>
            <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
            <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
            <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
            <asp:BoundField DataField="HotelName" HeaderText="HotelName" SortExpression="HotelName" />
            <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Button ID="cmdEdit" runat="server" Text="Edit" CssClass="btn"
                        OnClick="cmdEdit_Click" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <PagerStyle CssClass="GridPager" />
    </asp:GridView>
    <asp:Button ID="cmdAdd" runat="server" Text="+Add" CssClass="btn myshadow" />
</div>
<br />

<uc1:MyEditHotelC ID="EHotel" runat="server"
    MyEditArea="MyEditArea"
    MyGridArea="MyGridArea"
    MyTable="tblHotelsA"
    MyTitle="Edit Hotel Information" />

请注意我们的普通jane编辑按钮。
gv的正下方是我们的用户控件。
注意我是如何定义UC的一些自定义(公共属性)的。在上面,设置了“网格”的“div”,并且我定义了用于编辑的div。
要加载的代码如下:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid()
    End If
End Sub

Sub LoadGrid()

    GridView1.DataSource = Myrst("SELECT * FROM [VtblHotelsA] ORDER BY HotelName")
    GridView1.DataBind()

End Sub

而我们现在看到/得到的是:

好的,现在我们点击编辑按钮?
我们将获取当前行,然后弹出我们的用户控件。
编辑按钮的代码如下:

Protected Sub cmdEdit_Click(sender As Object, e As EventArgs)

    Dim btn As Button = sender
    Dim gRow As GridViewRow = btn.NamingContainer
    Dim intPK As Integer = GridView1.DataKeys(gRow.RowIndex).Item("ID")

    Call EditOne(intPK)

End Sub

Sub EditOne(intPK As Integer)

    Me.EHotel.MyPk = intPK
    Me.EHotel.LoadData()
    Me.EHotel.MyFocusCancel()

    ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType,
                                        "popedit", "popedit()", True)

End Sub

现在我们看到这个:

我也有一个公共事件的UC。(因为如果用户编辑,我们需要重新加载(重新显示)的gv在这个当前的页面。
那么,UC如何弹出该对话框呢?
UC使用jQuery. UI。(使用哪个库弹出对话框并不重要,但您应该选择一个并“运行”它。
因此,UC的标记还包括jQuery弹出对话框。
UC的标记只是一个“div”和jquery对话框代码。
它看起来像这样:

<div id="EditRecord" runat="server" style="float:left;display:normal" clientidmode="Static"  >

        <br/>
        <style>
            .iForm label {display:inline-block;width:90px}
            .iForm span  {display:inline-block;font-weight:700
            }
            .iForm input {border-radius:8px;border-width:1px;margin-bottom:10px}                
            .iForm select {border-radius:8px;border-width:1px;margin-bottom:10px;margin-bottom:10px;height:24px;margin-left:-3px}                
            .iForm textarea {border-radius:8px;border-width:1px;margin-bottom:10px}     
            .iForm input[type=checkbox] {margin-right:8px}
        </style>
        <div style="float:left" class="iForm">
            <label>HotelName</label>
            <asp:TextBox ID="txtHotel" runat="server" f="HotelName" width="280">
            </asp:TextBox> <br />
                <label>First Name</label>
                 <asp:TextBox ID="tFN" runat="server" f="FirstName" Width="140"></asp:TextBox> <br />
                <label>Last Name</label>
                 <asp:TextBox ID="tLN" runat="server" f="LastName" Width="140"></asp:TextBox> <br />
       
            <label>City</label>
            <asp:DropDownList ID="cboCity" runat="server" Width="140px" 
                DataTextField="City" 
                DataValueField="id"
                f="City_ID" >
            </asp:DropDownList>                
            
            <br />
            <label>Province</label><asp:TextBox ID="tProvince" runat="server" f="Province" Width="75"></asp:TextBox>

(etc.它只是一个div中用于编辑酒店的布局。
弹出对话框代码如下:

<div id="mydelpop" style="display:none">
       <h4>Really delete this Hotel?</h4>
   </div>

   <script>
       function popedit() {

            MyPWidth = "62em"
            MyWidth = $(window).width()

            if (MyWidth < 840) {
                MyPWidth = (MyWidth - 25)  + 'px'
            }

            var myDialog = $("#EditRecord");
            myDialog.dialog({
                title: "Edit Hotel",
                width: MyPWidth,
                modal: true,
                appendTo: "form",
                dialogClass : "dialogWithDropShadow",
                close: myclose
            });
       }

       function myclose() {
           var myDialog = $("#EditRecord");
           myDialog.dialog('close')
           // myDialog.find("form").remove();
           // destory the instance, but only
           // if exists (if we dont' clean up then button 
           // clicks don't work on 2nd use of dialog)
           if (myDialog.hasClass('ui-dialog-content')) {
               myDialog.dialog('destroy');
           }
       }
 </script>

因此,编辑代码和JavaScript部分是UC的一部分。
我只需要“设置”UC的值,当然还需要通过注入脚本“弹出”对话框。此时,其他一切都是UC。
您可以在此处查看/尝试上述代码的工作示例:
http://www.kallal.ca/WebSite11/WebForm2

相关问题