从视图返回模型的集合
本文关键字:集合 模型 返回 视图 | 更新日期: 2023-09-27 18:11:07
我需要在我的Razor View
中动态创建对象,并且在用户编辑它们之后,将它们提交回服务器。
这是我的模型的样子:
public class Panel
{
public string Name { get; set; }
public string Text1 { get; set; }
public string Text2 { get; set; }
}
我想做的是每次使用Javascript
单击按钮时呈现所需的输入。这是我的主视图的样子:
@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>
}
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");
}
我的问题是如何使用模型绑定来处理用户在视图中创建的新对象?
您可以创建一个虚拟的输入集,当您单击'add panel'按钮时克隆并显示(假设您正在向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>
注意使用一个虚拟索引器来防止这个索引器被发回
和脚本
$('#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);
}
注意此解决方案不需要局部视图
我是这样做的:我使用了knockoutjs和AJAX。我从服务器上收集了一些东西。我通过AJAX检索集合并填充淘汰视图模型。在视图上,我实现了添加新项。当我添加新条目时:
- 项目被添加到ko视图模型
- 项目通过ajax发送到服务器保存