Hi Rockstar8,
Use PartialView to display the SubDetails.
Check this example. Now please take its reference and correct your code.
Model
public class DetailModel
{
public List<Detail> Details { get; set; }
public List<SubDetail> SubDetails { get; set; }
}
public class Detail
{
public int DID { get; set; }
public string ScentName { get; set; }
}
public class SubDetail
{
public int SDID { get; set; }
public string SubScentName { get; set; }
public int DID { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
DetailModel model = new DetailModel();
model.Details = GetDetails();
return View(model);
}
[HttpPost]
public ActionResult AjaxMethod(int dID)
{
List<SubDetail> subDetails = GetSubDetails().Where(x => x.DID == dID).ToList();
DetailModel model = new DetailModel();
model.SubDetails = subDetails;
return PartialView("SubDetails", model);
}
public List<Detail> GetDetails()
{
List<Detail> details = new List<Detail>();
details.Add(new Detail { DID = 1, ScentName = "Scent 1" });
details.Add(new Detail { DID = 2, ScentName = "Scent 2" });
details.Add(new Detail { DID = 3, ScentName = "Scent 3" });
details.Add(new Detail { DID = 4, ScentName = "Scent 4" });
return details;
}
public List<SubDetail> GetSubDetails()
{
List<SubDetail> subDetails = new List<SubDetail>();
subDetails.Add(new SubDetail { SDID = 1, SubScentName = "Sub Scent 1", DID = 2 });
subDetails.Add(new SubDetail { SDID = 2, SubScentName = "Sub Scent 2", DID = 3 });
subDetails.Add(new SubDetail { SDID = 3, SubScentName = "Sub Scent 3", DID = 4 });
subDetails.Add(new SubDetail { SDID = 4, SubScentName = "Sub Scent 4", DID = 2 });
subDetails.Add(new SubDetail { SDID = 5, SubScentName = "Sub Scent 5", DID = 2 });
subDetails.Add(new SubDetail { SDID = 6, SubScentName = "Sub Scent 6", DID = 3 });
subDetails.Add(new SubDetail { SDID = 7, SubScentName = "Sub Scent 7", DID = 4 });
subDetails.Add(new SubDetail { SDID = 8, SubScentName = "Sub Scent 8", DID = 4 });
return subDetails;
}
}
View
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<_List_Another_List_Based_MVC.Models.DetailModel>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Index</title>
</head>
<body>
<div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").on('click', function () {
var id = $(this).find("#hdnID").val();
$.ajax({
type: "POST",
url: "/Home/AjaxMethod",
data: { dID: id },
contentType: "application/json; charset=utf-8",
//dataType: "json",
success: function (response) {
$('#dvSubDetails').show();
$("#dvSubDetails").html(response);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
<ul>
<%foreach (var det in Model.Details)
{%>
<li>
<%:Html.Hidden("hdnID", det.DID) %>
<p><%=det.ScentName %></p>
</li>
<%} %>
</ul>
<hr />
<div id="dvSubDetails" style="display: none;">
</div>
</div>
</body>
</html>
PartialView
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<_List_Another_List_Based_MVC.Models.DetailModel>" %>
<ul>
<% foreach (var sdet in Model.SubDetails)
{ %>
<li>
<%:Html.Hidden("hdnSID", sdet.SDID)%>
<p><%: sdet.SubScentName%></p>
</li>
<% } %>
</ul>
Screenshot
For more details on partial view refer below article.
