MVC更新ListboxFor DropDownListForから選択した値で

Question

現在MVCのWebサイトで作業していますが、DropDownListForで値が選択されるたびにDropDownListForで部分ビューを作成しました.HttpPostに移動して値を追加します。リスト。私はまた、このリストにバインドされているListBoxForを持っています。私が達成したい何

：新しい値を持つリストに追加され

毎回DropDownListFor選択した値がこのリストボックスに追加されますので、それが自動的にListBoxForを更新する必要があります。私はこれを達成するための最良の方法が何であるのだろうか。

コード：

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

私はあなたが考え出したと思うと、現在のアプローチは機能していない理由はということです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ヘルパーを部分ビューに移動して、アクションが部分ビューを返すと更新され再作成されることを考えています。

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