Display Bootstrap Modal from Asp.Net Webforms

Question

Need Suggestions, how to open a twitter bootstrap modal, from Asp.net Webform code behind?

I want to open the modal based on some requirement at the moment of the save. Once user click on the save button , it runs the validations in code behind and if there are any validation errors , display all errors in bootstrap modal dialog. This all should happen on Save button click.

I tried with below piece of code , but it prompts me java script error "Error: Object doesn't support property or method 'modal'". Thanks

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

First of all, I suggest you put your Modal in an UpdatePanel and set the Title and Body from CodeBehind. By this trick, you don't need to create a separate Modal for each button or each message. So I modify your code and add an 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>

and in 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();
}

First, we set the Modal's Title and Body, then display it, and finally update the UpdatePanel.

A good practice to improve the page's loading speed is putting the Modal code at the end of the page, besides this helps you avoid any conflict with other UpdatePanels or elements.
A more advanced and tricky suggestion: Put the Modal code at the end of your MasterPage and write a global function to update it, and make your life even easier!

Troubleshooting:
If you get the Error:

Object doesn't support property or method 'modal'

a likely reason could be failing setup of Bootstrap, try to check your code with the official bootstrap sample.
If you still get the error, maybe you find these links helpful:

• Geeks with Blogs
• My Tec Bits