<E> 从视图模型中的视图返回列表

Question

这是我的情况:

我有这个视图模型:

public class ViewModel
{
   public DateTime someDate { get; set; }
   public String someString { get; set; }
   public List<E> someList { get; set; }
}

我所要做的是在视图中设置日期，编写一些文本，然后从E的列表中选择任意数量的E。在操作中返回的ViewModel必须具有日期，文本并包含所选项目的列表。

我需要知道的是如何处理这个列表。如何将每个选定的项目添加到模型列表中?我正在考虑将属性public bool selected添加到E，然后发送所有项目并过滤服务器上选择的项目，但是我宁愿不来回发送所有数据，因为列表可能相当大。

我使用MVC3与razor和JQUERY AJAX为我所有的表单帖子。

如果我没有说清楚，请让我知道。

谢谢。

Answer 1

您可以使用一种技术来实现这一点。

让我们从视图模型开始:

public class ViewModel
{
    public DateTime SomeDate { get; set; }
    public string SomeString { get; set; }
    public List<E> SomeList { get; set; }
}
public class E
{
    public bool Selected { get; set; }
    public string Foo { get; set; }
    public string Bar { get; set; }
}

然后我们编写一些控制器来处理视图的呈现和AJAX请求:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new ViewModel
        {
            SomeDate = DateTime.Now,
            SomeString = "some text",
            SomeList = Enumerable.Range(1, 7).Select(x => new E
            {
                Foo = "foo " + x,
                Bar = "bar " + x
            }).ToList()
        };
        return View(model);
    }
    [HttpPost]
    public ActionResult Index(ViewModel model)
    {
        // Here we will get our view model properly bound and 
        // the list will contain only the items that the user
        // has selected (see below...)
        // TODO: do some processing
        return Content("Thanks for submitting this data", "text/plain");
    }
}

然后我们转到~/Views/Home/Index.cshtml视图:

@model ViewModel
@using (Html.BeginForm()) 
{
    <div>
        @Html.LabelFor(x => x.SomeDate)
        @Html.EditorFor(x => x.SomeDate)
    </div>
    <div>
        @Html.LabelFor(x => x.SomeString)
        @Html.EditorFor(x => x.SomeString)
    </div>
    <table>
        <thead>
            <tr>
                <th></th>
                <th>Foo</th>
                <th>Bar</th>
            </tr>
        </thead>
        <tbody>
            @Html.EditorFor(x => x.SomeList)
        </tbody>
    </table>
    <input type="submit" value="Send selected values to server using AJAX" />
}

最后，我们为E类型(~/Views/Home/EditorTemplates/E.cshtml)定义了一个Editor模板，它将为集合的每个元素呈现:

@{
    var index = Guid.NewGuid().ToString();
    var prefix = Regex.Replace(ViewData.TemplateInfo.HtmlFieldPrefix, @"[d+]$", match =>
    {
        return string.Format("[{0}]", index);
    });
    ViewData.TemplateInfo.HtmlFieldPrefix = prefix;
}
<input type="hidden" name="SomeList.Index" value="@index" />
<tr>
    <td>
        @Html.DisplayFor(x => x.Foo)
        @Html.HiddenFor(x => x.Foo)
    </td>
    <td>
        @Html.DisplayFor(x => x.Bar)
        @Html.HiddenFor(x => x.Bar)
    </td>
    <td>
        @Html.CheckBoxFor(x => x.Selected)
    </td>
</tr>

好的，在这个阶段我们还没有写javascript部分，所以这应该表现为一个正常的HTML表单，当它被提交时，它会发送所有的值给服务器。

最后一步是对表单进行ajax处理，并只POST用户在请求中选择的记录。因此，我们可以在单独的javascript文件中完成:

$(function () {
    $('form').submit(function () {
        // we clone the original form and we will
        // filter out the non-selected fields
        var myForm = $(this).clone(false, false);
        $('tr', myForm).each(function () {
            var isSelected = $(':checkbox', this).is(':checked');
            if (!isSelected) {
                $(this).remove();
            }
        });
        $.ajax({
            url: this.action,
            type: this.method,
            data: myForm.serialize(),
            success: function (result) {
                alert(result);
            }
        });
        return false;
    });
});

作为一篇处理动态列表的好文章，我推荐你阅读下面的博客文章