Ajax Json and partial view rendering in MVC4

Question

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<AT.Site.BidPortal.Models.subcategory>

@{

}

<table>

@foreach (var item in Model)

{

<tr>

<td><label id="lblSubCategory" style="width:200px">@item.SubCategoryName</label></td>

<td><label id="lblCode" style="width:200px;">@item.SubCategoryCode</label></td>

<td><input type="checkbox" id="chkChild"+ @item.SubCategoryId /></td>

</tr>

}

</table>

View.cshtml

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

<div id="repeater" style="height: 150px; overflow: auto;">

<table width="850">

@if (ViewBag.model != null)

{

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

{

<tr>

<td style="width: 50px">

<input type="image" src="../../Images/Expander.png"

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

</td>

<td style="width: 350px">

<label>@Html.Encode(dr["Category_Name"])</label>

</td>

<td style="width: 100px" >

<label>@Html.Encode(dr["Category_Code"])</label>

</td>

<td style="width: 50px" >

<input type="checkbox" name="chkSelectAll" id="chkSelectAll" />

</td>

</tr>

<tr>

<td>

<div id="@Html.Encode(dr["Category_Code"])" class="ajaxDiv">

</div>

</td>

</tr>

}

}

</table>

@section Pagescripts

{

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

<script language="javascript" type="text/javascript">

function getSubCategories(Category) {

var url = 'http://localhost/VendorRegistration/_partialSubCategory?Category='+ Category;

$.ajax({

url: url,

type: "POST",

contentType: 'application/json; charset=utf-8',

async: false,

processdata: false,

cache : false,

dataType: "json",

success: function (data) {

SetData(data);

},

error: function (data) { alert("error"); alert(data); }

});

function SetData(data) {

if (ajaxdiv.attr('id') == Category) {

$(".ajaxDiv").html(data);

}

}

}

</script>

}

Cotroller

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

public ActionResult _partialSubCategory(string Category)

{

int CategoryId = Convert.ToInt16(Category);

List<subcategory> 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<subcategory>();

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<subcategory> 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.