asp.net MVC 3の単純なAjaxでモデルを更新し、部分を再レンダリングします

Question

私はより多くのWPFアプリケーションの背景から来ており、バインディングなどに慣れています。ウェブサイトにジャンプすると、それがはるかに違った働きをするので、問題が発生する可能性があります。

私は単純なAjaxアクションを実行しようとしていますが、どこから始めたらいいか分かりません。基本的には、モデルの1つのプロパティを変更し、ページのその部分を再描画するドロップダウンリストを作成したいと思います。おそらく、これはあまりにも多くのWPFの方法でこれを行うので、私のモデルはそれがするべきもののためにねじれている可能性があります。ここで

は、私はすでに得たものである：

public class TheViewModel 
{ 
    private IEnumerable<TheData> _data; 

    public TheViewModel(IEnumerable<TheData> data) 
    { 
     _data = data; 
     Year = 2012; 
    } 

    public int Year { get; set; } 

    public ICollection<TheData> Data 
    { 
     get 
     { 
      return _data.Where(d => d.Year == this.Year).ToList(); 
     } 
    } 

    public IEnumerable<SelectListItem> YearList 
    { 
     // lists the available years 
    } 
} 

public class TheData 
{ 
    public int Year { get; set; } 
    //Some more info I want to represent in Table 
} 

そしてかみそり：

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "thetable" })) 
{ 
     @Html.DropDownListFor(model => model.Year, Model.YearList, new { AutoPostBack = "true"}) 
     <input type="submit" name="name" value="Submit" /> 
} 


<table id="thetable"> 
    <thead> 
     //some headers 
    </thead> 
    <tbody> 
    @foreach (var item in Model.Data) 
    { 
     //row for each data 
    } 
    </tbody> 
</table> 

あなたが見ることができるように、私は更新されるYearプロパティを望んだし、新しいコールがあることを新しい情報をもたらすDataプロパティ用に作成されました。その情報はthetableに表示されます。

Answer 1

完全な例です。

モデル：

public class MyViewModel 
{ 
    public int Year { get; set; } 
    public IEnumerable<SelectListItem> Years 
    { 
     get 
     { 
      return Enumerable.Range(1980, 40).Select(x => new SelectListItem 
      { 
       Value = x.ToString(), 
       Text = x.ToString() 
      }); 
     } 
    } 

    public IList<TheData> Data { get; set; } 
} 

public class TheData 
{ 
    public int Year { get; set; } 
    public string Foo { get; set; } 
    public string Bar { get; set; } 
} 

は、コントローラ：jquery.unobtrusive-ajax.jsスクリプト封入は、例えば、レイアウト内のインデックスビューの外に移動しなければならない

@model MyViewModel 

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#yearsddl').change(function() { 
      $(this).closest('form').trigger('submit'); 
     }); 
    }); 
</script> 

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "data" })) 
{ 
    @Html.DropDownListFor(x => x.Year, Model.Years, new { id = "yearsddl" }) 
} 

<table> 
    <thead> 
     <tr> 
      <th>Year</th> 
      <th>Foo</th> 
      <th>Bar</th> 
     </tr> 
    </thead> 
    <tbody id="data"> 
     @Html.Partial("_data", Model.Data ?? Enumerable.Empty<TheData>()) 
    </tbody> 
</table> 

と：

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     var model = new MyViewModel(); 
     return View(model); 
    } 

    [HttpPost] 
    public ActionResult Index(int year) 
    { 
     var model = new[] 
     { 
      new TheData { Year = year, Foo = "foo 1", Bar = "bar 1" }, 
      new TheData { Year = year, Foo = "foo 2", Bar = "bar 2" }, 
      new TheData { Year = year, Foo = "foo 3", Bar = "bar 3" }, 
     }; 
     return PartialView("_data", model); 
    } 
} 

Index.cshtmlビュー変更イベントをサブスクライブするカスタムjsドロップダウンリストを別のjsファイルに移動し、レイアウトからインクルードする必要があります。私はビューを動作させるために必要なものの完全な例を示すために、ここにそれらを置いています。

_Data.cshtml部分：

@model IList<TheData> 

@for (int i = 0; i < Model.Count; i++) 
{ 
    <tr> 
     <td>@Html.DisplayFor(x => x[i].Year)</td> 
     <td>@Html.DisplayFor(x => x[i].Foo)</td> 
     <td>@Html.DisplayFor(x => x[i].Bar)</td> 
    </tr> 
}