Показать Bootstrap Modal из Web-страниц Asp.Net

Нужны предложения, как открыть твитер-бутстрап-модальный, из кода Web-формы Asp.net?

Я хочу открыть модальный, основанный на некотором требовании в момент сохранения. После того, как пользователь нажимает кнопку "Сохранить", он выполняет проверки кода позади и, если есть какие-либо ошибки проверки, отображает все ошибки в модальном диалоговом окне загрузки. Это все должно произойти при нажатии кнопки "Сохранить".

Я попытался с помощью кода ниже, но он подскажет мне java script error "Ошибка: объект не поддерживает свойство или метод" модальный ". Благодаря

Asp.Net Webforms 4.5

Bootstrap V3.0.1

JQuery-1.9.0.js

JQuery-щ-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>

Ответы

Ответ 1

Прежде всего, я предлагаю вам поместить ваш модальный в UpdatePanel и установить заголовок и тело из CodeBehind. С помощью этого трюка вам не нужно создавать отдельный модал для каждой кнопки или каждого сообщения. Поэтому я изменяю ваш код и добавляю 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();
}

Сначала мы устанавливаем модальные заголовок и тело, затем отображаем их и, наконец, обновляем панель обновления.

Хорошей практикой для повышения скорости загрузки страницы является размещение модального кода в конце страницы, кроме того, это помогает избежать конфликтов с другими элементами UpdatePanels или элементами.
Более сложное и хитрое предложение: поместите модальный код в конец вашей мастер-страницы и напишите глобальную функцию, чтобы обновить его и сделать вашу жизнь еще проще!

Устранение:
Если вы получили сообщение об ошибке:

Объект не поддерживает свойство или метод 'модальный'

вероятной причиной может быть сбой установки Bootstrap, попробуйте проверить ваш код с помощью официального примера начальной загрузки.
Если вы по-прежнему получаете сообщение об ошибке, возможно, вы найдете эти ссылки полезными: