Home > ASP.NET MVC > ASP.NET # MVC # 20 – Pass/Send Object from Server to JavaScript method on Ajax Form’s onSuccess Event using JSON(JavaScript object notation).

ASP.NET # MVC # 20 – Pass/Send Object from Server to JavaScript method on Ajax Form’s onSuccess Event using JSON(JavaScript object notation).

Hi Friends,

Many times we come across the situation where we need to pass the class object from server to the JavaScript function on onSuccess method of Ajax.BeginForm.

OnSuccess gets called only if the request was successful.

In this post we will see how to pass the object from the method on controller to the client side JavaScript method.

-> We have our Ajax Form and JavaScript method as follows:

Code on MVC View
  1. <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  2.     <script type="text/javascript">
  3.         function funSuccess(context) {
  4.             debugger;
  5.             var html = context.get_data();
  6.             var obj = $.parseJSON(html);
  7.             alert(obj.SuccessMessage);
  8.         }
  9.     </script>
  10.     <%using (Ajax.BeginForm("PostFormMethod", "Search", new AjaxOptions { OnSuccess = "funSuccess" }))
  11.       { %>
  12.     <h1>
  13.         Hello Ajax</h1>
  14.     <input type="submit" id="btnSubmit" />
  15.     <%} %>
  16. </asp:Content>

 

As you see in the code above we have Ajax.BeginForm  which has PostFormMethod as its Action name and Search as its controller name , and funSuccess is the JavaScript method which is being called on onSuccess event of the form.

-> We have our code on Controller side as follows

Code On Controller
  1. [HttpPost]
  2.         public string PostFormMethod()
  3.         {
  4.             Result obj = new Result();
  5.             obj.SuccessMessage = "Record Saved Successfully!!!";
  6.             System.Web.Script.Serialization.JavaScriptSerializer oSerializer =
  7.              new System.Web.Script.Serialization.JavaScriptSerializer();
  8.             return oSerializer.Serialize(obj);
  9.  
  10.         }

In the above method we are returning the Serialized class object by using the JavaScriptSerializer which is returning the string in serialize format to the onSuccess method of the form.

-> The JavaScript method funSuccess deserialize the object using  $.parseJson jquery function which will return you the object as you see in the following image.

Untitled

 

Thanks,

Hope this will help!!!

Smile

Advertisements
Categories: ASP.NET MVC
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: