Bootstrap模式不在ASP.NET主窗体内呈现

时间:2014-05-19 20:31:18

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

我试图使用一个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>

但仍然没有运气。

2 个答案:

答案 0 :(得分:0)

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

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

这将为您提供一个尾随表格供您使用。不推荐,但绕过.Net

的1表单标签限制

答案 1 :(得分:0)

对于任何新读者,我设法通过添加下面的脚本

来解决这个问题
$(this).parent().appendTo("form");