CODEWITHSUNDEEP
c#asp.netpostbackjquery-dialog
Gopi
Gopi

Reputation: 5887

Prevent Postback after opening jQuery dialog box

Page:

<body>
 <form id="frmLogin" runat="server">  
  <asp:Button ID="btnClick" OnClientClick="openConfirmDialog();" OnClick="PopulateLabel"  runat="server"/>
  <div id="divDialog"></div>
  <asp:Label ID="lblText" runat="server"></asp:Label>
 </form>
</body>

JS

<script type="text/javascript">
 $(document).ready(function() {
 $("#divDialog").dialog({autoOpen: false,
                     buttons: { "Ok": function()
                                      { 
                                         $(this).dialog("close");
                                      },
                                "Cancel": function()
                                      { 
                                          $(this).dialog("close");
                                      }
                              } 
                   });
 });

 function openConfirmDialog()
 {
  $("#divDialog").dialog("open");
 }

C#

protected void Page_Load(object sender, EventArgs e)
 {
    lblText.Text = "";
 }

protected void PopulateLabel(object sender, EventArgs e)
 {
    lblText.Text = "Hello";
 }

This code opens me a dialog box with Ok and Cancel button but it do not wait for user activity and post the page immediately and the label gets populated. I need to call the c# function based on user activity. If user clicks "Ok" label should get populated and if user clicks "Cancel" it should not call the c# function. How do I achieve this?

Upvotes: 1

Views: 7070

Answers (2)

Gopi
Gopi

Reputation: 5887

Added another button and used the jQuery click() event to trigger new button's click event which will in turn trigger the respective event handler in C#

Upvotes: 0

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262939

First, to prevent the page from immediately posting back to the server, you need to cancel the default behavior of the click event by returning false from your handler:

<asp:Button ID="btnClick" runat="server" OnClick="PopulateLabel"
    OnClientClick="openConfirmDialog(); return false;" />

Next, you need to perform the postback yourself when your Ok button is clicked:

$("#divDialog").dialog({
    autoOpen: false,
    buttons: {
        "Ok": function() { 
            $(this).dialog("close");
            __doPostBack("btnClick", "");
        },
        "Cancel": function() { 
            $(this).dialog("close");
        }
    }
});

Note that the first argument to __doPostBack() is the name of the control (its UniqueID in ASP.NET terminology). Since the button is a direct child of the <form> element, we can hardcode its id in the __doPostBack() call, but things will get more complicated if it resides in a container hierarchy. In that case, you can use ClientScript.GetPostBackEventReference() to generate the appropriate call to __doPostBack().

EDIT: Since your page does not contain any postback-enabled control, __doPostBack() won't be defined on the client side. To work around that problem, you can use a LinkButton control instead of a Button control.

Upvotes: 4

Related Questions