将下拉列表的值作为路由值传递给 Ajax 窗体

Question

我正在开发一个 ASP.NET 的MVC4应用程序，我的一个视图中有以下内容：

@using (Ajax.BeginForm("GetAllOrangeChocs", "ChocFactory", new { area = "Provider", Id = Model.FruitId }, new AjaxOptions { HttpMethod = "post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "ChocFruitWrap" }, null))
{
    <div class="form-horizontal" role="form">
        <div class="form-group">
            <span class="col-md-2 control-label"><strong>Fruit Group:</strong></span>
            <div class="col-md-3">
                @Html.DropDownListFor(m => m.FruitlId, new SelectList(Model.ListOf_Fruits,"Id", "PortalDisplayName"),"--Please Select--")
            </div>
            <div class="btn-group col-md-1">
                 <button type="submit" class="btn btn-primary btn-sm">Submit</button>
            </div>
        </div>
    </div> 
}

因此，它是一个 Ajax 窗体，它调用一些控制器操作，该操作返回要在页面上显示的 PartView。控制器代码为：

public PartialViewResult GetAllOrangeChocs(int Id)
{
    var model = _service.GetMeSomethingUsefulWithPassedParam(Id);
    return PartialView("_Categories", model);
}

我的控制器动作被击中了，但 Id 总是null，我的猜测是，这是因为没有双向绑定！当视图模型在GET请求中传递时，视图模型上的FruitId是null的，并且它实际上只在POST中设置

我的推理是对的吗？如果是的话...如何轻松地在下拉列表中传递所选项目的值（Id）？

我知道我可以添加一个隐藏字段，并通过 jQuery 在每次下拉列表更改时填充它，但没有更干净的方法吗？

Answer 1

从链接中你有一个ajax调用

$.ajax({
    type: "POST",
    url: '@Url.Action("GetAllOrangeChocs", "ChocFactory")',
    data: {
        Selected: $('#FruitlId').val()
    }
    success: function (result) {
         $('.divContent').html(result);
    }
});

通过数据属性，您可以发送任何您想要的内容。 我在这里的内容会将所选值放入一个名为 Selector 的变量中（确保您在视图上调用它的任何内容都与控制器上的输入参数完全匹配）。 如果您有任何问题，请告诉我。