May 29, 2014, 12:01 AM
What is the best way to manage changes to complex objects in the client?
My project is using Ext.NET with ASP.NET MVC using Razor views.
I'm creating a View for creating and editing a reasonably complex object. This is a very cut down version of it:
Note: I'm expecting the answer is to use a Store -- but I can't figure out how to accomplish this with partial views
I have a reasonably simple main member view which just creates each tab as a partial view. It passes the Model to the partial views and they use whichever properties they're interested in:
MemberMain.cshtml
Also, because some of these lists of objects are very long and almost never used, I only load the data if the tab is selected.
Attachment 11571
I'd appreciate advice on the best way to work with large complex objects
Thanks in anticipation!
I'm creating a View for creating and editing a reasonably complex object. This is a very cut down version of it:
Note: I'm expecting the answer is to use a Store -- but I can't figure out how to accomplish this with partial views
I have a reasonably simple main member view which just creates each tab as a partial view. It passes the Model to the partial views and they use whichever properties they're interested in:
MemberMain.cshtml
@using Ext.Net
@using Ext.Net.MVC
@using Clubware.Prototype.Extjs
@model Member
@{
Layout = "~/Views/Shared/_BaseLayout.cshtml";
var X = Html.X();
}
@section example
{
@(X.FormPanel()
.Border(false)
.Items(
X.Toolbar()
.Items(
X.Button()
.Icon(Icon.DatabaseSave)
.Text("Save")
.DirectClickUrl(Url.Action("Save"))
)
,
X.TabPanel()
.Padding(10)
.BodyPadding(10)
.Items(
X.Panel()
.Title("General")
.ContentFromPartial("MemberGeneralTab", Model)
,
X.Panel()
.Title("Details")
.ContentFromPartial("MemberDetailsTab", Model)
,
X.Panel()
.Title("Accounts")
.ContentFromPartial("MemberAccountsTab", Model)
.DirectEvents(de =>
{
de.Activate.Url = Url.Action("GetMemberAccounts", "Members", new { memberId = Model.MemberID });
de.Activate.Success = "App.MemberAccountsGrid.getStore().loadData(result.data);";
})
)
)
)
}
Each tab is created using ContentFromPartial
and passing in the Model, for example:@using Ext.Net.MVC
@using Clubware.Prototype.Extjs
@model Member
@{
var X = Html.X();
}
@(X.Panel()
.BodyPadding(10)
.Border(false)
.Items(
X.TextFieldFor(m => m.FirstName),
X.TextFieldFor(m => m.Middle),
X.TextFieldFor(m => m.LastName),
X.TextFieldFor(m => m.Company),
X.TextFieldFor(m => m.Occupation),
X.DateFieldFor(m => m.DOB),
X.SelectBoxFor(m => m.Sex).Items(new []{"M","F"})
)
)
Or has a grid created that is populated by setting the store using a Direct Event when the tab is selected:@using Ext.Net
@using Ext.Net.MVC
@using Clubware.Prototype.Extjs
@model Member
@{
var X = Html.X();
}
@(
X.Panel()
.Layout("fit")
.Border(false)
.Items(X.GridPanel()
.ID("MemberAccountsGrid")
.Layout("form")
.MinHeight(250)
.Store(X.StoreFor(typeof(List<Account>)))
.ColumnModel(
X.Column().Text("Account Description").DataIndex("AccDescription").Width(300),
X.DateColumn().Text("Start Date").DataIndex("StartDate").Width(100).Format("d"),
X.DateColumn().Text("End Date").DataIndex("EndDate").Width(100).Format("d")
)
.Scroll(ScrollMode.Both)
)
)
The main data entity is a Member; it has dozens of fields hanging off it and a lot of child objects, some of which will involve collections of child objects. It'll also have some properties that are calculated from these collections (things like 'Last Visit Date' calculated from a list of Visit objects). Also, because some of these lists of objects are very long and almost never used, I only load the data if the tab is selected.
Attachment 11571
I'd appreciate advice on the best way to work with large complex objects
- Should I create a Store?
- If I do, can I then share this store in all the partial views?
Thanks in anticipation!