ASP C# Bootstrap - Open Masterpage modal

Asked

Viewed 1,212 times

0

I’m learning how to develop websites with ASPX C#, using Bootstrap. Before, I want to say that I’ve researched everything and I haven’t found a solution to the problem I’m encountering, so, please, if anyone can help me.

On my Masterpage, I have <header> the declaration of modal activation as follows::

<!-- Bootstrap -->
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/font-awesome.min.css" rel="stylesheet" />

<!-- Estilo de Personalização da Página...                       -->
<link href="/Content/PersonalStyle.css" rel="stylesheet" />

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

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

    function closeModalDanger() {
        $('#ModalDanger').modal('hide');
    }
</script>

Then in the <body> from Masterpage, after setting the menu, comes the code below:

    <asp:ContentPlaceHolder ID="FormBody" runat="server">
    </asp:ContentPlaceHolder>

    <div class="modal fade" id="ModalDanger" role="dialog" aria-labelledby="myModalDanger" runat="server">
        <div class="modal-dialog" role="document" runat="server">
            <div class="modal-content" runat="server">
                <div class="modal-header" style="background-color: red; color: whitesmoke;" runat="server">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4>Atenção!!!</h4>
                </div>
                <div class="modal-body" runat="server" style="margin-top: 25px; padding-top: 20px;">
                    <br />
                    <asp:Label ID="lblDanger1" runat="server" Text="" Visible="True" />
                    <asp:Label ID="lblDanger2" runat="server" Text="" Visible="True" />
                    <asp:Label ID="lblDanger3" runat="server" Text="" Visible="True" />
                    <br />
                    <br />
                </div>
                <div class="modal-footer" runat="server" style="background-color: red;">
                    <%--<button class="btn btn-default" data-dismiss="modal" id="btnDangerClose" runat="server" type="button" >Fechar</button>--%>
                    <asp:Button runat="server" class="btn btn-default" ID="btnDangerCloseAsp" Text="Fechar" OnClick="btnDangerCloseAsp_OnClick" UseSubmitBehavior="false" data-dismiss="modal" />
                </div>
            </div>
        </div>
    </div>

Above the <header>, I have put a hidden input, if necessary, to save the page targeting link.

    <div>
        <input id="LinkAcess" value="" type="hidden" runat="server" />
    </div>

At the end of Masterpage, I declare jQuery and then Bootstrap as follows:

    </footer>
    <!-- Footer -->
</form>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../Scripts/jquery-3.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/Scripts/bootstrap.min.js"></script>

In Code Behind, I declared the method to activate Modal when necessary:

public void MessageDanger(string sTextLine01, string sTextLine02, string sTextLine03, string sLink = "")
        {
            lblDanger1.Text = sTextLine01;
            lblDanger2.Text = sTextLine02;
            lblDanger3.Text = sTextLine03;

            RegisterClientScriptBlock(this, this.GetType(), "MensagemDeAtencao", "$(function() { openModalDanger(); });", true);

            if (!string.IsNullOrEmpty(sLink))
            {
                LinkAcess.Value = sLink;
            }
        }

As seen, this method receives the texts to be presented in the Modal and if, and only if, "Slink" is assigned, assigns to the hidden input.

Still at Code Behind, I declared the method:

    protected void btnDangerCloseAsp_OnClick(object sender, EventArgs e)
    {
        if (!string.IsNullOrEmpty(LinkAcess.Value))
        {
            var sLinkAcess = LinkAcess.Value;
            LinkAcess.Value = "";
            Server.Transfer(sLinkAcess, true);
        }
    }

Assigning the link to a variable and clearing the input; with this, clicking on the close, if applicable, redirects to the specified page.

On the daughter page, for example, when access is not valid, I call the method:

    private void AcessoInvalido()
    {
        ((PublicMasterPage)Master).MessageDanger("Por favor, verifique seu e-mail e tente novamente!",
                         "Informações necessárias não encontradas.",
                         "Você será redirecinado a Página Inicial!",
                         "/Default.aspx");
    }

Current situation, of the page daughter, I can access "Messagedanger", which receives the parameters and assigns everything as expected, without errors, goes through the line of "Registerclientscriptblock" without error, but does not present the modal, in this example, opens the page "Default.apsx".

The thing is that it does not open the modal, I tried to call the script using "Registerstartupscript" and "Registerclientscriptblock", but it did not work.

I tried another tip I found using the "Updatepanel" and it didn’t work either.

I am working with MVC and Webforms and whenever I need to put a message on the screen, I want to use the modal, so the Text assignment of Labels. When in a validation in the Database, for example, email already registered, CPF already registered, Nonexistent code, am end, any event that I need to inform the operator or user, I will be using the modals (Danger, Alert and Info), in addition to other 2 for presentation of explanatory texts as necessary, and this, I believe only by Code Behinde, because by Apsx I would use the Validators, I think!

As I put it, I’m learning, if you have a better form, I’m open!

Someone can steer me the right way?

