Rendering partial View in MVC

Question

i am not so familiar working with partial Views. The reason behind that is that I really do not have the basics of Jquery/JS/Ajax. But I recently found through some SO post that a partial view can be rendered using AJAX Unobtrusive. The method in the post seems to be really simple using the Ajax Helper methods.

But I came across many similar posts asking for help in rendering the Partial view. But most have suggested using scripts to render the same.

What is the reason why people never suggested Unobtrusive AJAX. (In my case I never got it right using Unobtrusive AJAX, but I strongly believe that it isn't the problem of Unobtrusive Ajax, but mine).

I am looking for suggestions in rendering a partial view. I have a project to be completed in a month. I would prefer someone suggests some easy methods to get my task done.

Answer 1

There are two times when you want to render a partial view:

1. Synchronously, as part of rendering a larger view

   e.g. the view that is called when rendering /Widgets/Details/ might have Razor code that looks like this

   <div class="subwidget">
     @Html.Partial("_Subwidget", Model.Subwidget)
   </div>
   

   This will then render the _Subwidget.cshtml and pass the Subwidget property of the current view's Widget. This helps in breaking down larger views to make them more manageable and lets you render the _Subwidget view in other views without duplicating code.

2. Asynchronously, when the partial view is the entire content you want returned from calling a controller method.

   e.g. the page is already on the client device but contains this jQuery code

   $.get('/Widgets/Subwidget/300')
   

   Which sends a GET to the Widgets controller and calls Subwidget(300). The Subwiget action doesn't want to include any of the layout and other stuff, it only wants to return bare data (which could be an HTML fragment, JSON, or even just a string).

   The Subwiget action might look something like this

   public ActionResult Subwidget(int Id)
   {
   var subwidget = _widgetGateway.Subwidget(Id);
   return PartialView("_Subwidget", subwidget);
   }
   

   It's up to the javascript code on the page to deal with it at that point.

It's important to keep in mind that a partial view is just the result that is sent to the browser. Your actions are still able to do all of the things that a standard controller action could do. If you want to accept data in the form of a POST, PUT, or DELETE you can also do work in your action:

[HttpPost]
public ActionResult SubmitSubwidget(Subwiget sub)
{
  _widgetGateway.Save(sub);      
  return PartialView("_Subwidget", sub);
}

In fact, you don't even have to return any content back to the browser at all. If you just want to know whether the call succeeded, you can just send the HTTP status code.

[HttpPost]
public ActionResult SubmitSubwidget(Subwiget sub)
{
  if(_widgetGateway.Save(sub))
    return new HttpStatusCodeResult(200, "Submitted");
  else
    return new HttpStatusCodeResult(500, "Submission failed");
}