Please enable Javascript to correctly display the contents on Dot Net Tricks!

How to pass javascript complex object to ASP.NET Web Api and MVC

  Author : Shailendra Chauhan
Updated On : 26 Sep 2016
Total Views : 96,137   
 

ASP.NET Web API is one of the most powerful recent addition to ASP.NET framework. Sometimes, you have to post a form data using jQuery-JSON to Web API or MVC method, which have so many input fields. Passing each and every input field data as a separate parameter is not good practice, even when you have a strongly typed-view. The best practice is, pass a complex type object for all the input fields to the server side to remove complexity.

In this article, I am going to explain you how can you pass complex types object to the Web API and MVC method to remove complexity at server side and make it simple and useful.

Model Classes

Suppose you have the following Product class and repository for product.

public class Product
{
 public int Id { get; set; }
 public string Name { get; set; }
 public string Category { get; set; }
 public decimal Price { get; set; }
}

 interface IProductRepository
{
 Product Add(Product item);
 //To Do : Some Stuff
}

public class ProductRepository : IProductRepository
{
 private List<Product> products = new List<Product>();
 private int _nextId = 1;

 public ProductRepository()
 {
 // Add products for the Demonstration
 Add(new Product { Name = "Computer", Category = "Electronics", Price = 23.54M });
 Add(new Product { Name = "Laptop", Category = "Electronics", Price = 33.75M });
 Add(new Product { Name = "iPhone4", Category = "Phone", Price = 16.99M });
 }

 public Product Add(Product item)
 {
 if (item == null)
 {
 throw new ArgumentNullException("item");
 }
 
 // TO DO : Code to save record into database
 item.Id = _nextId++;
 products.Add(item);

 return item;
 }
 //To Do : Some Stuff
}

View (Product.cshtml)

<script type="text/javascript">
//Add New Item by Web API
$("#Save").click(function () {

 //Making complex type object
 var Product = {
 Id: "0",
 Name: $("#Name").val(),
 Price: $("#Price").val(),
 Category: $("#Category").val()
 };
 
 if (Product.Name != "" && Product.Price != "" && Product.Category != "") {
 //Convert javascript object to JSON object
 var DTO = JSON.stringify(Product);
 $.ajax({
 url: 'api/product', //calling Web API controller product
 cache: false,
 type: 'POST',
 contentType: 'application/json; charset=utf-8',
 data: DTO,
 dataType: "json",
 success: function (data) {
 alert('added');
 }
 }).fail(
 function (xhr, textStatus, err) {
 alert(err);
 });

 }
 else {
 alert('Please Enter All the Values !!');
 }

});

</script> 
<div>
 <div>
 <h2>Add New Product</h2>
 </div>
 <div>
 <label for="name">Name</label>
 <input type="text" id="Name" title="Name" />
 </div>

 <div>
 <label for="category">Category</label>
 <input type="text" id="Category" title="Category" />
 </div>

 <div>
 <label for="price">Price</label>
 <input type="text" id="Price" title="Price" />
 </div>
 <br />
 <div>
 <button id="Save">Save</button>
 <button id="Reset">Reset</button>
 </div>
</div>

Web API Controller

public class ProductController : ApiController
{
 static readonly IProductRepository repository = new ProductRepository();
 public Product PostProduct(Product item)
 {
 return repository.Add(item);
 }
} 

How it work ?

The same thing you have to done with MVC while calling MVC controller method using jQuery-JSON.

What do you think?

I hope you will enjoy the tips while playing with Asp.Net Web API and MVC. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.


YOU MIGHT LIKE
Free Interview Books
 
COMMENTS (1)
imran Reply

Nice explain.

13 FEB
ASP.NET Core Development (online)

07:00 AM-09:00 AM IST( MON, WED, FRI)

Know More
25 JAN
Angular2 and Angular1 Development (online)

09:00 PM-10:30 PM IST(MON-FRI)

Know More
24 JAN
ASP.NET MVC with Angular2 Development (online)

07:00 AM-09:00 AM IST(Tuesday & Thursday)

Know More
21 JAN
Xamarin Forms : Build Cross-platform Apps (offline)

05:00 PM-06:30 PM IST

Know More
20 JAN
NODEJS & MEAN Stack 2 Development (online)

09:00 PM-11:00 PM IST( MON, WED, FRI)

15 JAN
PPC Marketing (offline)

04:00 PM-05:300 PM

10 JAN
ASP.NET MVC with AngularJS Development (online)

09:00 PM-11:00 PM IST on (TUE, THRU,SAT)

3 JAN
ASP.NET MVC with AngularJS Development (online)

07:00 AM-09:00 AM IST

31 DEC
ASP.NET MVC with AngularJS Development (offline)

09:30 AM-11:00 AM

31 DEC
Angular2 and Angular1 Development (offline)

11:00 AM-12:30 AM

26 NOV
ASP.NET MVC with AngularJS Development (offline)

03:00 PM-04:30 PM

5 NOV
ASP.NET MVC with AngularJS Development (offline)

08:00 AM-09:30 AM

4 SEP
MEAN Stack 2 Development (offline)

11:00 AM-12:30 PM.

BROWSE BY CATEGORY
 
RECENT ARTICLES
SUBSCRIBE TO LATEST NEWS
 
LIKE US ON FACEBOOK
 

Professional Speaks

+