Sunday, September 29, 2013

Pass complex object to Web API in MVC

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.


Let us know- how to pass complex types object to the Web API and MVC methods to remove complexity at server side and make it simple and useful with the help of this example.



Model Class

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

0 comments:

 
Powered by Code Imagine