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.