引导模式不在 ASP.NET 主窗体内呈现答案

【问题标题】：Bootstrap modal not rendering inside ASP.NET main form引导模式不在 ASP.NET 主窗体内呈现
【发布时间】：2014-05-19 20:31:17
【问题描述】：

我正在尝试使用 ASPX 页面中的 Bootstrap 模式从 C# 代码文件中提取用户输入的值。

我发现 Bootstrap 不允许在一个页面中使用两个表单（阻止另一个表单的值），而且众所周知，我们在母版页中有一个主表单，所以我不能将另一个表单用于模态，并且我的模态正在主窗体之外呈现。

我使用此代码在父表单中呈现我的模式：

function showDialog(id) {               
    $('#paiddialog').on('show.bs.modal', function (e) {
        $(this).parent().appendTo("form");
    });

    $('#' + id).modal("show");
}

这是模态的 HTML：

<div id="paiddialog" class="modal fade" role="dialog" style="display: none;" aria-hidden="true">
    <asp:UpdatePanel ID="panels" runat="server">
        <ContentTemplate>
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Update payment Information 

                        </h4>
                    </div>
                    <div class="modal-body">

                            <div class="row">
                                <div class="col-sm-12">

                                    <div class="form-group">
                                        <label class="col-sm-4 control-label" for="form-field-1">
                                            Select Assignment ID
                                        </label>
                                        <div class="col-sm-6">
                                            <asp:DropDownList ID="ddlassignmentid" runat="server" DataTextField="iassignmentidref" AppendDataBoundItems="true" DataValueField="iassignmentid" DataSourceID="sdassignmentid" CssClass="form-control">
                                                <asp:ListItem Text="Select" Value=""></asp:ListItem>
                                            </asp:DropDownList>
                                            <asp:LinkButton ID="btnbindassigdetails" runat="server" OnClick="btnbindassigdetails_Click" CssClass="btn btn-info">Pull info</asp:LinkButton>
                                        </div>
                                    </div>
                                </div>
                            </div>

                    </div>

                    <div class="modal-footer">
                        <asp:LinkButton ID="btnupdate" OnClick="btnupdate_Click" runat="server" CssClass="btn btn-success large">Request Payment </asp:LinkButton>

                        <button aria-hidden="true" data-dismiss="modal" class="btn btn-default">
                            Close
                        </button>
                    </div>

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

渲染出来的 HTML 是这样的

<html>
    <head></head>
    <body>
        <form id="mainform" action="page.aspx">
            <div class="pagecontent"></div>
        </form>
        <div class="model fade"></div>
</html>

但还是没有运气。

【问题讨论】：

你能提供任何关于这个的html吗？

标签： c# asp.net twitter-bootstrap webforms

【解决方案1】：

有一个丑陋的黑客允许另一个表单标签。

</form><form action="blah.aspx" id="blah">

这将在其中获得一个尾随表单供您使用。不推荐，但可以绕过 .Net 的 1 个表单标签限制

【讨论】：

Bootstrap 只允许页面中的一个表单，如果我们添加第二个表单它会阻止其他表单控件
是的，只有当您需要的附加表单位于页面底部并且您不再需要任何 Web 表单控件时，该 hack 才真正有效。但是，您可以使用常规的 html 表单控件并执行常规的 post/ajax 而不是 asp.net 方法。将模态保持在底部，您就有了这种分离。

【解决方案2】：

对于任何新读者，我设法通过添加波纹管脚本来解决这个问题

$(this).parent().appendTo("form");

【讨论】：