C# 带有下拉菜单的Ajax.BeginForm+；服务器端验证

我正在尝试构建一个Ajax.BeginForm（有一个下拉列表），它使用服务器端验证来检查模型的注释。我很难让下拉菜单正常工作。最初，我使用viewbag填充下拉列表，如下所示：

视图：

这是我的部分视图，名为CheckIn.cshtml

@model ViewModels.CheckInViewModel

<!-- Modal -->
<div class="modal fade" id="CheckInModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h1 class="modal-title" id="CheckInModalLabel">Check In</h1>
            </div>
            <div class="modal-body">

            @using (Ajax.BeginForm("CheckIn", "Cage", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "success", OnFailure  = "failure"}, new { @id = "CheckInForm", @class = "form-horizontal" }))
            {

                @Html.ValidationSummary(true)

                @Html.HiddenFor(model => model.CheckIn_Id, new { @class = "form-control" })

                <div class="form-group">
                    <label for="CheckIn_Location" class="col-sm-4 control-label">Location</label>
                    <div class="col-sm-8">
                        @Html.DropDownListFor(x => x.CheckIn_Location, Model.CheckIn_Location, "Select One")
                        @Html.ValidationMessageFor(model => model.CheckIn_Location)
                    </div>
                </div>

                <div class="form-group">
                    <label for="CheckIn_Quantity" class="col-sm-4 control-label">Quantity</label>
                    <div class="col-sm-8">
                        @Html.TextBoxFor(model => model.CheckIn_Quantity, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.CheckIn_Quantity)
                    </div>
                </div>

                <div class="form-group">
                    <label for="CheckIn_Comment" class="col-sm-4 control-label">Comment</label>
                    <div class="col-sm-8">
                        @Html.TextAreaFor(model => model.CheckIn_Comment, new { @class = "form-control" })
                    </div>
                </div>
            }

        </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="SubmitCheckInForm()">Check In</button>
            </div>
        </div>
    </div>
</div>

有人能告诉我如何：

使用模型作为绑定代理（而不是我之前使用的viewbag），使用（值/文本）填充下拉列表

将所选选项返回给控制器，并将其插入事务表的location元素（是int）

正确地连接这一切，以便服务器端注释能够工作，并在表单中出现错误时返回消息

---

提前谢谢

如果我没弄错的话，有不止一种方法可以做到这一点。例如，模型中可以有两个属性来管理下拉控件

1-已选择签入位置。存储用户选择的值

2-签入位置列表。填写下拉列表

这可能是你的模型

public class CheckInViewModel
{
    [Required(ErrorMessage = "Location Required.")]
    public int CheckIn_Location_Selected { get; set; } 

    public IEnumerable<SelectListItem> CheckIn_Location_List { get; set; }

    //Rest of the properties...
}

在你看来：

@Html.DropDownListFor(x => x.CheckIn_Location_Selected, Model.CheckIn_Location_List, "Select One")

我们需要改变一下你的行动

[HttpPost]
    public ActionResult CheckIn(CheckInViewModel model)
    {
        if (!ModelState.IsValid)
        {
            // This is necessary because we are sending the model back to the view.
            // You could cache this info and do not take it from the DB again.
            model.CheckIn_Location_List = repository.GetCageLocations().Select(
                location => new SelectListItem
                {
                    Value = location.Id.ToString(),
                    Text = location.LocationName
                });

            return PartialView("CheckIn", model);
        }

        var New_Transaction = new Transaction
        {
            Id = model.CheckIn_Id,
            Quantity = model.CheckIn_Quantity,
            LocationId = Convert.ToInt32(model.CheckIn_Location_Selected),
            TransactionDate = DateTime.Now,
            TransactionComments = model.CheckIn_Comment.Replace("\r\n", " ")
        };

        unitOfWork.TransactionRepository.Insert(New_Transaction);
        unitOfWork.Save();

        return PartialView("CheckIn", model);
    }

@model ViewModels.CheckInViewModel

<!-- Modal -->
<div class="modal fade" id="CheckInModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h1 class="modal-title" id="CheckInModalLabel">Check In</h1>
            </div>
            <div class="modal-body">

            @using (Ajax.BeginForm("CheckIn", "Cage", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "success", OnFailure  = "failure"}, new { @id = "CheckInForm", @class = "form-horizontal" }))
            {

                @Html.ValidationSummary(true)

                @Html.HiddenFor(model => model.CheckIn_Id, new { @class = "form-control" })

                <div class="form-group">
                    <label for="CheckIn_Location" class="col-sm-4 control-label">Location</label>
                    <div class="col-sm-8">
                        @Html.DropDownListFor(x => x.CheckIn_Location, Model.CheckIn_Location, "Select One")
                        @Html.ValidationMessageFor(model => model.CheckIn_Location)
                    </div>
                </div>

                <div class="form-group">
                    <label for="CheckIn_Quantity" class="col-sm-4 control-label">Quantity</label>
                    <div class="col-sm-8">
                        @Html.TextBoxFor(model => model.CheckIn_Quantity, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.CheckIn_Quantity)
                    </div>
                </div>

                <div class="form-group">
                    <label for="CheckIn_Comment" class="col-sm-4 control-label">Comment</label>
                    <div class="col-sm-8">
                        @Html.TextAreaFor(model => model.CheckIn_Comment, new { @class = "form-control" })
                    </div>
                </div>
            }

        </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="SubmitCheckInForm()">Check In</button>
            </div>
        </div>
    </div>
</div>

    function SubmitCheckInForm() {
            $('#CheckInForm').submit();
        }

public class CheckInViewModel
{
    [Required(ErrorMessage = "Location Required.")]
    public int CheckIn_Location_Selected { get; set; } 

    public IEnumerable<SelectListItem> CheckIn_Location_List { get; set; }

    //Rest of the properties...
}

    [HttpGet]
    public ActionResult CheckIn()
    {
        var model = new CheckInViewModel
        {
            CheckIn_Location_List = repository.GetCageLocations().Select(
                location => new SelectListItem
                {
                    Value = location.Id.ToString(),
                    Text = location.LocationName
                })
        };

        return View(model);
    }

@Html.DropDownListFor(x => x.CheckIn_Location_Selected, Model.CheckIn_Location_List, "Select One")

[HttpPost]
    public ActionResult CheckIn(CheckInViewModel model)
    {
        if (!ModelState.IsValid)
        {
            // This is necessary because we are sending the model back to the view.
            // You could cache this info and do not take it from the DB again.
            model.CheckIn_Location_List = repository.GetCageLocations().Select(
                location => new SelectListItem
                {
                    Value = location.Id.ToString(),
                    Text = location.LocationName
                });

            return PartialView("CheckIn", model);
        }

        var New_Transaction = new Transaction
        {
            Id = model.CheckIn_Id,
            Quantity = model.CheckIn_Quantity,
            LocationId = Convert.ToInt32(model.CheckIn_Location_Selected),
            TransactionDate = DateTime.Now,
            TransactionComments = model.CheckIn_Comment.Replace("\r\n", " ")
        };

        unitOfWork.TransactionRepository.Insert(New_Transaction);
        unitOfWork.Save();

        return PartialView("CheckIn", model);
    }