简单的Ajax在asp.net MVC 3，更新模型和重新呈现部分 [英] Simple Ajax in asp.net MVC 3, update the model and rerender part

问题描述

我来自一个更 WPF 应用背景，我已经习惯了绑定，这样。跳进网站才能随之而来的问题，因为他们的工作这么多不同的。

I come from a more WPF application background and I'm used to bindings and such. Jumping into websites then can come with it's problems as they work so much more differently.

我试图做一个简单的阿贾克斯行动，但不知道从哪里开始。基本上我想要做一个改变的模型中的一个属性，然后重新呈现页面的一部分的DropDownList。这或许是太多了的WPF的方式来做到这一点，所以我的模型可以被扭曲的东西这是应该做的。

I'm trying to do a simple Ajax action but not sure where to begin. Basically I want to make a dropdownlist that changes one property on the model and re-renders that part of the page. Perhaps this is too much of a WPF way to do this so my Model could be twisted for the thing it is supposed to do.

下面是我已经：

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属性进行更新和数据属性，这将导致新的信息来进行一个新的呼叫。这些信息将在 thetable 表呈现

推荐答案

下面是一个完整的例子。

Here's a full example.

型号：

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是认购的变化事件中的索引视图将DropDownList应该被移动到一个单独的js文件，其中包括从布局。我只是把他们在这里说明一个什么样的所需视图工作的完整示例。

The jquery.unobtrusive-ajax.js script inclusion should be moved out of the index view inside the layout for example and the custom js that subscribes for the change event of the dropdownlist should be moved into a separate js file and included from the Layout. I just put them here to illustrate a full example of what's required for the view to work.

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

这篇关于简单的Ajax在asp.net MVC 3，更新模型和重新呈现部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！