开发者

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";
 }

Thi开发者_运维技巧s 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?


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.


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#

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