martedì 19 febbraio 2013

JQuery - PostBack from JQuery Modal DialogBox

In our web applications sometimes we need to use JQuery Modal Dialog Box and make some action in it, for example an insert/update into a database. 
To make this, we have to associate at the action of the modal box button an hidden Aspx button.
The following code show how make this. 

JQuery code to make the Modal Dialog Box:

$("#Your_DIV_ID").dialog(
            {
                autoOpen: false,
                height: 400,
                width: 350,
                modal: true,
                buttons:
                {
                    Ok: function ()
                    {
                       $("#Your_Button").click();
                    },
                    Cancel: function ()
                    {
                        $(this).dialog("close");
                    }
                },
                close: function ()
                { }
            }).parent().appendTo($("form:first"));


The Html/Aspx Code to declare your Modal Box and for example the button for the action:

<div id="Your_DIV_ID" title="Your Title">

    ... Your Div Content ...
       
    <asp:Button ID="Your_Button" style = "display:none" runat="server" Text="Save"  onclick="Your_Button_Click"  />

</div>


C# Code of the button:

protected void Your_Button_Click(object sender, EventArgs e)
        {
           // Do Somenthing
     }


My Two Cents ...

Nessun commento:

Posta un commento