Обновление дисплея на основе раскрывающегося списка - PullRequest
Новая
       29

Обновление дисплея на основе раскрывающегося списка

0 голосов
/ 30 апреля 2018

Как часть формы, мне нужно отобразить некоторые данные об объекте из выпадающего списка. Пользователь, использующий это поле, назначает учащегося в секцию класса, и ему необходимо увидеть текущее количество открытых / заполненных мест в классе.

В настоящее время я строю свой классовый спад, как это: 

@Html.DropDownList("Sections Available", new SelectList(Model.AvailableSections, "Id", "Name"))

и позже я хочу иметь div, который перечисляет доступность как: 

Open Slots: @someVariable
Filled Slots: @someOtherVariable

Эта информация является частью моей модели разделов, которая принадлежит виртуальной машине для этой страницы. Те выглядят как: 

public class ApproveStudentViewModel
{
    public string FriendlyName { get; set; }
    public List<Section> AvailableSections { get; set; }
    public Guid UserId { get; set; }
}


public class Section
{
    public Guid Id {get; set; }
    public string Name {get; set; }
    public int SpacesRemaining {get; set;}
    public int SpacesTaken {get; set;}
}

У меня есть вызов контроллера, чтобы получить раздел по Id, но это все, что я понял, выяснив это. Я очень новичок в использовании MVC и Razor в частности, и такого рода вещи не должны быть такими сложными, как кажется.

1 Ответ

0 голосов
/ 30 апреля 2018

Один из способов сделать это - использовать jQuery, если вы открыты для этого. Затем вы можете заставить функцию jQuery AJAX создавать новый Div на основе ID раздела. Таким образом, изменения в вашем коде будут следующими: 

@Html.DropDownList("SectionsAvailable", new SelectList(Model.AvailableSections, "Id", "Name"))
<div id="slot-information"></div>

В конце вашей страницы Razor вам нужно убедиться, что вы ссылаетесь на jQuery 

<script src="~/lib/jquery/dist/jquery.js"></script>

Теперь вы можете создать вызов AJAX для вашей функции контроллера и отправить sectionID в качестве параметра: 

<script>

$("#SectionsAvailable").change(function () {
    $.ajax({
        type: "GET",
        contentType: "application/json",
        dataType: "json",
        url: '@Url.Content("~/")' + "{ControllerName/GetSpaceInfo",
        data: { sectionID: $("#SectionsAvailable").val() }, //id of the section taken from the dropdown
        success: function (data) {
            var items = '';

            $.each(data, function (i, row) {
                items += "<label> Open Slots: " + row.SpacesRemaining +  "</label> <label> Filled Slots: " + row.SpacesTaken +  "</label> ";
                //To test in your browser console
                console.log(row.SpacesTaken);
                console.log(row.SpacesRemaining);

            });
            $("#slot-information").html(items);

        },
        error: function () {
            alert("oops");
        }
    });
});

Наконец, в вашем контроллере (возможно, SectionsController) создайте следующую функцию для возврата объекта JSON. 

        // returns a list of space available based on section 
    [HttpGet]
    public ActionResult GetSpaceInfo(int sectionID)
    {
        List<Section> sect = new List<SSection>();
        //Should only return 1 item to the JSON list
        sect = _context.Sections.Where(m => m.Id == sectionID).ToList();
        return Json(sect);
    }

Не проверял код, но это должно сработать. Если он не работает, проверьте консоль в вашем браузере.

...