Mostrar Modal Bootstrap de Asp.Net Webforms

twitter-bootstrap bootstrap-modal

Question

¿Necesita sugerencias, cómo abrir un modo de arranque de Twitter, desde el código de formulario web de Asp.net que se encuentra detrás?

Quiero abrir el modal basado en algún requisito en el momento de guardar. Una vez que el usuario hace clic en el botón Guardar, ejecuta las validaciones en el código que se encuentra detrás y, si hay algún error de validación, muestra todos los errores en el cuadro de diálogo modal de arranque. Todo esto debería ocurrir en el botón Guardar.

Intenté con el siguiente fragmento de código, pero me indica el error de script java "Error: el objeto no admite la propiedad o el método ''modal''". Gracias

Asp.Net Web Forms 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

En primer lugar, le sugiero que coloque su modal en un UpdatePanel para configurar el Título y el Cuerpo de CodeBehind, de modo que no tenga que crear un modal separado para cada botón o mensaje. Así que modifico su código y agrego un Panel de Actualización:

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

y en 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();
}

Como puede ver, configure el Título y el Cuerpo del Modal en el primer paso, luego muéstrelo y finalmente actualice UpdatePanel para mostrar los mensajes de Label. Una buena práctica para mejorar la velocidad de carga de la página es poner su código modal al final de la página, además de evitar cualquier conflicto con otros UpdatePanels o elementos.

Actualizar:
Si obtiene Error: Object doesn''t support property or method ''modal'' , una razón probable podría ser la falla en la configuración de Bootstrap, intente verificar su código con el ejemplo original de bootstrap: http://getbootstrap.com/javascript/#modals
Y si vuelve a aparecer este error, probablemente estos enlaces serían útiles:
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