ASP.NET MVC：如何手动设置视图下拉列表中的选定项？

Question

我有一个包含许多记录的视图。每条记录都有一个相应的表单来编辑其详细信息，该表单在用户按下 Edit 之前是隐藏的，此时会显示该表单并可以使用 Ajax 发布以保存更改。

每条记录都有一个类别（另一个表的外键）。类别列表取自视图模型，它是一个 SelectList。因此，一个 SelectList of Categories 提供了许多表单（每条记录一个）

基本上，在我的记录列表中呈现的循环中，我希望编辑表单选择正确的类别。尽管 Html.DropDownList 似乎没有让您设置所选项目的重载 - 这必须在创建 SelectList 时完成 - 我只在我的 ViewModel 中这样做一次。

我错过了一个技巧吗？ 我的代码：

<div class="form-row">
            <label for="Category">
                File Category</label>
            <%= Html.DropDownList("CategoryID", Model.Categories, new { style="font-size:11px; width:150px;" })%>
        </div>

此时我想根据记录的值传入选中的项

谢谢，

编辑 包含更多代码，以便更有意义： 向视图提供数据的 ViewModel 部分：

public class CustomerFilesViewModel
{
    public List<CustomerFile> Files { get; set; }
    //added for the manage files area of the site
    public SelectList Organisations { get; set; }
    public int PDFS { get; set; }
    public int DOCS { get; set; }
    public int JPGS { get; set; }
    public double Quota { get; set; }
    public double TotalFiles { get; set; }
    public int SpreadSheets { get; set; }
    public SelectList Categories { get; set; }
...............

在我看来，然后我会遍历文件并为每个文件创建一个编辑表单。我使用 ViewModel 中的 SelectList 填充类别 DropDownnn。我希望能够使用file.CategoryID 在循环中设置所选项目。

Answer 1

如果您想使用value="5" 预先选择一个选项，则需要在呈现此视图的控制器中设置ViewData["CategoryID"] = "5";。当然，我不建议您使用ViewData。您应该改用视图模型：

var model = new SomeViewModel();
model.CategoryID = "5";
model.Categories = ...
return View(model);

然后：

<%= Html.DropDownListFor(
    x => x.CategoryID, 
    Model.Categories, 
    new { style="font-size:11px; width:150px;" }
)%>

---

更新：

为@Robert Koritnik 提供一个完整示例，他在 cmets 部分对此解决方案表示怀疑：

型号：

public class MyViewModel
{
    public string Id { get; set; }
    public IEnumerable<SelectListItem> Items { get; set; }
}

控制器：

public ActionResult Index()
{
    var model = new MyViewModel
    {
        // we want the second item preselected
        // so assign our view model property
        // which will be used to bind the dropdown list
        // to the id of the corresponding item in the options collection
        Id = "2",
        Items = new[]
        {
            new SelectListItem { Value = "1", Text = "item 1" },
            new SelectListItem { Value = "2", Text = "item 2" },
            new SelectListItem { Value = "3", Text = "item 3" },
        }
    };
    return View(model);
}

查看：

@Html.DropDownListFor(
    x => x.Id,
    new SelectList(Model.Items, "Value", "Text"),
    "-- Please select an item --"
)

正如预期的那样，第二个项目被预选了。

备注：Items 属性可以是任何自定义类型的 IEnumerable，只需要在视图中构建 SelectList 时指定相应的 Value 和 Text 属性即可。

Answer 2

客户端

您正在按需显示此编辑器，对吗？所以你说。因此，您已经在使用 Javascript 来显示此编辑器表单。为什么此时不选择正确的类别？您可以使用可用于选择正确类别的附加属性来呈现 编辑 链接或按钮。

<%= Html.ActionLink("edit", "action", "controller", new { categoryId = item.Id })  %>

我非常希望您只使用一个编辑器，并且每条记录一个，因为所有记录可能都相同。它们只是包含不同的数据。仅使用一个编辑器可以这样工作：

1. 用户点击编辑
2. 您将读取记录的数据并填充编辑器字段（同时选择正确的类别）
3. 显示编辑器

第二步可能很棘手。我通常将记录的数据作为 JSON 字符串放在包含元素的记录中（如果此记录中有很多操作，那么它们都可以使用相同的 JSON）

例子：

...
<tr data='<%= item.ToJson() %>'>
    <td><%= item.Name %></td>
    ...
    <td><%= Html.ActionLink("edit", "action", "controller", new { @class="edit-action" }) %>
</tr>
...

您可以在object 类型上编写自己的扩展方法ToJson，这将返回一个表示您的模型对象实例的字符串。

无论如何。动作链接应该具有正确的控制器和动作，您稍后将向其中发送编辑的数据。但主要的是您的 sclient 脚本会以这种方式工作：

$(".edit-action").click(function(evt){
    evt.preventDefault();
    var ctx = $(this);
    var itemData = $.parseJSON(ctx.closest("[data]").attr("data"));
    var editor = $("#YourEditorSelector");
    // populate editor's fields and then
    editor.show();
});

瞧。 为了这个编辑器，我使用jQuery.tmpl() 插件（jQuery 的正式一部分），所以填充表单要容易得多。实际上，当用户单击编辑时，您会根据需要创建它，并且它将被预先填充正确的数据（也将选择适当的下降）。

服务器端

您应该将视图中的类别转换为能够设置所选项目的SelectList。