Apr 12, 2016, 8:49 AM
MVC: How to use FormPanels and TabPanel to edit and bind a collection of items?
Hi,
How can I edit items, add items and submit a collection of items in a TabPanel?
I have a collection of items which I want to edit, add new items and submit the changes to the controller. Each item has his own FormPanel
in a Tab.
I changed the the FormPanelFor example to test my needs
http://mvc.ext.net/#/Models/FormPanelFor/
Currently it is possible to edit the initial tabs and submit the initial collection items to the controller. It is also possible to add new Tabs with
a FormPanel for new objects. But the objects of these tabs are not submited, and the FormPanel of these objects disappears if a further Tab is added.
I have a notion what the reason is but I have no solution. I assume the reason is a missing unique identifier for the dynamically added FormPanel. Since the initial view is done by looping over an array the additional FormPanels are added in a other way there is no identifaction possible.
Is it possible to pass a uniqueID to [CODE]Html.X().FormPanelFor[CODE] so that all objcts are submited? Or are there any better solutions to edit and bind a collection within ext.net mvc?
Model: FormPanelForModel.cs
How can I edit items, add items and submit a collection of items in a TabPanel?
I have a collection of items which I want to edit, add new items and submit the changes to the controller. Each item has his own FormPanel
in a Tab.
I changed the the FormPanelFor example to test my needs
http://mvc.ext.net/#/Models/FormPanelFor/
Currently it is possible to edit the initial tabs and submit the initial collection items to the controller. It is also possible to add new Tabs with
a FormPanel for new objects. But the objects of these tabs are not submited, and the FormPanel of these objects disappears if a further Tab is added.
I have a notion what the reason is but I have no solution. I assume the reason is a missing unique identifier for the dynamically added FormPanel. Since the initial view is done by looping over an array the additional FormPanels are added in a other way there is no identifaction possible.
Is it possible to pass a uniqueID to [CODE]Html.X().FormPanelFor[CODE] so that all objcts are submited? Or are there any better solutions to edit and bind a collection within ext.net mvc?
Model: FormPanelForModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace Ext.Net.MVC.Examples.Areas.Models.Models
{
public class FormPanelEmployee
{
private static int NEXT_ID = 1;
[Field(FieldType=typeof(Ext.Net.Hidden))]
public int ID { get; }
public string Name { get; set; }
public string Surname { get; set; }
public DateTime DateOfBirth { get; set; }
public bool IsActive { get; set; }
[UIHint("Department")]
public FormPanelDepartment Department { get; set; }
public FormPanelEmployee()
{
ID = NEXT_ID++;
}
public static List<FormPanelEmployee> GetAll()
{
return new List<FormPanelEmployee>
{
new FormPanelEmployee
{
Name = "Nancy",
Surname = "Davolio",
DateOfBirth = DateTime.Now,
IsActive = true,
Department = FormPanelDepartment.GetAll()[0]
},
new FormPanelEmployee
{
Name = "Andrew",
Surname = "Fuller",
Department = FormPanelDepartment.GetAll()[2]
}
};
}
}
public class FormPanelDepartment
{
public int ID { get; set; }
public string Name { get; set; }
public static List<FormPanelDepartment> GetAll()
{
return new List<FormPanelDepartment>
{
new FormPanelDepartment { ID = 1, Name = "Department A" },
new FormPanelDepartment { ID = 2, Name = "Department B" },
new FormPanelDepartment { ID = 3, Name = "Department C" }
};
}
}
}
Controller: FormPanelForController.csusing System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net.MVC.Examples.Areas.Models.Models;
namespace Ext.Net.MVC.Examples.Areas.Models.Controllers
{
public class FormPanelForController : Controller
{
public ActionResult Index()
{
return View(FormPanelEmployee.GetAll());
}
public ActionResult Submit(List<FormPanelEmployee> employee)
{
X.Msg.Alert("Employee", JSON.Serialize(employee)).Show();
return this.Direct();
}
public ActionResult AddTab(string containerId)
{
ViewData.Model = new FormPanelEmployee();
var result = new Ext.Net.MVC.PartialViewResult
{
ViewData = this.ViewData,
ViewName = "Tab",
ContainerId = containerId,
RenderMode = RenderMode.AddTo
};
this.GetCmp<TabPanel>(containerId).SetLastTabAsActive();
return result;
}
}
}
View: Index.cshtml@model List<Ext.Net.MVC.Examples.Areas.Models.Models.FormPanelEmployee>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_BaseLayout.cshtml";
}
@section example
{
<h1>FormPanel for Model</h1>
<p>Automatically build a form panel for a model</p>
<p>If you running that example in your project, please do not forget to put Customer.cshtml and Department.cshtml to the Views\Shared\EditorTemplates folder</p>
@(
Html.X().FormPanel()
.BodyPadding(5)
.DefaultAnchor("100%")
.Width(800)
.Items(Html.X().TabPanel()
.ID("TabPanel1")
.Width(860)
.Height(860)
.DeferredRender(false)
.Items(tabitems =>
{
for (int i = 0; i < Model.Count; i++)
{
tabitems.Add(Html.X().FormPanelFor(m => Model[i]).Title("Employee_"+ Model[i].ID));
}
}
)
.TabBar(Html.X().Button()
.Icon(Icon.Add)
.Flat(true)
.DirectEvents(de =>
{
de.Click.Url = Url.Action("AddTab");
de.Click.ExtraParams.Add(new { containerId = "TabPanel1" });
})
)
)
.Buttons(Html.X().Button()
.Text("Submit")
.DirectClickUrl(Url.Action("Submit"))
)
)
}
PartialView: Tab.cshtml
@model Ext.Net.MVC.Examples.Areas.Models.Models.FormPanelEmployee
@(Html.X().FormPanelFor(m => Model)
.Title("Employee_" + Model.ID)
.Closable(true)
.BodyPadding(6)
)
Last edited by marjot2112; Apr 13, 2016 at 7:29 AM.
Reason: Update Code