What is the best way to manage changes to complex objects in the client?

[DerekTomes]

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

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

[geoffrey.mcgill]

Excellent question and nice post.

I am reviewing now and will be reviewing with the team later today.

[Daniil]

Hi @DerekTomes,

Yes, that is an interesting scenario.

• Should I create a Store?

Yes, personally, I would try to implement it using a Store with Associations.
http://mvc.ext.net/#/search/Associations
https://examples2.ext.net/#/search/Associations

• If I do, can I then share this store in all the partial views?

If you create a Store on the main view, you should be definitely able to access that Store in JavaScript by "App.StoreID".

Here is an example.

Main View

<!DOCTYPE html>
<html>
<head>
    <title>Ext.Net.MVC v2 Example</title>     
</head>
<body>
    @Html.X().ResourceManager()
    
    @(Html.X().Store()
        .ID("Store1")
        .Model(Html.X().Model().Fields("test"))
        .DataSource(new object[] 
            { 
                new { test = "test1" },
                new { test = "test2" }
            })
    )

    @Html.X().Panel().ItemsFromPartial("Partial")
</body>
</html>

Partial View

@(Html.X().Button()
    .Text("Show the Store's data")
    .Handler("alert(Ext.encode(App.Store1.getRecordsValues()));")
)

A small piece of advice.

If you have an Ext.NET component (-s) on the top level inside a partial view, it is better to use ItemsFromPartial rather than ContentFromPartial.

With ItemsFromPartial a partial view's Ext.NET components will be in an items client side collection of a parent Ext.NET container (inside a parent view).

It means that it will participate in a parent's Ext.NET layout and, also, you will be able to use ComponentQuery.

Here is an example of using the ComponentQuery functionality.
http://forums.ext.net/showthread.php...ll=1#post92621

[DerekTomes]

Thanks Daniil and Geoffrey, I'll give it a go :)