带有下拉菜单和服务器端验证的Ajax.BeginForm

Question

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

视图：

@Html.DropDownList("CheckIn_Location", ViewBag.CageLocationList as IEnumerable<SelectListItem>, "(Select one)", new { @class = "form-control" })

控制器：

    public void GetCageLocations()
    {        
        IEnumerable<SelectListItem> selectList =
        from c in db.Locations
        select new SelectListItem
        {
            Text = c.LocationName,
            Value = c.Id.ToString()
        };

        ViewBag.CageLocationList = selectList;
    }

但这似乎与服务器端验证并不友好，因此我尝试像这样重新制作模型/视图/控制器：

这是我的模特：

public class CheckInViewModel
{
    public int CheckIn_Id { get; set; }

    [Required(ErrorMessage = "Location Required.")]
    public IEnumerable<SelectListItem> CheckIn_Location { get; set; }

    [Required(ErrorMessage = "Quantity Required.")]
    [Range(1, 100, ErrorMessage = "Quantity must be between 1 and 100000")]
    public int CheckIn_Quantity { get; set; }

    public string CheckIn_Comment { get; set; }

}

这是我的控制器：

    [HttpPost]
    public ActionResult CheckIn(CheckInViewModel model)
    {
        if (ModelState.IsValid)
        {

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

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

            return PartialView("CheckIn", model);
        }

        return PartialView("CheckIn", model);

    }

这是我的PartialView，称为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>

这是触发提交的JS函数：

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

有人可以告诉我如何：

1. 使用模型作为绑定代理，使用（值/文本）填充下拉列表（而不是我之前做过的viewbag）
2. 将选定的选项返回给控制器，并将其插入到事务表的location元素（为int）中
3. 正确地将所有内容挂钩，以便服务器端批注起作用，并在表单中出现错误时返回消息。

提前致谢！

Answer 1

如果我对您的理解正确，那么可以采用多种方法。 例如，您可以在模型中具有两个属性来管理Dropdown控件。

1- CheckIn_Location_Selected。 存储用户选择的值

2-CheckIn_Location_List。 填写DropdownList。

这可能是您的模型。

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

因此，现在在您的GET动作中，您可能会遇到类似以下内容：

    [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")

我们需要稍微更改您的POST操作。

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