使用引导模式 asp.net 回发时文本框为空答案

【问题标题】：textboxes are empty on postback with bootstrap modal asp.net使用引导模式 asp.net 回发时文本框为空
【发布时间】：2013-10-11 14:46:58
【问题描述】：

我在我的 asp.net 页面中使用引导模式，如下所示：

   <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
<asp:UpdatePanel ID="ModalUpdatePanel" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnRegister" EventName="Click" />
    </Triggers>
    <ContentTemplate>
        <p>

textboxes here


 <div class="popup-footer-wrapper">
                <div class="popup-footer-left">
                    <%-- <input type="submit" class="login-button" name="login-button" value="Sign Up">--%>
                    <asp:Button ID="btnRegister" runat="server" CssClass="login-button" OnClick="btnRegister_Click"
                        UseSubmitBehavior="false" Text="<%$ Resources: HRGELoggedOutMaster, Signup %>" />

                </div>
            </div>

        </p>
    </ContentTemplate>
</asp:UpdatePanel>
</div>

我在里面看到了

  protected void btnRegister_Click(object sender, EventArgs e)

所有的 texboxes 显示空值。无论用户在文本框中输入什么。请建议如何解决它。这可能是因为 UseSubmitBehavior="false" 但如果我不使用它，则控件不会转到 onclick 事件。

【问题讨论】：

您最终找到解决方案了吗？
这是一个非常可怕的问题，人们会期望基本表单在弹出窗口中工作。但它仍然是一个问题

标签： asp.net twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我刚刚遇到了类似的问题。我通过使用 jquery 移动表单元素内的模式元素来解决这个问题。

   function init() {
        var element = $('#myModal').detach();
        $($("form")[0]).append(element);        
    }

    window.addEventListener('DOMContentLoaded', init, false);

【讨论】：

@Krishanthadesilva 复制脚本标签中的代码，或者如果您没有任何脚本标签，请在 html 末尾添加包含该代码的脚本标签。

【解决方案2】：

Steven Anderson 是对的，没有发布值是因为模态输入在表单之外。

我能够使用 javascript 将模式输入的值复制到隐藏的 asp.net 控件来解决此问题。

我在模态框外部创建了一个隐藏的asp.net控件：

<asp:HiddenField ID="MyHiddenControl" value="name" runat="server" />

我要提交的模态文本框：

<asp:TextBox ID="FormYourName" CssClass="form-control" runat="server"/>`

我的模态提交按钮如下所示；

<asp:Button ID="BtnSubmit" runat="server" Text="Submit" CssClass="btn btn-primary" OnClientClick="Javascript:DoCustomPost();" UseSubmitBehavior="false" />

我的 JavaScript 函数如下所示：

function DoCustomPost()
{
var ModalTextBox = document.getElementById("FormAmenity");
var HiddenTextBox = document.getElementById("MyHiddenControl");
// This is the value I want to Post
MyHiddenControl.value = ModalTextBox.value
}

因此，当我在模态窗口中单击“提交”时，会启动回发，文本框的值被复制到隐藏控件中，我可以在代码隐藏中从隐藏控件中读取值：

Protected Sub BtnSubmit_Click(sender As Object, e As EventArgs) Handles BtnSubmit.Click
Dim Something As String = MyHiddenControl.Value
End Sub

【讨论】：

优秀的答案。谢谢！

【解决方案3】：

您没有看到您发布的值的原因是您的值没有被发布。引导模态管理器使用“body”元素作为它附加模态的根元素。因此，您的模式现在位于“表单”元素之外，并且不会将值发送回服务器。

要解决此问题，请更改“manager”属性的默认值，如下所示：

// Note the manager is passed to the root form element. 
// Otherwise, the modals are taken out of the form and 
// values not posted back to the server
$.fn.modal.defaults.manager = $.fn.modalmanager.defaults.manager = 'body form:first';

编辑：这是假设您使用的是Bootstrap-Modal Extension

【讨论】：

请问有没有不需要额外js组件的bootstrap 3解决方案？
我会先检查渲染的输出，看看模态是否在表单元素内。未发布的值很可能归结为表单元素之外的模式。无论如何，我建议使用引导模式扩展，它是一种无缝添加，为现有控件增加了更多功能。
我不敢相信我花了 1 天时间才找到这个答案！谢谢！

【解决方案4】：

使用 dotnet 文本框，或在输入字段中添加 id 和 runat 服务器标签。

【讨论】：