Step By Step How to open a JQuery UI Dialog from server side

        By Carmel Shvartzman

In this tutorial we'll learn how to open a JQuery UI Dialog from server side, showing at client side a message from the server side. For this tutorial, we'll not use the classic alert() javascript function, but a more sophisticated dialog widget from JQueryUI. 
The jQuery UI is a set of user interface widgets, interactions, and themes built on top of the jQuery JavaScript Library.
We'll customize the JQuery UI Dialog so that it's located in the MIDDLE of the web page, will open in 1000 milliseconds on the screen, and when closed it will disappear during another 1000 milliseconds using the "explode" jquery effect.

We'll want to add to our MVC site the jQuery Dialog , showing as follows:

First, go to the corresponding Controller to add the code to render a message to the browser:

 As you can see, the message will be contained in ViewBag, and will open only when a condition will met : in this case, when a session parameter exists.
Then go to the View, and add the Dialog widget as follows :

Now, we code the following to
1) HIDE the dialog while not necessary
2) DISPLAY the dialog IF the server requires it :

This is the code to copy-paste :

(SERVER SIDE) 

if ((string)Session["status"] == "OPEN_ALERT_WINDOW")
            {
                ViewBag.Alert = true;
                ViewBag.Message = "This is a message sent from the Web Server to client side";
                Session["status"] = null;
            }

(CLIENT SIDE)

        <div >

  <div id="effect" class="ui-widget-content ui-corner-all">  
    <p>
       @ViewBag.Message
    </p>
  </div>
</div>

@{
    <script>
        $("#effect").hide();
    </script>
 
    if (ViewBag.Alert == true)
    {
        <script>
            $("#effect").dialog({
                autoOpen: true,
                title:"Message",
                show: {
                    effect: "blind",
                    duration: 1000
                },
                hide: {
                    effect: "explode",
                    duration: 1000
                }
            });    
     
        </script>
    }  
}

Check whether you load the jquery.js & jquery-ui.js files, containing the necessary functions to call.
And the dialog will finally appears as this :

That's all!! 

In this tutorial we've learn how to open a JQuery UI Dialog from server side, showing at client side a message from the server side. 

Happy programming.....

כתב: כרמל שוורצמן