jquery ui 对话框上使用的 asp.net 控件值在后面的代码中为空答案

【问题标题】：asp.net controls values used on jquery ui dialog are empty in code behindjquery ui 对话框上使用的 asp.net 控件值在后面的代码中为空
【发布时间】：2014-06-21 10:25:15
【问题描述】：

我正在开发一个 asp.net 应用程序。我正在使用 Jquery UI 将记录添加到数据库。这是标记。

 <div id="AddShippingPopup" class="popup" title="New Shipping Address">
        <p>Shipping Address</p>
         <table>
               <tr>

                    <td> Line 1:</td>
                    <td><asp:TextBox ID="txtShippingLine1" runat="server"></asp:TextBox></td>
                    </tr>
                    <tr>

                    <td>Line 2:</td>
                    <td><asp:TextBox ID="txtShippingLine2" runat="server"></asp:TextBox></td>
                    </tr>
                    <tr>

                    <td>City:</td>
                    <td> <asp:TextBox ID="txtShippingCity" runat="server"></asp:TextBox></td>
                    </tr>
                    <tr>

                    <td>State:</td>
                    <td> <asp:DropDownList ID="ddlShipingState" runat="server" Width="200px" CssClass="required">
                        <asp:ListItem Value="">Please select</asp:ListItem>
                        <asp:ListItem Value="AK">Alaska</asp:ListItem>

                    </asp:DropDownList></td>
                    </tr>
                    <tr>
                    <td>Zip:</td>
                    <td><asp:TextBox ID="txtShippingZip" runat="server" Width="50px"></asp:TextBox></td>
                    </tr>  
                <tr>
                    <td>Preferred:</td>
                    <td>
                        <asp:CheckBox ID="chkPreferredShipAdd" runat="server" />
                    </td>
                    </tr>  
         </table>
    </div>

这是这个 div 之外的一个按钮：

 <asp:Button ID="btnAddShipping" runat="server" Text="Add Shipping" style = "display:none" OnClick = "btnAddShipping_Click" />

和 Jquery 对话代码：

     $("#AddShippingPopup").dialog({
                 autoOpen: false,
                 modal: true,
                 width: 500,
                 height: 370,
                 buttons: {
                     "Cancel": function () {
                         $(this).dialog("close");
                     },
                     "Save": function () {
                         $("[id*=btnAddShipping]").click();
                         $(this).dialog("close");
                     }
                 }
             });


function createShippingAddress() {
         $("#AddShippingPopup").dialog("widget").find(".ui-dialog-titlebar-close").hide();
         $("#AddShippingPopup").dialog("open");
         return false;
     }

这里是初始化对话框的链接：

   <asp:LinkButton ID="lnkAddNewShippingAddress" runat="server" Font-Size="Smaller" OnClientClick="createShippingAddress(); return false;">Add New</asp:LinkButton>

但单击保存按钮时，文本框和下拉列表的值为空。空字符串保存在数据库中。如何解决？

【问题讨论】：

标签： javascript jquery asp.net jquery-ui

【解决方案1】：

这种情况下的常见问题是 javascript 对话框将其内容呈现在 asp.net 表单元素之外。

所以通过使用appendTo 选项强制他在表单内呈现。这是来自jQuery site 的示例：

$( ".selector" ).dialog({ appendTo: "#someElem" });

并确保您附加到的元素位于您的 asp.net 表单中。

您的代码将如下所示：

 $("#AddShippingPopup").dialog({
             appendTo: "#dialogAfterMe",
             autoOpen: false,
             modal: true,
             width: 500,
             height: 370,
             buttons: {
                 "Cancel": function () {
                     $(this).dialog("close");
                 },
                 "Save": function () {
                     $("[id*=btnAddShipping]").click();
                     $(this).dialog("close");
                 }
             }
         });

并将这个 div 放在表单中的某个位置

<div id="dialogAfterMe"></div>

【讨论】：