How To Pass Model Object To View in Asp.Net MVC Using Ajax

Question

View

@model IEnumerable<InfinityWeb.Models.Orders>
<body> 
   foreach(var item in Model)
   {
    <label> item.OrderId </label> <br/>   @* it display all students name *@
   }

 @* Below is just DropDown for making request to controller *@

<div class="dropdown ">
  <button class="btn dropdown-toggle"type="button" id="menu1" data-toggle="dropdown">
        Select Orders
     <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="@Url.Action("MonthOrders", "Admin")">This month orders</a></li>
    <li role="presentation"><a role="menuitem" href="@Url.Action("TodayOrders", "Admin")">Today Orders</a></li>
  </ul>
</div>

Controller - returns new model to same View to iterate over monthly orders

 public ActionResult MonthOrders()
    {
        return View("Index", orders.GetMonthOrders());
    }

The above code works fine, but instead of making call to load whole page I want to make a Ajax request while changing dropdown and receive a Orders Model From a JsonResult action method, so that I can use that model in my foreach loop to iterate over Orders such as below

public JsonResult MonthlyOrders()
{
   // ??
}

And also how would View's Model will receive that object

Shyju · Accepted Answer · 2016-10-09 17:52:40Z

2

You can create a partial view which is strongly typed to a collection of your Orders class. Put the code for looping through the items and displaying in that. Then include this partial view in your main view.

Now for your ajax method, change the return type to ActionResult and return the partial view result. You can build the collection of Orders and pass that list to the same partial view. So your ajax call's response will be the html rendered by the partial view.

Create a partial view called OrderTable.cshtml and have this code

@model IEnumerable<InfinityWeb.Models.Orders> 
foreach(var item in Model)
{
  <label> item.OrderId </label> <br/>  
}

Now in your MonthlyOrders, return this view with data

public ActionResult MonthlyOrders()
{
    var orderList = new List<Orders>();
    // to do : Load data to orderList variable.
    return View("OrderTable.cshtml",orderList)
}

Now in your main view you will include this partial view inside a container div

@model IEnumerable<InfinityWeb.Models.Orders> 
<div id="orders">
 @Html.Partial("OrderTable",Model);
</div>

Now when your ajax calls gets data from server, simply replace the content of the div with id "orders"

$.get("/MonthlyOrders",function(data){
   $("#orders").html(data);
});

edited Oct 9, 2016 at 17:52

answered Oct 9, 2016 at 14:31

Shyju

220k106 gold badges420 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Amit Çhâühañ Over a year ago

Is their any way to update the Model of View through Ajax ?

Amit Çhâühañ Over a year ago

And Json result Can not return ViewResut

Shyju Over a year ago

With ajax, you cannot update the model data of you main view as that gets executed in server and your ajax call happen in client side at a later time. With the partial view approach, you are updating the model data of the partial view. And for the method return type, yes, It should be ActionResult I fixed it now.

Amit Çhâühañ Over a year ago

That was genius Unicorn dude Thanks for help :)

LateshtClick.com · Accepted Answer · 2016-10-09 15:33:38Z

add custom tag to your li

<li role="presentation" custometag="Month"><a role="menuitem" href="Month">This month orders</a></li>
<li role="presentation" custometag="Today"><a role="menuitem" href="Today">Today Orders</a></li>

your ajax call will be like this

$('li').click(function () {

 var param = $(this).attr('custometag');
 $.ajax({
   url: "contact",
   type: "POST",
   data: {result: param },
   dataType: "json",
   success: function (data) {
       // here you can display your return data with your label
   },
   error: function (data) {
       alert('error')
   }
  });
);

and your contoller look like

public JsonResult Contact(string result)
 {
    // here you can get value of Month or Today

    // filter data with your value orders.GetMonthOrders()

    //var data = filtered with result parameter.

    return Json(data, JsonRequestBehavior.AllowGet);
 }

Collectives™ on Stack Overflow

How To Pass Model Object To View in Asp.Net MVC Using Ajax

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related