Failed to return PartialView in jQuery.ajax call
Background:
I am working on an ASP.NET MVC application that has 3 partials (based on Razor engine) on the master page. The first partial list contains a list of search criteria that the user fills in. The second partial should show a list of ParameterParts based on the data passed. The third part is to show a list of specifications based on the transmitted data. I need to call methods in the controller to populate my 2nd and 3rd partial views.
Problem:
- Returning a PartialView makes the ajax call match the error condition.
- Returning void meets the success condition, but then I have nothing to fill with parameters.
- The return json matches the success condition, but then my partial view is displaying nothing.
- Everything seems to work if I can convert my partialview to a string and return it as json ( http://www.tugberkugurlu.com/archive/working-with-jquery-ajax-api-on-asp-net-mvc -3-0-power-of-json-jquery-and-asp-net-mvc-partial-views ), but this requires me to download the library using Nuget, which somehow doesn't work due to our corporate firewall.
Code for the parent view (index.cshtml) for all three parts
<div class="prepend-top span-24 last" id="searchPage">
<div class="span-24 last">
@Html.Partial("_Search")
</div>
<div class="span-24 last" id="parameterResults">
@Html.Partial("_ParameterParts")
</div>
<div class="span-24 last" id="searchSpecResults">
@Html.Partial("_Specifications")
</div>
</div>
Code for the first partial (_Search.cshtml):
// Post the object to the server using jQuery
$.ajax({
url: '@Url.Action("ParameterParts")',
type: 'POST',
dataType: 'html',
data: dataToPass,
error: function (data) { alert('Something Went Wrong'); },
contentType: 'application/json; charset=utf-8',
success: function (data) {
alert('Success P');
$("parameterResults").html(data);
}
});
This code correctly calls the ParameterParts method with the dataToPass parameter.
Here is the code I'm using for the controller method:
[HttpPost]
public ActionResult ParameterParts(CriteriaViewModel vm)
{
List<ParameterPart> parameterParts = new List<ParameterPart>();
//Some logic to populate parameterParts using the passed in object
return PartialView("_ParameterParts", parameterParts);
}
Code for the second partial:
@model IEnumerable<SmartPlex.Web.SmartPlex.ODataService.ParameterPart>
<table>
<tr>
<th>
Part Number
</th>
<th>
Description
</th>
</tr>
@if (Model != null)
{
foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.PartNumber)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
</tr>
}
}
</table>
I do not include the third partial as it is the same as the second. How can I update my partial files using the above method?
source to share
dataType: 'dataToPass',
data: json,
dataType is the data type that you expect from the server. Which shouldn't be json if you are returning html.
data is data that needs to be sent to the server.
Update:
You are missing #, your selector is incorrect. If your html:
<div class="span-24 last" id="parameterResults">
@Html.Partial("_ParameterParts")
</div>
your code should be like this:
$("#parameterResults").html(data);
source to share
you don't need a separate library to render the partial views as a string. create an extension method like this:
public static class RazorViewToString
{
public static string RenderRazorViewToString(this Controller controller, string viewName, object model)
{
if (controller==null)
{
throw new ArgumentNullException("controller", "Extension method called on a null controller");
}
if (controller.ControllerContext==null)
{
return string.Empty;
}
controller.ViewData.Model = model;
using (var sw = new StringWriter())
{
var viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);
viewResult.View.Render(viewContext, sw);
viewResult.ViewEngine.ReleaseView(controller.ControllerContext, viewResult.View);
return sw.GetStringBuilder().ToString();
}
}
}
then inside your controller you can use this like
return new JsonResult {Data = this.RenderRazorViewToString("partialViewName", model)};
then on jjery ajax client jquery callback just add the return data to your dom
http://craftycodeblog.com/2010/05/15/asp-net-mvc-render-partial-view-to-string/
source to share