Sweetie Sweetie - 7 months ago 42
Javascript Question

Loading Partial view in ajaxified way

I am trying to load a partialview using ajax method. Since I have tried it in past but I dont know
why this time it is not loading the content and data. I am wondering that where I am wrong.
How can I correct this? please help asap

This is my view having partial view in one of its div named "Add_Group".

@(Html.Kendo().Window()
.Name("AddEditGroupWindow")
.Title("Edit Group")
.Content(@<text><div id="Add_Group" style="display:none; width:100%;">
@Html.Partial("~/Areas/Admin/Views/UserGroups/_AddGroupPartial.cshtml");
</div> </text>)
.Visible(false).Width(1000).Height(300))


After I get data using post as below I am trying to load that patial view using
below:

$.post("/UserGroups/getGroupDetail", { "groupId": id }, function (response) {
$("#Add_Group").html(response.Data);
$("#AddEditGroupWindow").data("kendoWindow").open();
$("#Add_Group").show();
});


in controller it is like below:

public ActionResult GetGroupDetail(string groupId)
{
var data = string.Empty;
UserGroupRoleModel objmodel = new UserGroupRoleModel();
var groupEntity = this._userGroupServices.GetGroupDetail(Convert.ToInt32(groupId));
return this.Json(new { Data = groupEntity });
}

Answer

You are returning a json object by the post method, not html, hence when you call

$("#Add_Group").html(response.Data);

it display nothing, because Data is json not html

Your GetGroupDetail need to return html for it to show.

By the look of your code, I am assuming what you are returning from GetGroupDetail is the model for the partial view ( ~/Areas/Admin/Views/UserGroups/_AddGroupPartial.cshtml), change your GetGroupDetail to return partial view

public ActionResult GetGroupDetail(string groupId)
        {
            var data = string.Empty;
            UserGroupRoleModel objmodel = new UserGroupRoleModel();
            var groupEntity = this._userGroupServices.GetGroupDetail(Convert.ToInt32(groupId));
            return PartialView("~/Areas/Admin/Views/UserGroups/_AddGroupPartial.cshtml", roupEntity);
        }
Comments