Отображение блока и этажа и комнаты на одной странице с помощью asp.net mvc

Question

Я новичок в asp.net MVC У меня есть таблица tblBlock, tblFloor, tblRoom в моей базе данных.Я хочу отобразить все это на одной странице, например, когда я нажимаю номер блока, он должен показывать список этажей, а когда я нажимаю номер этажа, он должен показывать количество комнат.как это сделать на одной странице в asp.net MVC.

Это мой код просмотра

    function GetFloors() {

        $("#tblFloor tbody tr").remove();
        console.log("Hello Javascript");
            $.ajax({
                type: "GET",
                //url: "/RoomBooking/GetFloors",
                url: '@Url.Action("GetFloors","RoomBooking")',
                dataType: "json",
                //cache: false,
                async: "false",
                contenttype:"charset=utf-8",
                success: function (data) {

                    $.each(data, function (i, item) {
                        var rows = ""
                        + ""
                                  + ' tblFloor  ' + item.Floor_No + ""

                        + "";
                        $('#tblFloor tbody').append(rows);

                    });
                },


            });
            //Prevent default behavior
            return false;
        }

Это мой контроллер

    [HttpGet]
    public JsonResult GetFloors()
    {
        List<tblFloor> floors = new List<tblFloor>();

        floors = BlockRepsitory.GetFloors(1).ToList();

         return Json(floors, JsonRequestBehavior.AllowGet);
    }

Answer 1

Наконец, я получил решение этой проблемы, ниже приведен код для этого решения:

 <script>
        $(document).ready(function () {
            loadData();
        });

    function loadData() {

            $.ajax({
                url: "/PeopleBooking/Blocklist",

                type: "GET",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var html = '';
                    $.each(result, function (key, item) {
                        html += '<div class="col-md-3 col-lg-3 col-xl-2 "><a href="#"onclick="return getbyID(' + item.Block_id + ')"><section class="panel panel-featured-left panel-featured-primary "><div class="panel-body zoom"><div class="widget-summary"><div class="widget-summary-col widget-summary-col-icon"><div class="summary-icon bg-white"><img src="/assets/images/RoomImg/block.png" width = "150" height = "150" class="img-circle img-responsive"/></div></div><div class="widget-summary-col"><div class="summary"><h4 class="title">' + item.Block_name + '</h4><div class="info"><strong class="amount">' + item.Block_No + '</strong></div></div></div></div></div></div></section></a></div>';
                    });
                    $('#yes').html(html);
                },
                error: function (errormessage) {
                    alert(errormessage.responseText);
                }
            });
        }
</script>