I need to return multiple (two) partial views as an ActionResult from the controller. The first view contains general form elements and the second view contains the igGrid. Since I need to return multiple partialviews, I was able to create a controller action that returned a JSON object containing the rendering for my two partial views. I also developed a helper method that render each partial view into a string (which is returned in the JSON object).
The problem is that while my first view is getting rendered just fine and the view containing the grid is not rendering. Any ideas how can I accomplish this?
Here's the helper method:
public static string RenderPartialView(ViewDataDictionary viewData, ControllerContext context, TempDataDictionary tempData, string viewName, object model) { viewData.Model = model;
using (System.IO.StringWriter writer = new System.IO.StringWriter()) { ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(context, viewName); ViewContext viewContext = new ViewContext(context, viewResult.View, viewData, tempData, writer); viewResult.View.Render(viewContext, writer);
return writer.GetStringBuilder().ToString(); } }
Here's the code grid defination:
@(Html.Infragistics() .Grid(Model.MessageQueueRows) .ID("grid") .Width("100%") .PrimaryKey("MessageQId") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) .Columns(column => { column.For(x => x.LastName).HeaderText("Last Name").Width("200"); column.For(x => x.FirstName).HeaderText("First Name").Width("200"); column.For(x => x.CallPhone).HeaderText("Phone").Width("200"); column.For(x => x.TextPhone).HeaderText("Text Phone #").Width("200"); column.For(x => x.PersonId).HeaderText("ID").Width("200"); column.For(x => x.Group).HeaderText("Group").Width("200"); column.For(x => x.Subgroup).HeaderText("Subgroup").Width("200"); column.For(x => x.Sent).HeaderText("Sent Date").Width("200"); })
.Features(features => { features.Sorting().Mode(SortingMode.Single).Type(OpType.Local).ApplyColumnCss(false).ColumnSettings(cs => { cs.ColumnSetting().ColumnKey(Model.ColumnKey).AllowSorting(true).CurrentSortDirection(Model.Direction); }); features.Paging().Type(OpType.Local).PageSize(Model.PgSize).CurrentPageIndex(Model.PageIndex); features.Resizing(); })
.DataSource(Model.MessageQueueRows) .DataBind() .Render() )
Hello voicemetrix,
Thank you for the additional information.
The issue with this approach is that any function passed as part of the json will not be executed on the client-side.
You can test this by setting for example a simple alert on your view with the general form elements – you’ll see that this alert message will never be displayed when the content is rendered.
Since the Grid’s MVC wrappers render client-side jQuery initialization code, which won’t be executed in this case, the grid will not be displayed.
I suggest you use jQuery’s html method when rendering the content, which allows any function in the content to be executed.
I’ve attached a modified sample for your reference. Let me know if you have any questions or concerns regarding this.
Best Regards,
Maya Kirova
Infragistics, Inc.
http://es.infragistics.com/support
Maya - I should have added more details. Basically the top view has a SEARCH button. On this button click, a Javascript function is called which makes a call to controller method. It is from this method, I want to return the JSON Resultset containing the HTML for the two views (top and bottom view - bottom view has the grid; And correct, I do need to re-render the top view at times.). The resultset is returned to the calling Javascript function. Upon Ajax success call, JS method renders the HTML received from the JSON response.
The resultset returned from controller method:
return Json(new { div1 = "PartialViewFilter", html1 = Utilities.RenderPartialView(ViewData, ControllerContext, TempData, "_QueueFilter", messageQueueFilterViewModel), div2 = "PartialViewGrid", html2 = Utilities.RenderPartialView(ViewData, ControllerContext, TempData, "_MessageLog", messageQueueViewModel) });
AJAX post JS Code
$.ajax({ type: "POST", url: baseURLFilterResults, data: formData, contentType: false, processData: false, dataType: 'html', success: function (response) {
var oJSON = JSON.parse(response);
var oDiv1 = document.getElementById(oJSON.div1); oDiv1.hidden = false; oDiv1.innerHTML = oJSON.html1;
var oDiv2 = document.getElementById(oJSON.div2); if (oDiv2 != null) { oDiv2.hidden = false; oDiv2.innerHTML = oJSON.html2;}
}
Hello voicemetrix ,
Thank you for posting in our forum.
In what manner do you render the data from the JSON?
In general you could directly return an MvcHtmlString from your action which can be directly rendered on the view.
I’ve attached a sample with a similar setup for your reference. Let me know if you’re aiming to achieve something similar.