Display List based on another list Click using jQuery Ajax in ASP.Net MVC

Last Reply one month ago By dharmendr

Posted one month ago

I have a design that has a list, this list is populated from database like below

<ul>
    @foreach (var det in Model.Details)
    {
        <li>
            @Html.Hidden("hdnID", det.DID)
            <p>@det.ScentName</p>
        </li>
    }
</ul>

Now my Scent names are displayed now if I select one of my list again a set of list should be displayed sending the DID to database and display the div block

Mostly I trying from Razor elements and eliminating the Jquery maximum to get the details

<ul>
    @foreach (var sdet in Model.SubDetails)
    {
        <li>
            @Html.Hidden("hdnSID", det.SDID)
            <p>@det.SubScentName</p>
        </li>

     }
</ul>
Posted one month ago

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.

Render Partial View inside jQuery Dialog Modal Popup on Top of Parent View in ASP.Net MVC