asp.net-mvc bootstrap-3 webforms modal

  • Only one correction:

  • Only one fix: public void Messagedanger(string sTextLine01, string sTextLine02, string sTextLine03, string Slink = "") { lblDanger1.Text = sTextLine01; lblDanger2.Text = sTextLine02; lblDanger3.Text = sTextLine03; Registerclientscriptblock(this, this.Gettype(), "Messaging intention", "$(Function() { openModalDanger(); });", true); if (! string.Isnullorempty(Slink)) <=====[ { Server.Transfer(Slink); } }

  • And you need to open the modal code Behind even? In which situation you need to open the modal?

  • Whenever I need to put a message on the screen, I want to use the modal, that’s why the Text assignment of Labels. When in a validation in the Database, for example, email already registered, CPF already registered, Nonexistent code, am end, any event that I need to inform the operator or user, I will be using the modals (Danger, Alert and Info), plus 2 for presentation of explanatory texts! And this, I believe only by Code Behinde, because by Apsx I would use the Validators, I think! As I put, I am learning, if it has better shape, I am open!

  • Are you using webapi? or webforms?

  • Webforms!......

  • You can edit the post and add the info you put in the comment and change the tag.

Show 2 more comments

1 answer

1


I added the code the way you posted it:

modal opening/closing code in masterPage and webform codebehind made the call: 

ScriptManager.RegisterStartupScript(this, this.GetType(), "script", "openModalDanger();", true);

Turns out, if I leave the script: 

function openModalDanger() {
    $('#ModalDanger').modal();
}

It doesn’t open the modal. But then I switched to: 

function openModalDanger() {
    setTimeout(function () {
        $('#ModalDanger').modal();
    }, 500);
}

And the modal opened.

It turns out that the webform call happened before the HTML rendering of the modal, which was the last body content. So, just take all the modal HTML as the first block of body code in masterPage. Keep your script in the header and it will work.

Remember that when adding this script to the head, you must have loaded before it, jquery and bootstrap, in that order, ok?

It is my opinion that I do not think it is cool that the server keeps calling client. It seems that things get minvertidas, no? Think about using return variables all of a sudden and deal with the js check and call in js.

follows the sequence of tests:

Masterpage

<script src="Scripts/jquery-1.10.2.js"></script>
<script src="Scripts/bootstrap.js"></script>
<html lang="pt">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - Meu aplicativo ASP.NET</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <script type="text/javascript">
        function openModalDanger() {
            $('#ModalDanger').modal();
        }

        function closeModalDanger() {
            $('#ModalDanger').modal('hide');
        }
    </script>
</head>
<body>
    <div class="modal fade" id="ModalDanger" role="dialog" aria-labelledby="myModalDanger" runat="server">
        <div class="modal-dialog" role="document" runat="server">
            <div class="modal-content" runat="server">
                <div class="modal-header" style="background-color: red; color: whitesmoke;" runat="server">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4>Atenção!!!</h4>
                </div>
                <div class="modal-body" runat="server" style="margin-top: 25px; padding-top: 20px;">
                    <br />
                    <asp:Label ID="lblDanger1" runat="server" Text="" Visible="True" />
                    <asp:Label ID="lblDanger2" runat="server" Text="" Visible="True" />
                    <asp:Label ID="lblDanger3" runat="server" Text="" Visible="True" />
                    <br />
                    <br />
                </div>
                <div class="modal-footer" runat="server" style="background-color: red;">
                    <%--<button class="btn btn-default" data-dismiss="modal" id="btnDangerClose" runat="server" type="button" >Fechar</button>--%>
                    <input type="button" />
                </div>
            </div>
        </div>
    </div>
    <form runat="server">
        ...
    </form>
</body>

And the call I tested directly on the pageLoad of the default.aspx, the first block of post code: 

ScriptManager.RegisterStartupScript(this, this.GetType(), "script", "openModalDanger();", true);

  • The first one I tested and it didn’t work In addition, I declared the scipts in the end, because I read in many that it would be better in the end, as I am learning Web programming, I decided to follow, but your placement is strong. In the case of return, in the three modals I listed (Danger, Alert and Info), there is no need, because they are only information presented, already in Modalyesno, I do the validation to know which button received the click. I’ll go up the Divs and Script as you advised and see!

  • 1

    You’re right about the scripts at the end. Because we understand that, all the html and styles were loaded the page would be qse ready, so it’s time for the treatments, event assignments and so on. But in this case, if you call the script, we assume, in the pageLoad of a webform, and add the script only at the end of the master, will get a message: the function: abc() is undefined/not found. You will need to have the script added before and the html of the modal rendered before.

  • Ah, and remembering that when you take the script pro header, running it, you will need to have loaded jquery and bootstrap before that, ok?

  • Aline, I followed your directions, I went up the scripts, the modals, keeping them inside the <body><form> , I changed the script "openModalDanger", tested a few times, changing and everything, but it didn’t work! If there was any way, I would send you the whole project, because I think with your expertise, I would easily tell you where the mistake is! But thank you, discovering something, please help me!

  • Well, @Arnaldooliveira, I put all the code there. I tested it and it’s working... You see some error in the console or something like that calls the script?

  • No mistake, it’s normal when I debug.. :-( .

  • Okay. Last test I can think of: Function openModalDanger() { console.log("elements: " + $('#Modaldanger').length); $('#Modaldanger'). modal(); } what is printed there?

  • Ok! I commented on the method and pasted what you posted, also commented the direction to the default page, Modaldanger appeared. Declared in Masterpage’s Code Behinde "protected string Linkacess { get; set; }"; before calling Modal, assign the value of "Slink" to "Linkacess" and "Onclick" from the Modal Close button, go to the desired page, but "Linkacess" is null, the assigned value was not. Now the error is another and I have to see why the assigned value is not coming. Modal is showing up now!!! Thanks a lot!!!!

  • Aline, thank you for your attention and for sharing your expertise! This subject is closed!!! I think! Goal achieved!!!

  • Great, @Arnaldooliveira. If the answer helped you, you can mark it as right so it can help other people too. (=

  • Forgive my ignorance, but how to do it?

  • 1

    There’s a straight one below the number on the left side of the answer. =)

Show 7 more comments

Browser other questions tagged asp.net-mvc bootstrap-3 webforms modal

You are not signed in. Login or sign up in order to post.