Question

我来自更多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表

中呈现

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

控制器：

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查看：

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

例如，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>
}

asp.net MVC 3中的简单Ajax，更新模型并重新呈现部分

1 个答案: