Ajax Json and partial view rendering in MVC4

lakshmi sowmya

12y6.9kLearn iOS Programming

This post is on Ajax-JSON in mvc4

In our application we have to display category and subcategories on Expand image button click.

following is the code which we followed......we used partial view for subcategories.

Partial View

---------------------------------------------------------------

@model IEnumerable

}

@foreach (var item in Model)

{

}

@item.SubCategoryName

@item.SubCategoryCode

View.cshtml

-------------------------------------------------------------------------------

@if (ViewBag.model != null)

{

foreach (System.Data.DataRow dr in ViewBag.model.Rows)

{

}

name="@Html.Encode(dr["Category_Id"])" onclick="getSubCategories(@Html.Encode(dr["Category_Id"]));"/>	@Html.Encode(dr["Category_Name"])	@Html.Encode(dr["Category_Code"])

@section Pagescripts

{

@Scripts.Render("~/bundles/jquery")

}

Cotroller

-----------------------------------------------------------------------------------------------

public ActionResult _partialSubCategory(string Category)

{

int CategoryId = Convert.ToInt16(Category);

List subCatList = (from objSub in objbidportalEntity.bp_subcategory where objSub.categoryId == CategoryId

select new subcategory { CategoryId = (short)objSub.categoryId, SubCategoryCode = objSub.Subcategory_Code, SubCategoryDescription

= objSub.Description, SubCategoryId = objSub.Subcategory_Id, SubCategoryName = objSub.Subcategory_Name }).ToList();

return PartialView("_partialSubCategory", subCatList);

}

Model

---------------------------------------------------------------------------------------------------

public class VendorRegistrationStep3

{

public int VendorId { get; set; }

public int CategoryId { get; set; }

public string CategoryCode { get; set; }

public string CategoryDescription { get; set; }

public string CategoryName { get; set; }

public IEnumerable SubCategoryId { get; set; }

}

public class subcategory

{

public short CategoryId { get; set; }

public int SubCategoryId { get; set; }

public string SubCategoryCode { get; set; }

public string SubCategoryDescription { get; set; }

public string SubCategoryName { get; set; }

}

--------------------------------------------------------------------------------------------------------------------------------------------------------------

The problem is we are not able to get onsuccess json data .we are getting OnError function.Unable to find where we went wrong.Please help us.

13 Replies

Know the answer? Post it — somebody with the same question will find it here.

Prabhu Raja12y ago
Accepted answer
without source code, resolving these kind of issues is very difficult. Please find the attachment for a small example.

Source Code
Prabhu Raja12y ago
Sounds good. Keep up the good work.
lakshmi sowmya12y ago
Hi Prabhu,
Thank u so much i have downloaded the source code and compared with mine.The difference was i wrote @Using(Html.BeginForm("Action","Controller") in the main view.cshtml.So after ajax call post back was happening to that action and main view is remaining same.
I removed it and now its working.
I am literally new to MVC so cant figure out this silly thing.Thanq once again.
lakshmi sowmya12y ago
Hi Prabhu and Jagan,
I have changed Category_code to Category_Id much before after my first post.Then only my Url got hitted in Json.

But now the problem is partial view is not displaying inside the div

I have tried $("#AjaxDiv").empty().append(data);After doing so i was able to see partial view blinked once in main view.But later its not coming....Its been a quite challenging issue for me.
you will be going to make my day.if you pull me out of this
Prabhu Raja12y ago
I found something very interesting in the code. You are using different collections to give name to the div element.

See,
name="@Html.Encode(dr["Category_Id"])" onclick="getSubCategories(@Html.Encode(dr["Category_Id"]));"/>

@Html.Encode(dr["Category_Name"])

@Html.Encode(dr["Category_Code"])

Category_Code"])" class="ajaxDiv">

You are creating div with id as Category_Code but you are passing Category_Id to javascript function.

Change

onclick="getSubCategories(@Html.Encode(dr["Category_Id"]))

to

onclick="getSubCategories(@Html.Encode(dr["Category_Code"]))

And Try once.
lakshmi sowmya12y ago
Hi,
I have changed @Url and ActionResult to PartialViewResult.
Even though my ajax div is getting loaded with the html.

When I debugged i can see data returned from ajax call but the view is not getting updated with partial view.

Unable to figure out where i went wrong.
Jaganathan Bantheswaran12y ago
I dont understand this.

Did your view got updated after changing the url to

url: @Url.Action("_partialSubCategory","VendorRegistration")?
Prabhu Raja12y ago
Can you change the return data type from ActionResult to PartialViewResult and try one.

public ActionResult _partialSubCategory(string Category)
{

to

public PartialViewResult _partialSubCategory(string Category)
{

If its not worked, let me know then i try to find some working examples.
lakshmi sowmya12y ago
Hi,
Thanks Prabhu, I tried your solutions too.but its not working.
Its hitting the controller [HttpPost] action method of main view and returning the same old main view without any partial view.I am sending the image of what i am expecting the view should be.
Please suggest me any other solution if the way i am trying to make out is wrong.Help me out.
Prabhu Raja12y ago
Why you nesting the SetData function inside of getSubCategories function. Place the SetData function outside and try again.

And if you want to load the partial view into the div element, then why you can simplify the code as like,

function getSubCategories(Category) {
var url = '/VendorRegistration/_partialSubCategory?Category=' + Category;
var divId = "#" + Category;
var ajaxdiv = $(divId);
$(ajaxdiv).load(url);
}

This is not tested. But you can try like this.
lakshmi sowmya12y ago
Hi,
I have changed my ajax as below.now its working .I am able to receive the html data with values of partial view.But the problem now is $(#div),html(data)
is not getting binded with the view.

function getSubCategories(Category) {

var url = '/VendorRegistration/_partialSubCategory?Category=' + Category;
$.ajax({
url: url,
type: 'POST',
contentType: 'application/json; charset=utf-8',
dataType: 'html',

success: function (data,textStatus, XMLHttpRequest) {
SetData(data);
},
error: function (data) { alert("error"); alert(data); }

});

function SetData(data) {

var divId = "#" + Category;
var ajaxdiv = $(divId);
$(ajaxdiv).load(data);
$(ajaxdiv).innerHTML=data;

}
return false;
}

I tried so many ways div.load,div.innerhtml........etc., but the html data is not getting binded.please do reply me.
Prabhu Raja12y ago
Try jaganathan solution.

And Please don't hardcode the URL in the ajax method. The Best Practise is,

url: '@Url.Action("_partialSubCategory","VendorRegistration"),

Sometimes it resolves the problem.
Jaganathan Bantheswaran12y ago
Hi,

Try to replace the ajax call as like this,

$.ajax({
url: 'http://localhost/VendorRegistration/_partialSubCategory',
type: 'POST',
data: JSON.stringify({Category: Category}),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
error: function (xhr) {
alert('Error: ' + xhr.statusText);
},
success: function (result) {
setData(result);
},
async: false,
processData: false
});