Question

需要建议，如何从Asp.net Webform代码后面打开一个twitter bootstrap模式？

我想根据保存时的某些要求打开模态。一旦用户单击保存按钮，它将在后面的代码中运行验证，如果有任何验证错误，则在引导模式对话框中显示所有错误。这一切都应该在“保存”按钮上单击。

我尝试使用下面的代码，但它提示我java脚本错误＆＃34;错误：对象不支持属性或方法＆＃39;模态＆＃39;＆＃34;。感谢

Asp.Net Webforms 4.5

Bootstrap V3.0.1

JQuery的-1.9.0.js

的jquery-UI-1.8.24.js

Default.aspx 

<asp:Content runat="server" ID="DisplayContent" ContentPlaceHolderID="DisplayContent">
<div class="container">
</div>
</asp:Content>

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">

<div class="container">
    <div class="btn-group">
        <asp:Button ID="btnSubmit" class="btn-info" runat="server" Text="Submit"          
        OnClick="btnSubmit_Click"></asp:Button>
    </div>
</div>


<%--Bootstrap Modal Dialog--%>
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Validation Errors List for HP7 Citation</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
</div>
</asp:Content>


Default.aspx.cs

protected void btnSubmit_Click(object sender, EventArgs e)
{
  ScriptManager.RegisterClientScriptBlock(this, this.GetType(),"none", "
 <script>$('#mymodal').modal('show');</script>", false);
 }



 Script order defined in master page

 <asp:PlaceHolder ID="PlaceHolder1" runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
    <%: Scripts.Render("~/bundles/jquery") %>
    <%: Scripts.Render("~/bundles/bootstrap") %>
    <%: Scripts.Render("~/bundles/common") %>
</asp:PlaceHolder>

Answer 1

首先，我建议你将模态放在UpdatePanel中，以便从CodeBehind设置Title和Body，这样你就不必为每个按钮或每条消息创建一个单独的模态。所以我修改你的代码并添加一个UpdatePanel：

<div class="container">
    <div class="btn-group">
        <asp:Button ID="btnSubmit" class="btn-info" runat="server" Text="Submit"          
        OnClick="btnSubmit_Click"></asp:Button>
    </div>
</div>


<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
            <ContentTemplate>
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
                    </div>
                    <div class="modal-body">
                        <asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

并在CodeBehind中：

protected void btnSubmit_Click(object sender, EventArgs e)
{
    lblModalTitle.Text = "Validation Errors List for HP7 Citation";
    lblModalBody.Text = "This is modal body";
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal();", true);
    upModal.Update();
}

如您所见，在第一步中设置模态的标题和正文，然后显示它，最后更新UpdatePanel以显示Label的消息。提高页面加载速度的一个好方法是将模态代码放在页面末尾，此外它还可以防止与其他UpdatePanel或元素发生冲突。

的更新
如果你得到Error: Object doesn't support property or method 'modal'，可能的原因可能是设置Bootstrap失败，尝试用原始的bootstrap示例检查你的代码： http://getbootstrap.com/javascript/#modals
如果再次出现此错误，可能这些链接会有所帮助：
http://geekswithblogs.net/JeremyMorgan/archive/2012/09/18/how-to-use-twitter-bootstrap-on-an-asp.net-website.aspx
http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-0-0-with-asp-net-web-forms

从Asp.Net Webforms显示Bootstrap模式

1 个答案: