CODEWITHSUNDEEP
c#htmlcssasp.net
user8002547
user8002547

Reputation:

How to open a modal from code behind?

I am trying to open a modal on a button click. Modal can be opened using a button click

 <asp:Button ID="Button4" runat="server" class="btn btn-info" data-toggle="modal" OnClientClick="return false;" data-target="#View1" Text="View Details" />

I need to open this modal at the end of a function, but I don't know how to make that happen, from c# code behind. I tried:

 protected void Button2_Click(object sender, EventArgs e)
 {
    ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "<script>$('#View1').modal('show');</script>", false);
 }

Design

 <!-- modal 1 -->
<div class="modal fade" id="View1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" runat="server">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="alert alert-success">

                <strong>Well done!</strong> Successfully Saved     
            </div>
        </div>
        <!-- modal-content -->
    </div>
    <!-- modal-dialog -->
</div>
<!-- modal -->

enter image description here

Upvotes: 2

Views: 18953

Answers (3)

ADyson
ADyson

Reputation: 61904

I would guess that your script is running before the HTML it's trying to refer to is actually rendered. You can check it easily by doing a View Source on your rendered page. If that startup script is higher up the page than your HTML for your modal, then it won't work because the script runs as soon as it's rendered on the page, and it's before the HTML is rendered, so it tries to run "show" on an element that doesn't exist yet. You don't get an error because the way jQuery works means that if its selector doesn't match any element(s), it simply doesn't execute whatever command you specified to be run on the selected element(s).

If this is the issue, you can fix it easily by changing your startup script so that it doesn't run the "show" code until the whole page has loaded. This can be done using jQuery's standard "document.ready" syntax (I have used the shorthand version here):

ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "<script>$(function() { $('#View1').modal('show'); });</script>", false);

You also need to ensure you've got a ScriptManager control in your page somewhere (within the <form> tag):

<asp:ScriptManager runat="server"></asp:ScriptManager>

Upvotes: 2

brijrajsinh
brijrajsinh

Reputation: 453

First of all please make sure ScriptManager is placed in form tag of aspx page. secondly make sure the code is working on client side.

Refer my below code: aspx code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>Some text in the modal.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        <asp:ScriptManager runat="server"></asp:ScriptManager>
    </form>
</body>

serverside code:

protected void Button1_Click(object sender, EventArgs e)
{
    System.Text.StringBuilder sb = new System.Text.StringBuilder();
    sb.Append(@"<script language='javascript'>");
    sb.Append(@"$('#myModal').modal('show');");
    sb.Append(@"</script>");

    ClientScript.RegisterStartupScript(this.GetType(), "JSScript", sb.ToString());
}

Upvotes: 4

Just code
Just code

Reputation: 13801

There can be two problems:

  1. You are trying to load the model before page loads
  2. Your id of modal is different

Change view1 to div1

Please try this code

ScriptManager.RegisterStartupScript(this, this.GetType(), "ModalView", "
<script>$(document).ready(function(){$('#Div1').modal('sho‌​w');});</script>", false);

Upvotes: 1

Related Questions