Display jquery dialog on postback in ASP.NET after saving a new record.

Question

What I would like to do is have the user add a new record to the database and popup a JQuery dialog confirming that the new record was saved. I thought this would be a simple exercise. I have a gridview bound to a LINQDataSource to allow the user to view and edit existing records and a textbox and a button to add new codes.

In the head of the document, I have the following:

$('#dialog').dialog({
    autoOpen: false,
    width: 400,
    buttons: {
        "Ok": function () {
            $(this).dialog("close");
        }
    }
});

and futher down in the markup I have:

<div id="dialog" title="New Code Added">
<p>"<asp:Literal runat="server" ID="LiteralNewCode"></asp:Literal>" was successfully added.</p>
</div>

So when the user enters a new description and it passes all the validation, it's added to the database and the gridview is rebound to display the new record.

protected void ButtonSave_Click(object sender, EventArgs e)
{
    if (Page.IsValid)
    {
        CCRCode.Add( <long list of paramters> );
        GridCode.DataBind();

        IsNewCode = true;
        NewDescription = <new description saved to database>;
    }
}

Now, here's where (I thought) I'd set a boolean property to indicate that a new description had been added as well as the text of the new description. See below:

protected bool IsNewCode
{
    get { return ViewState["IsNewCode"] != null ? (bool)ViewState["IsNewCode"] : false; }
    set { ViewState["IsNewCode"] = value; }
}

private string NewDescription
{
    get { return ViewState["NewDescription"] != null ? ViewState["NewDescription"].ToString() : string.Empty; }
    set { ViewState["NewDescription"] = value; }
}

Here's where I loose my way. My guess is I want to add functionality to include code similar to:

$('#dialog').dialog('open');

I've added a registerscriptblock method in the page_load event but that didn't work. Any ideas? Or am I just going about this entirely wrong?

Thanks.

Answer 1

Not really get what you want to do. But, i use jquery alot with .NET in my projects. here is how i do, probably could give you a hint.

foo.aspx.cs

public String ScriptToRun = "$('#dialog').dialog('open');";

change the value of ScriptToRun in your C# code

foo.aspx

$(document).ready(function() {<%=ScriptToRun %>});

Remember that whatever you done in backend is going to generate HTML, Css& javascript to browser.

Answer 2

Hey,

Two ways: one, write the javascript in your server-side code. Or, define a JS method to show the dialog (say named showDialog), and call it via:

Page.ClientScript.RegisterStartupScript(... "showDialog();" ..);

RegisterStartupScript puts the method call at the end, ensure your script is above it to work. You can also wrap it with document.ready call too, to ensure JQuery is properly loaded.

Answer 3

I think that the only think that you have miss is the creation of the dialog when the Dom is ready.

$(document).ready(function() {$('#dialog').dialog('open');});

Answer 4

I posted code in a different question for a custom "MessageBox" class I wrote: http://stackoverflow.com/questions/3144932/asp-net-jquery-c-messagebox-show-dialog-uh-issue/3145345#3145345

the code by default uses the javascript alert() function, but you can define your callback so that it calls your custom javascript method to display the messages.