返回的模型的集合，从视图 [英] Return a collection of models from a view

问题描述

我有一个要求，动态地创建对象在我的的Razor视图和用户编辑他们之后，他们提交回服务器。结果
这是我的模型的样子：

I have a requirement to dynamically create objects in my Razor View and after the user edits them, submit them back to the server.
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; }
}

我想要做的是使用一个按钮的点击的JavaScript 每次渲染所需的投入。这是我的主视图的样子：

What I want to do is to render the required inputs each time the clicks on a button using 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>
}

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

和我的操作：

    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?

推荐答案

您可以创建一个虚拟的一套克隆，当你点击一个添加面板按钮（假设你添加新的面板到一个div显示输入ID ='＃面板'）

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')

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

请注意使用虚拟索引以prevent这一个被调回

Note the use of a dummy indexer to prevent this one being posted back

和脚本

$('#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

这篇关于返回的模型的集合，从视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！