ASP.NET母版页中jQuery模态框+自动补全表单回发失效求助

核心问题分析 #

1. ASP.NET禁止form嵌套：母版页本身已包含服务器端的<form runat="server">，自定义嵌套form会导致ASP.NET的PostBack机制失效——它只会处理主form内的控件。
2. jQuery UI Dialog的DOM移动特性：Dialog初始化时默认会把模态框元素移到<body>末尾，哪怕你原本把它放在主form里，移出去后控件就脱离了ASP.NET的PostBack上下文，自然无法触发提交。

具体解决步骤 #

1. 删除自定义form标签

直接去掉模态框里的<form id="autocompleteForm">，将输入控件直接放在模态框div内，确保它们处于母版页的主form范围内。

2. 强制Dialog留在主form内

初始化Dialog时，设置appendTo参数为主form的选择器（默认主form的id是aspnetForm），避免模态框被移出主form。

3. 调整提交逻辑

可选两种实现方式：

• 使用ASP.NET服务器端按钮，自动触发PostBack；
• 保留客户端验证逻辑，验证通过后手动触发PostBack。

修改后的完整代码 #

<button id="openModalButton" type="button">Open Modal</button>

<div id="myModal" title="Autocomplete Textbox" style="display:none;">
    <!-- 移除自定义form，直接放置控件 -->
    <input type="text" id="autocompleteTextbox" name="autocompleteTextbox" runat="server" />
    <!-- 服务器端按钮，自动关联PostBack -->
    <asp:Button ID="submitDataButton" runat="server" Text="Submit" OnClick="submitDataButton_Click" />
</div>

<script>
$(document).ready(function () {
    var availableTags = ["ActionScript", "AppleScript", "And so on"];

    $("#autocompleteTextbox").autocomplete({
        source: availableTags
    });

    $("#openModalButton").click(function () {
        $("#myModal").dialog({
            modal: true,
            width: 400,
            appendTo: "#aspnetForm", // 关键：让模态框始终留在主form内
            buttons: [
                {
                    text: "Submit",
                    click: function () {
                        // 客户端验证逻辑
                        var value = $("#autocompleteTextbox").val();
                        if (!value) {
                            alert("Please enter a value.");
                            return;
                        }
                        // 触发服务器按钮的PostBack
                        $("#<%= submitDataButton.ClientID %>").click();
                        $(this).dialog("close");
                    }
                }
            ]
        });
    });
});
</script>

额外注意事项 #

• 如果不想用服务器按钮，也可以在验证通过后手动调用ASP.NET的__doPostBack函数：

  __doPostBack('<%= Page.ClientID %>', '');
  

• 若母版页自定义了主form的id，需将appendTo的参数改成对应id。
• 给输入控件加上runat="server"后，后台可直接通过autocompleteTextbox.Value获取值，无需读取Request.Form。

内容的提问来源于stack exchange，提问作者Kᴀτᴢ