2

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.

3

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");
}
4
  • What if my Partial view has a submit functionality in it. I am trying to integrate my create action method in the index view – Vini Oct 6 '15 at 12:27
  • You can definitely use the asynchronous controller action to do work. See the edits above. – Greg Oct 6 '15 at 12:59
  • I have already done that using Ajax. But my code doesnt work. [Here is the link ] (stackoverflow.com/questions/32965974/…) to my question. Do you now what i am missing to get it right? – Vini Oct 6 '15 at 13:02
  • I answered the general question asked here, but I have now answered the specific question over on SO. – Greg Oct 6 '15 at 13:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.