C# 基于下拉菜单更新显示

作为表单的一部分，我需要从下拉列表中显示一些关于对象的数据。使用该字段的用户正在将一名学生分配到班级的某个部分，并且需要查看班级中当前的开放/已满座位数

目前，我正在像这样建设我的班级：

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

稍后，我希望有一个div，列出可用性，如：

Open Slots: @someVariable
Filled Slots: @someOtherVariable

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

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;}
}

公共类ApproveStudentViewModel
{
公共字符串FriendlyName{get；set；}
公共列表可用性选项{get；set；}
公共Guid用户标识{get；set；}
}
公共课组
{
公共Guid Id{get；set；}
公共字符串名称{get；set；}
公共int空间保留{get；set；}
公共int SpacesTaken{get；set；}
}

---

我有一个控制器调用，可以通过Id获取分区，但这是我在解决这个问题时所做的。我对使用MVC和Razor特别陌生，这类事情应该不像看上去那么难

一种方法是，如果您愿意，可以使用jQuery。然后，您可以让jQuery AJAX函数基于Section by ID创建一个新的Div。因此，对代码的更改如下所示：

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

@Html.DropDownList（“sectionsavaailable”，新选择列表（Model.AvailableSections，“Id”，“Name”））

在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");
        }
    });
});

$（“#SectionsAvailable”）。更改（函数（）{
$.ajax({
键入：“获取”，
contentType:“应用程序/json”，
数据类型：“json”，
url:“@url.Content（“~/”）”+“{ControllerName/GetSpaceInfo”，
数据：{sectionID:$（“#SectionsAvailable”）.val（）}，//从下拉列表中获取的节的id
成功：功能（数据）{
var项目=“”；
$。每个（数据、函数（i、行）{
项目+=“打开的插槽：”+row.SpacesRemaining+“填充的插槽：”+row.SpacesTaken+”；
//在浏览器控制台中进行测试的步骤
console.log（row.SpacesTaken）；
console.log（row.SpacesRemaining）；
});
$（“#插槽信息”）.html（项目）；
},
错误：函数（）{
警报（“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);
    }

//返回基于节的可用空间列表
[HttpGet]
公共操作结果GetSpaceInfo（int sectionID）
{
List sect=新列表（）；
//应该只向JSON列表返回1项
sect=_context.Sections.Where（m=>m.Id==sectionID.ToList（）；
返回Json（sect）；
}

---

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

它不会在更改下拉列表时发出任何请求。没有网络活动，也不会影响控制器。我的ajax调用中有一个相当愚蠢的输入错误。已修复，它正在正确调用所有内容。谢谢