ASP.NET Button to update properties and show jQuery Modal

Question

Hello,

I have the following ASP.NET code:

<div id="panelIssue" runat="server" style="width: 450px; height: 320px;">
    <gsl:IssueUC ID="ucIssue" runat="server" 
        OnItemSaved="ucIssue_ItemSaved" 
        OnItemCancelled="ucIssue_ItemCancelled" />
</div>

and then have an asp:Button on the page that simply call some methods and set some properties of the custom user control like

protected void btnNewIssue_Click(object sender, EventArgs e) {
    ucIssue.ChangePanelMode(PanelModeEnum.Add);
    ucIssue.FirmID = Convert.ToInt32(Page.Session["FirmID"]);
    ucIssue.loadObject();
}

I know that I can use the div to show a jquery modal dialog but the question is how to set the usercontrol properties and call their methods? I can evaluate also a different approach (e.g. changing the usercontrol).

Thanks in advance Lorenzo

Answer 1

What I can suggest is that in the click event, after setting the control properties, you can emit a piece of javascript that will create and display a modal when the page finishes loading upon reaching the client.

Try something along the lines of the following snippet (not tested, may need small tweaking to work, but I hope you get the big idea):

protected void btnNewIssue_Click(object sender, EventArgs e) {
    ucIssue.ChangePanelMode(PanelModeEnum.Add);
    ucIssue.FirmID = Convert.ToInt32(Page.Session["FirmID"]);
    ucIssue.loadObject();

    //emit client script that will create and show the modal dialog
    ClientScriptManager clientScriptManager = Page.ClientScript;
    string scriptText = "$(document).ready(\n" +
                            "function() {\n" +
                                "$('#panelIssue').dialog({\n" +
                                    "autoOpen: false,\n" +
                                    "modal: true,\n" +
                                    "width: 450,\n" +
                                    "height: 320,\n" +
                                    "title: \"Some title\",\n" +
                                    "resizable: false,\n" +
                                    "draggable: false });\n" +
                                "$('#panelIssue').dialog('open');\n" +
                            "});";
    clientScriptManager.RegisterClientScriptBlock(this.GetType(), "MyScript", scriptText, true);
}

You should also look at the capabilities of the dialog creation in jQuery to see what other settings will fit your scenario better. I just used a few of the params that I have in an example of mine.