Monday, 7 September 2015

How to pass model in a ajax call to a method ??

Form MVC 3 or MVC 2 the objs passed in the form of json are automatically converted model format if the model of that type of object exists.
Let say we have a model 'Customer'

Public class Customer 
public int CustomerID {get; set;}
public string CustomerName {get; set;}
public string CustomerAddress {get; set;}

Here we have a model 'Customer' with 3 attributes ID, Name, Address.
Now we need to have a Get method and a post method

public ActionResult Index()
return View("");

public ActionResult Index( Customer modelCustomer)
// Do your stuff here 
return View ("")

Here i have two different Function in the above code one is the httpGet method this is used to call the view where as the other is used to call the post method form the view may be using Submit or using ajax calls.

here goes the code for ajax call

@model iEnumerable
@using (Html.BeginForm("Index", "Home" , FormMethod.Post , new {id = "form1"}))
@Html.TextBoxFor(x=> x.EmailAddress)
@Html.TextBoxFor(x=> x.Name)

-- Script --


url : this.action,
type: this.method,
data: $(this).serialize(),// this will serialize the model in json format for the 
success: function (result)

error: function(result)


Here we can see the function in ajax which sends the complete model to the HttpPost method .

feel free to comment about any queries, Thank you

Passing multiple models in single view .

There are two different ways of doing this .
* Passing parent view that contains both the models which we want to pass in the view .
* passing each model in a ViewBag

we have two different models

public class Customer 
public int CustomerID {get; set;}
public string CustomerName {get; set;}

public class Product
public int ProductId {get; set ;}
public string ProductName{get; set ;}

1. By passing a parent view

Here we want to pass both the models in a single view , by default the razor engine only accepts single model per view.
so we need to create a parent view that hold both the models.

public class ParentView
public Customer customer{get; set;}
public Product product{get ; set;}

then we can call the model in the view by using the following code
in view page :

@model iEmumerable <models.ParentView>

ForEach(var v in ParentView)
< option > @v.customer.CustomerID < / option >
< option > @v.customer.CustomerName <  / option >
< option > @v.product.ProductId < / option >
< option > @v.product.ProductName < / option >


thus we cann have two different modles in Single view.
we can have more that twpo models also by this method.

2. Using ViewBag

here we can place the content of model lists in the view bag

public ViewResult GetDetails()
ViewBag.Customer  = _repository.getCustomer() ; // basically _repository is a class from where the data is being fetched from the database
ViewBag.Product =_repository.getProducts(); // Here we are fetching the procts fromt he database using the same _repository class
return View();

Now we will present this data on the view using these ViewBags.


Customer Details
@ (var v in ViewBag.Customer as models.Customer)

Product details
@ (var p in ViewBag.Customer as models.Customer)