asp.net MVC 3中的简单Ajax，更新模型和重新渲染部分

我来自一个更WPF应用程序背景，我习惯了绑定等。然后进入网站可能会带来问题，因为它们的工作方式有很大不同。

我正在尝试做一个简单的Ajax行动但不知道从哪里开始。基本上我想制作一个下拉列表来更改模型上的一个属性并重新渲染页面的该部分。也许这太像 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 Table

这是一个完整的例子。

Model:

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

控制器：

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 view:

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

The jquery.unobtrusive-ajax.js例如，脚本包含应移出布局内的索引视图，并且订阅下拉列表更改事件的自定义 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>
}