.net Razor ajax vue de duplication

Question

J'essaie d'utiliser ajax dans mon application de test simple. J'ai une liste déroulante, un bouton et un div où je présente les éléments choisis dans le menu déroulant. Voici le code:

Mon contrôleur:

public ActionResult Index() 
    { 
     if (Session["items"] == null) 
     { 
      Session["items"] = new List<Item>(); 
     } 

     var items = new Item[] { 
      new Item("1", "one"), 
      new Item("2", "two"), 
      new Item("3", "three") 
     }; 

     ViewBag.list = Session["items"]; 
     ViewBag.items = new SelectList(items, "Id", "Value"); 
     return View(new Item()); 
    } 

    [HttpPost] 
    public ActionResult Index(Item item) 
    { 
     ((List<Item>)Session["items"]).Add(item); 
     return RedirectToAction("Index"); 
    } 

classe Article:

public class Item 
{ 
    private string id; 
    private string value; 

    public Item(string id, string value) 
    { 
     this.id = id; 
     this.value = value; 
    } 

    public Item() 
    { 
    } 

    public string Id { get { return id; } set { id = value; } } 
    public string Value { get { return value; } set { this.value = value; } } 
} 

Mon point de vue:

@model TestExample.Models.Item 
@{ 
    ViewBag.Title = "Index"; 
} 
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "itemList" })) 
{ 
    <div id="btn"> 
    @Html.DropDownListFor(m => m.Id, ViewBag.items as SelectList) 
    <input type="submit" value="Add" /> 
    </div> 
} 

<div id="itemList"> 
    @foreach (TestExample.Models.Item item in ViewBag.list as  List<TestExample.Models.Item>) 
    { 
    <h1>@item.Value</h1> 
    } 
</div> 

Le problème est que chaque fois que je prends élément de la liste et appuyez sur ajouter je reçois ma boîte de dépôt et le bouton en double et les éléments qui sont affichés dans la div. Cela se produit après le premier clic et après je vois toujours deux boîtes de dépôt et boutons, et les éléments de la liste sont dupliqués. Quelle est la cause de cela? Comment puis-je résoudre ce problème ..

Merci

Answer 1

Après post ajax vous insérez une même page dans:

<div id="itemList"> 
    ... 
</div> 

C'est pourquoi vous avez 2 boutons etc Dans cette action:

[HttpPost] 
public ActionResult Index(Item item) { ... } 

Vous devez retourner une vue partielle uniquement avec vos éléments de liste.