返回List& 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.在操作中返回的ViewModel必须具有日期,文本并包含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添加属性public bool selected
,然后发送所有项目并过滤服务器上的选定项目,但是我宁愿不来回发送所有数据,因为列表可能很大.
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.
让我们从视图模型开始:
Let's start with the view model:
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");
}
}
然后我们进入~/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
)定义编辑器模板,该模板将为集合的每个元素呈现:
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>
好的,因此在这个阶段我们还没有编写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表单,仅发布用户在请求中选择的记录.因此,我们可以在一个单独的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;
});
});
As a good article for handling dynamic lists I would recommend you the following blog post.
这篇关于返回List& lt; E& gt;从视图模型中查看的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!