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?
I find it very interesting, can you make an example of how it could be used? thank for the post
ReplyDeleteIn 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.
ReplyDelete1. 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.
Hi Praveen,
ReplyDeleteWith 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
Hi,
ReplyDeleteActually i also get the following error while trying the example
The Controls collection cannot be modified because the control contains code blocks
Thanks
Hi Anushka,
ReplyDeleteThe 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.
How to add jQuery reference...???
ReplyDeleteDownload jquery here.
ReplyDeletehttp://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.
I found this post very interesting. Should test on my machine.Thanks for the nice tips.
ReplyDeleteNice article. But really speaking no JQuery usage in the example posted.
ReplyDeletehow to get the value of controls like textbox present in the modal window...am getting "" for textbox.text..?
ReplyDeleteThanks
I am really thankful for this post. It works and it has solved my problem.
ReplyDeleteRegards
Dariox from Argentina.
looks pretty straight forward. but
ReplyDeletecausing postback :(
any ideas???
P.S. i also put "return false" but no better result
Thanks a lot.
ReplyDeletei want to trigger button_click event for an aspx page. i have followed thesteps by Praveen nut nothing is coming up.
ReplyDeleteThanxxxxxxxxxx a lot sir........
ReplyDeleteDoes it work for server side dropdown??
ReplyDeletenice solution :)
ReplyDeleteits doesn't trigges server side button event praveen..actually its goes server side but doesnt go button event
ReplyDeleteIt was is very good find.Solved my problem. Cheers man
ReplyDeleteMan that was awesome solved my problem. Cheers
ReplyDeleteGreat. Works fine. Just what I've been looking for a long time.
ReplyDeleteThanks for posting Praveen! Most helpful :)
ReplyDelete