返回一个列表＆LT; E＆GT;从视图模型视图 [英] Return a List<E> from a view in view model

问题描述

这是我的情况：

我有这样的视图模型：

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

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

What I have to do is in the view set the date, write some text and then select from a list of E any number of E. The ViewModel returned in the action must have the date, the text and contain the list of selected items.

我需要知道的是如何处理表示名单。我该如何选择每个项目添加到模型的列表。我想上添加一个属性选到E，然后把所有的项目，并在服务器上的筛选选定的公共BOOL，但是我宁可不要来回发送所有因为列表数据可以是相当大的。

What I need to know is how to handle said list. How can I add each selected item to the models' List. I was thinking on adding a property public bool selected to E and then send all items and filter the selected ones on the server, however I would rather not send back and forth all that data since the list can be quite large.

我使用的剃刀和jQuery AJAX我所有形式的帖子MVC3。

I am using MVC3 with razor and JQUERY AJAX for all my form posts.

如果我没有说明白了，请让我知道。

If I am not making myself clear, please let me know.

感谢您。

推荐答案

这里有一个技巧，你可以用它来实现这一目标。

Here's one technique that you could use to achieve this.

让我们先从视图模型：

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请求：

then we write some controller to handle the rendering of the view and the AJAX request:

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

然后我们进入到〜/查看/主页/ 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中编辑模板键入（〜/查看/主页/ EditorTemplates / E.cshtml ），这将呈现为集合中的每个元素：

and finally we define an Editor template for the E type (~/Views/Home/EditorTemplates/E.cshtml) which will be rendered for each element of the collection:

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

OK，所以在这个阶段，我们还没有编写的JavaScript一部分，所以这应该表现为一个普通的HTML表单并提交时，将所有的值发送到服务器。

OK, so at this stage we haven't yet written the javascript part so this should behave as a normal HTML form and when it is submitted it will send all the values to the server.

和最后一块将是AJAXify用户在请求中选择的形式和POST只的记录。因此，我们可以在一个单独的JavaScript文件做到这一点：

And final piece would be to AJAXify the form and POST only the records that the user selected in the request. So we could do this in a separate javascript file:

$(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;
    });
});

作为处理动态列表一个很好的文章，我建议你在<一个href=\"http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/\">following博客文章。

这篇关于返回一个列表＆LT; E＆GT;从视图模型视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！