MVC 使用从 DropDownListFor 中选择的值更新 ListboxFor

Question

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

我想要达到的目标：

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

代码：

提交.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();" })
}

添加成分：

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

成分选择模型：

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

我认为您已经想到，当前方法不起作用的原因是为 AddIngredient 操作创建和更新的 IngredientSelectModel 与用于填充 ListBox 的操作是分开的。

如果正确设置了 Ajax 和不显眼的 JQuery（选择成分时浏览器 URL 不应更改），@pinhead 的答案会将所选值发送到操作，但 SelectedIngredients 不会累积您的值选择，因为它的值不包含在 ajax 数据中。为此，您需要将多选更改为绑定到SelectedIngredients：

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

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

也就是说，我不会说您所做的工作足以证明往返服务器的合理性，因此在进行上述更改后，您可以像这样在客户端完全添加成分：

@Html.DropDownListFor(
    model => model.SelectedIngredient, 
    Model.Ingredients, 
    "Select Ingredient", 
    new { @onchange = "$('#SelectedIngredients').append('<option>' + $(this).val() + '</option>')" })

Answer 2

我相信一种解决方案是将您的 ListBoxFor 助手移动到您的局部视图中，以便在您的操作返回局部视图时更新和重新创建它。

提交.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%;" })