.net - .net Razor ajax複製ビュー

Question

簡単なテストアプリで ajax を使用しようとしています。ドロップダウン リストが 1 つ、ボタンが 1 つ、ドロップダウンから選択した項目を表示する div が 1 つあります。コードは次のとおりです。

私のコントローラー：

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

アイテムクラス:

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; } }
}

私の見解：

@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>

問題は、リストからアイテムを選択して追加を押すたびに、ドロップボックスとボタンが複製され、アイテムがdivに表示されることです。これは、最初のクリックの後に発生し、その後、常に 2 つのドロップ ボックスとボタンが表示され、リスト内の項目が重複しています.これの原因は何ですか? どうすれば修正できますか..

ありがとう