How to call a client-side method from an asp.net method?

Question

I have the following javascript:

<script type="text/javascript">
    function showjQueryDialog() {
        $("#dialog").dialog("open");
    }

    $(document).ready(function() {
        $("#dialog").dialog({
           autoOpen: false,
           modal: true,
           buttons: { "Renew Membership": function() { $(this).dialog("close"); } }
        });
    });
</script>

I have an asp:Button on the page which logs the user it. This is the sample of what I want to occur when the button is clicked on the server-side:

protected void LoginButton_OnClick(object sender, EventArgs e)
{
    UserProfile profile = UserProfile.GetUserProfile(txtUserName.Text);

    TimeSpan ts = profile.Expiration.Subtract(DateTime.Now);

    if(ts.Days <= 30)
      //call showJQueryDialog() to open the dialog box
      Page.ClientScript.RegisterStartupScript(typeof(Login2), "showjquery",   
      "showJQueryDialog();", true);
    else
     //log the user in as normal.

}

Also is how would I attach a method such as the following to the Renew Button on the Dialog

public void Renew()
{
    Response.Redirect("Renew.aspx");
}

Answer 1

if(ts.Days <= 30)
    ScriptManager.RegisterStartupScript(
        typeof(MyPage), "showjquery", 
        "$(document).ready(function() { showJQueryDialog(); };", 
        true
    )
else
     //log the user in as normal.

Put that right where you have: //call showJQueryDialog() to open the dialog box

Update 1: You seem to be using an update panel, in that case you need to use ScriptManager.RegisterStartupScript

Update 2: You also want to wrap the js call in a jquery .ready call, so it isn't triggered before the dialog has been configured. This is better than hooking up the body onload because onload waits for images to be loaded so .ready will show sooner (depending on the images and other bits of info loaded).

Answer 2

I would keep a hidden LinkButton and then call the __doPostBack method in javascript.

<asp:LinkButton runat="server" ID="Renew" OnClick="Renew_Click" style="display:none" />

jQuery

$(document).ready(function() {
    $("#dialog").dialog({
       autoOpen: false,
       modal: true,
       buttons: { "Renew Membership": function() { 
          $(this).dialog("close"); 
          __doPostBack('Renew', '');
         // or if inside a master page something like this
          __doPostBack('ctl00$ContentPlaceHolder1$Renew', '');
       } }
    });
});

Answer 3

As calling client side function is not possible I would suggest to emit in javascript the information required for the decision and make everything happen on the client side.

Alternatively you can do need a page reload, as suggested from previous commenter.

Answer 4

I really don't understand Freddy's approach to this at all. I am misunderstanding something maybe. The way I see it, there are only two possibilities here, as devdimi point out. Either:

a) Do all the logic in the client-side onClick javascript. You could call an AJAX method that performs the action in the server-side OnClick, then call your jQuery popup in the AJAX callback.

b) Do a postback, handle the server-side OnClick, then attach javascript for the page that runs in the body onLoad event:

body.Attributes.Add("onLoad", "showJQueryDialog();")

Answer 5

I have a somewhat similar issue with IE8.

We're using ASP.NET and anytime we do a Response.Redirect within the PageLoad/Control-Events IE8 sets all the base DOM objects to undefined (Image, window, document) But if we do the redirect during the PreInit event then IE8 is fine.. Lovely