CODEWITHSUNDEEP
asp.net-mvcasp.net-mvc-5asp.net-ajaxasp.net-mvc-partialviewajaxform
User
User

Reputation: 1363

how to update different Partial view using one ajax call

enter image description here

In above image when double click on div(First Image) then View dialog box(second Image) both case content printed same data but structure is different.

controller 

  [HttpPost]
  public ActionResult FirstParialView(long ID)
  {
      //inserted some data into database Here

    List<TimetableDetails> timetableObs =unitofWork.TimetableDetails.ToList();
     return PartialView("DayStructure/_FirstView", timetableObs);
  }   

  [HttpPost]
  public ActionResult SecondParialView(long ID)
  {
    List<TimetableDetails> timetableObs =unitofWork.TimetableDetails.ToList();
     return PartialView("DayStructure/_SecondView", timetableObs);
  }

Ajax call (This Ajax design and work in dialog box)

 @using (Ajax.BeginForm("FirstParialView", "timetable", new { area = "User" },
                        new AjaxOptions { OnSuccess = "ViewMPlan"))
{
      //Inserted Some data using submit button here. and view both parial view
}

javascript

 function ViewMPlan(response) {
   //print first Parial View
   $('#firstParialView').html(response);
  //for second parial view
    $.ajax({
                url: "/user/timetable/SecondParialView",
                type: "POST",
                dataType: "JSON",
                data: { ID: ID},
                success: function (response) {
               $('#SecondParialView').html(response);
          }
        });
    }

In above case I have to seperate ajax call for second parial view actual it gets same data .

Is this possible to update both parial View using just Single Call like just Only calling FirstParialView

Upvotes: 0

Views: 1464

Answers (1)

RAHUL S R
RAHUL S R

Reputation: 1579

You you can indeed do this what i do is that i'v created a function which will render my partial views inside a variable, like this 

private string RenderPartialView(string viewName, object model)
        {
            ViewData.Model = model;
            using (System.IO.StringWriter writer = new System.IO.StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, writer);
                viewResult.View.Render(viewContext, writer);

                return writer.GetStringBuilder().ToString();
            }
        }

now you need to change your action result something like

[HttpPost]
public JsonResult AjaxCallFunc(long ID)
{
List<TimetableDetails> timetableObs =unitofWork.TimetableDetails.ToList();
var partialView1 = RenderPartialView("DayStructure/_FirstView", timetableObs);
var partialView2 = RenderPartialView("DayStructure/_SecondView", timetableObs);
return Json(new{View1=partialView1,View2=partialView2 },JsonRequestBehaviour.DenyGet);
}

and then your controller to 

unction ViewMPlan(response) {
   //print first Parial View
   $('#firstParialView').html(response);
  //for second parial view
    $.ajax({
                url: "/user/timetable/AjaxCallFunc",
                type: "POST",
                dataType: "JSON",
                data: { ID: ID},
                success: function (response) {
                $('#FirstPartialView').html(response.View1);
               $('#SecondParialView').html(response.View2);
          }
        });
    }

Upvotes: 1

Related Questions