Question

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

目前，我正在构建我的类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，如果你对它开放。然后你可以让jQuery AJAX函数根据Section by ID创建一个新的Div。因此，对代码的更改如下：

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

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

根据下拉列表

1 个答案: