[英]Return a collection of models from a view
I have a requirement to dynamically create objects in my Razor View
and after the user edits them, submit them back to the server. 我需要在
Razor View
动态创建对象,并且在用户对其进行编辑之后,将其提交回服务器。
This is how my model looks like: 这是我的模型的样子:
public class Panel
{
public string Name { get; set; }
public string Text1 { get; set; }
public string Text2 { get; set; }
}
What I want to do is to render the required inputs each time the clicks on a button using Javascript
. 我想做的是每次使用
Javascript
单击按钮时都呈现所需的输入。 this is how my main view looks like: 这是我的主视图的样子:
@model IEnumerable<TabsTest.Models.Panel>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@for (int i = 0; i < ViewBag.I; i++)
{
@*@Html.Partial("_view", new TabsTest.Models.Panel() { Name = "A" + i })*@
@Html.Action("PanelSub", "Panels", new { name = i })
<hr />
}
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
The PartialView
: PartialView
:
@model TabsTest.Models.Panel
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
@Html.EditorFor(model => model.Text1, new { htmlAttributes = new { @class = "form-control" } })
@Html.EditorFor(model => model.Text2, new { htmlAttributes = new { @class = "form-control" } })
And my Actions: 我的动作:
public ActionResult CreatePanels()
{
ViewBag.I = 5;
return View();
}
[HttpPost]
public ActionResult CreatePanels(IEnumerable<Panel> panels) // <= always returns Null
{
//handle collection...
return RedirectToAction("Index");
}
public PartialViewResult PanelSub(int name = -1)
{
var panel = new Panel() { Name = name.ToString() };
return PartialView("_view");
}
My question is how can I use the model binding to handle the new objects that the user created in the view? 我的问题是如何使用模型绑定来处理用户在视图中创建的新对象?
You can create a dummy set of inputs that are cloned and displayed when you click an 'add panel' button (assumes you are adding new panels to a div with id='#Panels') 您可以创建一组虚拟输入,当您单击“添加面板”按钮时,这些输入将被克隆并显示(假设您要向id为“ #Panels”的div添加新面板)
<div id="NewPanel" style="display:none">
<div class='panelContainer'>
<input type="text" name="panel[#].Name" value />
<input type="text" name="panel[#].Text1" value />
<input type="text" name="panel[#].Text2" value />
<input type="hidden" name="panel[#].Index" value ="%"/>
</div>
</div>
Note the use of a dummy indexer to prevent this one being posted back 请注意使用虚拟索引器来防止此索引器回发
And the script 和脚本
$('#AddButton').click(function() {
var index = $('#Panels').children('.panelContainer').length; // count of existing panels
var clone = $('#NewPanel').clone();
// Update the index of the clone
clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
$('#Panels').append(clone);
}
Note you do not need the partial view with this solution 请注意,此解决方案不需要局部视图
This is how I went about it: I used knockoutjs and AJAX. 这就是我的处理方式:我使用了基因敲除和AJAX。 I had a collection whatever from the server.
我从服务器收集了任何东西。 I retrieved the collection via AJAX and populated the knockout viewmodel.
我通过AJAX检索了集合并填充了剔除视图模型。 On the view, I implemented adding new items.
在视图上,我实现了添加新项目。 When I added a new item:
当我添加新项目时:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.