根据下拉菜单更新显示

Question

作为表单的一部分，我需要从下拉列表中显示有关某个对象的一些数据。使用该字段的用户正在将学生分配到 class 的一个部分，并且需要查看 class 中 open/filled 个席位的当前数量。

目前，我正在像这样构建我的 class drowndown：

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

之后我想要一个 div 来列出可用性，例如：

Open Slots: @someVariable
Filled Slots: @someOtherVariable

此信息是我的 Sections 模型的一部分，属于此页面的 VM。那些看起来像：

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 特别陌生，这种事情不应该像看起来那么难。

Answer 1

一种方法是使用 jQuery 如果您愿意 that.You 然后可以使 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）中为 return 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);
    }

尚未测试代码，但这应该可以解决问题。如果它不起作用，请检查浏览器中的控制台。

根据下拉菜单更新显示

Updating Display based on dropdown

c#

.net-core

asp.net-core-mvc

razor-pages