Tuesday, August 18, 2009

Call ASP.NET server side event in JQuery

For one of my requirement, I need to implement this functionality on how to call server side event in JQuery. There are many scenarios on why we need to implement it or what is the need for it. I have a button and when user click on it, I need to show a client side light box which exactly functioning as window confirm box. If user selects OK, then I need to do some client side validations and if everything passed, then i need to make a call to server to execute the actual server side click event. I think this is general scenario. There are many cases other than this. So, here is a simple solution on how to call server side event in JQuery. Enjoy this interesting blog post.

1. Create a protected page variable in Server side ASPX.cs file as shown below.

protected string serversideEvent = string.Empty;

2. In Page_Load event, set the serversideEvent variable to the button click event as below.

serversideEvent = Page.ClientScript.GetPostBackEventReference(btnSubmit, string.Empty);

3. In your JQuery, use this function to evaluate on specific condition as shown in below line.

eval(<%=serversideEvent %>);

"btnSubmit" is the ID of the control <asp:Button in ASPX page. and GetPostBackEventReference will get the click event of the related button and return it in the form of string.

That's it. Whenever the line mentioned in 3rd step called, it will call server side event and execute it.

How awesome it is? Very simple and nice way to do it. Isn’t a good and valuable find?

22 comments:

  1. I find it very interesting, can you make an example of how it could be used? thank for the post

    ReplyDelete
  2. In the post, I explained how can we use it in our general programming. I explained in ASP.NET, C# and JQuery environments. Any way, please follow the steps below and implement as I said.
    1. Create ASPX page,
    2. Download JQuery file from JQuery site and add to your root site.
    3. Now reference the JQuery file in your ASPX page.
    4. Now, add below code to your ASPX page inside <form runat="server"> tag.
    <a href="javascript:void(0)" id="linkTest" >Call server side click event</a>
    <asp:Button runat="server" ID="btnTest" OnClick="Btn_Click" Text="Test" />

    5. Now, add below code in <HEAD>tag of ASPX page.
    <script type="text/javascript">
    $(document).ready(function() { $("#linkTest").click(function() { eval("<%=btnClickEvent%>");
    });
    });
    </script>
    Note: Remember that JQuery reference script tag should be declared above this code added.

    6. Now, we are completed from ASPX side.
    7. Now, move to ASPX.CS file and add the code below inside your Page class.

    protected string btnClickEvent = string.Empty;
    protected void Page_Load(object sender, EventArgs e)
    {
    btnClickEvent = Page.ClientScript.GetPostBackEventReference(btnTest, string.Empty);
    }

    protected void Btn_Click(object sender, EventArgs e)
    {
    Response.Write("Response from server.");
    }

    That's it. Now you are ready to test the functionality.

    Please let me know, if you are facing any difficulties here.

    -Praveen.

    ReplyDelete
  3. Hi Praveen,

    With the continuation to my previous post,I am trying to get server side event raised from the Jquery Modal Dialog which is raised from the code behind using Clientscript block.I followed the below approach but i get an error saying control collection modified.

    Basically from the above the click event is attached to the href link but what should i do if i need to raise the button click event as is from the modal dialog mentioned above

    Thanks

    ReplyDelete
  4. Hi,

    Actually i also get the following error while trying the example

    The Controls collection cannot be modified because the control contains code blocks

    Thanks

    ReplyDelete
  5. Hi Anushka,
    The error message you mentioned about "control collection modified". I didn't get any clue from it. Seems some complex logic is going on in your C# code.

    I can give answer to the other one. i.e. Calling server side event from <asp:Button< instead of <a>. In Jquery you can rise any click event of any control. If you want to rise click of a button then use below code.
    $("<%=aspButton.ClientID %>").click(function(){
    //write some logic to call sever-side event.
    return false;
    });

    return false; is for not do any post backs.

    Note: I don't know why you are using the server side Button control on the jquery model dialog. Instead you can use simple input type="button" or if any image is there you can directly use img tag and rise Jquery event onclick and from this event you can call the server-side event.

    Please let me know, if you have any problems in calling server-side event from the button click event. If you are getting still the server side exceptions like the "control collection modified" then try to debug it and check where the problem is.

    ReplyDelete
  6. Download jquery here.
    http://docs.jquery.com/Downloading_jQuery

    And add the download jquery js file to your project. For example, you added js file under root of web site. Then your Jquery reference to the current page should be like this.

    <script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>

    Very simple!!! Let me know, if you have any issues.

    ReplyDelete
  7. I found this post very interesting. Should test on my machine.Thanks for the nice tips.

    ReplyDelete
  8. Nice article. But really speaking no JQuery usage in the example posted.

    ReplyDelete
  9. how to get the value of controls like textbox present in the modal window...am getting "" for textbox.text..?

    Thanks

    ReplyDelete
  10. I am really thankful for this post. It works and it has solved my problem.

    Regards
    Dariox from Argentina.

    ReplyDelete
  11. looks pretty straight forward. but
    causing postback :(
    any ideas???
    P.S. i also put "return false" but no better result

    ReplyDelete
  12. i want to trigger button_click event for an aspx page. i have followed thesteps by Praveen nut nothing is coming up.

    ReplyDelete
  13. Thanxxxxxxxxxx a lot sir........

    ReplyDelete
  14. Does it work for server side dropdown??

    ReplyDelete
  15. its doesn't trigges server side button event praveen..actually its goes server side but doesnt go button event

    ReplyDelete
  16. It was is very good find.Solved my problem. Cheers man

    ReplyDelete
  17. Man that was awesome solved my problem. Cheers

    ReplyDelete
  18. Great. Works fine. Just what I've been looking for a long time.

    ReplyDelete
  19. Thanks for posting Praveen! Most helpful :)

    ReplyDelete