How to load partial view via jQuery?

Question

I'm trying to load a partial view using jQuery. The partial view is being loaded from Contact.cshtml. However, in Chrome, I keep getting a 404 when trying to load partialViewName.cshtml.

I have the following folder structure:

/Views/Contact/Contact.cshtml

/Views/Contact/partialViewName.cshtml

$('#divname').load('partialViewName');

The URL I'm on is http://localhost/Contact/Index

Any ideas what I'm doing wrong?

Answer 1

The folder structure and the name of the .cshtml file is irrelevant. You should make an ajax call to controller action which returns the partial view you want.

The controller action method returning the partial view should look like following,

//
// GET: /SampleController/MyAction

[HttpGet]
public ActionResult MyAction()
{
   return PartialView("_MyPartial");
}

Then you need to make a call to this method,

$('#divname').load("/SampleController/MyAction");