Question

我目前在MVC的网站上工作，每次在DropDownList中选择一个值时，我都会使用DropDownListFor创建一个局部视图。它转到HttpPost并将值添加到List。我还有一个绑定到此列表的ListBoxFor。

我想要实现的目标：

每次使用DropDownList将新值添加到List时，它应自动更新ListBoxFor，以便将选定的值添加到此Listbox中。我想知道实现这一目标的最佳方法是什么。

代码：

Submit.cshtml：

<div class="create-ingredient">
     @Html.Partial("_CreateIngredient")
</div>
<br/>
<div class="add-ingredient">
     @Html.Partial("_AddIngredient")
</div>
<br/>
<div class="ingredient-listbox">
     @Html.LabelFor(model => model.Ingredients,"Current Ingredients")
     @Html.ListBoxFor(model => model.Ingredients, new MultiSelectList(Model.SelectedIngredients), new { style = "width:50%;" })
</div>

_AddIngredient.cshtml（部分视图）：

@model Recepten.Models.IngredientSelectModel

@using (Ajax.BeginForm("AddIngredient", "Recipe", new AjaxOptions() { UpdateTargetId = "add-ingredient", HttpMethod = "Post" }))
{
    @Html.LabelFor(model => model.Ingredients, "Add Ingredient")
    @Html.DropDownListFor(model => model.SelectedIngredient, Model.Ingredients, "Select Ingredient", new { @onchange = "$(this).parents('form').submit();" })
}

AddIngredient：

[HttpPost]
public ActionResult AddIngredient(IngredientSelectModel ing)
{
    ing.SelectedIngredients.Add(ing.SelectedIngredient);
    return PartialView(ing);
}

IngredientSelectModel：

public RecipeModel Recipe { get; set; }
public IEnumerable<SelectListItem> Ingredients { get; set; }
public int SelectedIngredient { get; set; }

public string addIngredient { get; set; }

public List<int> SelectedIngredients { get; set; }

public IngredientSelectModel()
{
    SelectedIngredients = new List<int>();
}

感谢您的时间！

Answer 1

正如我认为您已经想到的那样，当前方法不起作用的原因是由IngredientSelectModel操作创建并更新的AddIngredient与使用的方法不同填充ListBox。

如果Ajax和不显眼的JQuery设置正确（浏览器URL在选择配料时不应该改变），@ pinhead的答案会将所选值发送给操作，但是{{1} }不会累积您选择的值，因为它的值不包含在ajax数据中。为此，您需要将多选项更改为SelectedIngredients：

SelectedIngredients

...并在表单声明中移动它，以便将其值与要添加的新成分一起发布到操作中。

那就是说，我不会说你做了足够的工作来证明往返服务器的合理性，所以在完成上述改变后你可以完全在客户端添加这样的成分，就像这样：

@Html.ListBoxFor(
    model => model.SelectedIngredients,
    new MultiSelectList(Model.SelectedIngredients),
    new { style = "width:50%;" })

Answer 2

我相信一个解决方案是将ListBoxFor帮助器移动到局部视图中，以便在操作返回局部视图后更新并重新创建。

Submit.cshtml：

<div class="create-ingredient">
     @Html.Partial("_CreateIngredient")
</div>
<br/>
<div class="add-ingredient">
     @Html.Partial("_AddIngredient")
</div>

_AddIngredient.cshtml（部分视图）：

@model Recepten.Models.IngredientSelectModel

@using (Ajax.BeginForm("AddIngredient", "Recipe", new AjaxOptions() { UpdateTargetId = "add-ingredient", HttpMethod = "Post" }))
{
    @Html.LabelFor(model => model.Ingredients, "Add Ingredient")
    @Html.DropDownListFor(model => model.SelectedIngredient, Model.Ingredients, "Select Ingredient", new { @onchange = "$(this).parents('form').submit();" })
}
@Html.LabelFor(model => model.Ingredients,"Current Ingredients")
@Html.ListBoxFor(model => model.Ingredients, new MultiSelectList(Model.SelectedIngredients), new { style = "width:50%;" })

MVC使用DropDownListFor中的选定值更新ListboxFor

2 个答案: