Geek Answers Handbook

Bootstrap modal popup c # codebehind

I am using bootstrap in my C # asp.net project and I want to show to show a modal popup from code.

in my page title i have a javascript function like this:

function LoginFail() { $('#windowTitleDialog').modal('show'); }

and at the click of my button I call javascript as follows

 ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "LoginFail", "LoginFail();", true);

it does not show a modal popup. however, if I use something like alert('login failed') , it works fine.

Can anyone help with this?

+6
source share
5 answers

By default, Bootstrap javascript files are included immediately before the closing tag

  <script src="vendors/jquery-1.9.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script> <script src="assets/scripts.js"></script> </body>

I took these javascript files in the chapter section right before the body tag, and I wrote a small function to call a modal popup:

 <script src="vendors/jquery-1.9.1.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script> <script src="assets/scripts.js"></script> <script type="text/javascript"> function openModal() { $('#myModal').modal('show'); } </script> </head> <body>

then I could trigger a modal popup with the code below:

 protected void lbEdit_Click(object sender, EventArgs e) { ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true); }
+14
source

Here is how I decided:

Script function

 <script type="text/javascript"> function LoginFail() { $('#windowTitleDialog').modal(); } </script>

Button Announcement

 <asp:Button ID="LaunchModal" runat="server" Text="Launch Modal" CssClass="btn" onclick="LaunchModal_Click"/>

Note that the data-togle = "modal" attribute is not set.

Server-side code in the LaunchModal_Click event:

 ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { LoginFail(); });", true);

Hope this helps you.

+3
source

I assume you are using one of jQuery modal plugins. In this case, I suspect the plugin code is not initialized when it is called (which will be right after it is displayed on the page). You must defer the function call after executing the plugin code. An implementation for your case might look like this:

 ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "LoginFail", "$(function() { LoginFail(); });", true);
0
source

I have the same problem, I tried to find an online solution, but I could not do it. I can name other javascript funcionts, as you said from the code behind, but when I add the modal js function, the modal does not appear.

My guess is that the modal function ('show') is not a call, because when I insepct in crhome, the modal element of the class modally hides fade and not modally hides Fade IN, and other attributes remain unchanged.

A possible solution is to change these attributes from the code behind, I mean that you can do what js does from the code behind, maybe not the best solution, but I haven’t done what else to do. By doing this, I got a modal display with a gray background, but could not get the effect to work.

0
source

I do this on an aspx page:

 <asp:Panel ID="MessagePanel" runat="server" CssClass="hide" EnableViewState="false"> <div class="modal-header"> <asp:Button type="button" ID="btnClose" runat="server" data-dismiss="modal" Text="x" /> </div> <div class="modal-body"> <h4>What new in this version</h4> ... rest of bootstrap modal stuff.... </div> </asp:Panel>

Then in the code to display a modal popup on any event, such as page.load or button click, I just change the CssClass of the panel:

 MessagePanel.CssClass = "modal fade in"

No need for js or ScriptManager.

0
source

More articles:


All Articles