Блог

У меня есть требование динамически создавать объекты в моем 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" } })
  

И мои действия:

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

Мой вопрос в том, как я могу использовать привязку модели для обработки новых объектов, созданных пользователем в представлении?

Вы можете создать фиктивный набор входных данных, которые клонируются и отображаются при нажатии кнопки «Добавить панель» (предполагается, что вы добавляете новые панели в div с 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>
  

Обратите внимание на использование фиктивного индексатора, чтобы предотвратить повторную публикацию этого

И сценарий

 $('#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 и заполнил выбывшую viewmodel. В представлении я реализовал добавление новых элементов. Когда я добавил новый элемент:

1. элемент был добавлен в ko viewmodel
2. элемент был отправлен через ajax на сервер для сохранения