PDA

View Full Version : [2.3] ModelSerializer - a helper class to serialize the data according to an Ext.Net.Model instance



Daniil
Oct 14, 2013, 2:35 PM
Hello,

The v2.3 release presents ModelSerializer - a helper class to serialize the data according to an Ext.Net.Model instance (Please don't mix up an Ext.Net.Model and a Model from MVC (Model - View - Controller)).

It serializes the data as well as a Store's DataSource is serialized during data binding.

Ext.Net.Model model = Ext.Net.new Model()
{
Fields =
{
new ModelField("field1"),
new ModelField("field2")
}
};
ModelSerializer.Serialize(data, model);

There is also a set of overloaded versions of the Serialize method. You can easily review it using Visual Studio intellisense.

The ModelSerializer can be used with WebForms and MVC. Though, it makes a bit more sense with MVC. So, here is an MVC example using the Razor View engine. Generally, it is a self-explanatory example. Please notice convinient overload methods for

this.Store(...)

Also, please notice that the ModelSerializer can be used without a Store. Though, I think that in most cases it is supposed to be used with a Store.

View

@model Ext.Net.Model

@{
var X = Html.X();
}

<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@X.ResourceManager()

@(X.Container()
.Layout("hbox")
.Defaults(new { margins = "20"})
.Items(
X.Container()
.Width(435)
.Items(
X.Button().Text("Bind full data").Handler("App.GridPanel1.getStore().load();"),
X.GridPanel()
.ID("GridPanel1")
.PaddingSpec("10 0")
.Store(
X.Store()
.Model(Model)
.Proxy(X.AjaxProxy()
.Url(@Url.Action("GetFullData"))
.Reader(X.JsonReader().Root("data"))
)
.AutoLoad(false)
)
.ColumnModel(
Html.X().Column().Text("ID").DataIndex("Id").Width(25),
Html.X().Column().Text("Company").DataIndex("Company").Width(150),
Html.X().Column().Text("Price").DataIndex("Price").Renderer(RendererFormat.UsMoney).Width(60),
Html.X().DateColumn().Text("Date").DataIndex("Date").Align(Alignment.Center).Format("yyyy-MM-dd").Width(80),
Html.X().Column().Text("Size").DataIndex("Size").Width(70),
Html.X().BooleanColumn().Text("Visible").DataIndex("Visible").Align(Alignment.Center).Width(50)
)
),

X.Container()
.Width(150)
.Items(
X.Button().Text("Bind partial data").Handler("App.DataView1.getStore().load();"),

X.DataView()
.ID("DataView1")
.PaddingSpec("10 0")
.ItemSelector("div")
.Store(
X.Store()
.Model(X.Model().Fields("Company", "Price"))
.Proxy(X.AjaxProxy()
.Url(@Url.Action("GetPartialData"))
.Reader(X.JsonReader().Root("data"))
)
.AutoLoad(false)
)
.Tpl(X.XTemplate()
.Html(@<text>
<tpl for=".">
<div>{Company}: {Price} $</div>
</tpl>
</text>)
)
),

X.Button().Text("Get a list of companies with sizes").DirectClickAction("GetListOfCompaniesWithSizes")
)
)
</body>
</html>


Controller

public ActionResult Index()
{
return View(ModelSerializerModel.GetFullModel());
}

public ActionResult GetFullData()
{
return this.Store(ModelSerializerModel.Data, ModelSerializerModel.GetFullModel());
}

public ActionResult GetPartialData()
{
return this.Store(ModelSerializerModel.Data, new ModelFieldCollection()
{
new ModelField("Company"),
new ModelField("Price")
});
}

public ActionResult GetListOfCompaniesWithSizes()
{
string data = ModelSerializer.Serialize(ModelSerializerModel.Dat a, new ModelFieldCollection()
{
new ModelField("Company"),
new ModelField("Size")
});

X.Msg.Alert("Companies", data).Show();

return this.Direct();
}

Model

public class ModelSerializerModel
{
public static Model GetFullModel()
{
return new Model()
{
Fields =
{
new ModelField("Id", ModelFieldType.Int),
new ModelField("Company", ModelFieldType.String),
new ModelField("Price", ModelFieldType.Float),
new ModelField("Date", ModelFieldType.Date),
new ModelField("Size", ModelFieldType.String),
new ModelField("Visible", ModelFieldType.Boolean)
}
};
}

public static List<object> Data
{
get
{
List<object> goods = new List<object>()
{
new
{
Id = 1,
Price = 71.72,
Company = "3m Co",
Date = new DateTime(2013, 9, 1),
Size = "large",
Visible = true
},
new
{
Id = 2,
Price = 29.01,
Company = "Aloca Inc",
Date = new DateTime(2013, 08, 01),
Size = "medium",
Visible = false
},
new
{
Id = 3,
Price = 83.81,
Company = "Altria Group Inc",
Date = new DateTime(2013, 08, 03),
Size = "large",
Visible = false
},
new
{
Id = 4,
Price = 52.55,
Company = "American Express Company",
Date = new DateTime(2014, 01, 04),
Size = "extra large",
Visible = true
},
new
{
Id = 5,
Price = 64.13,
Company = "American International Group Inc.",
Date = new DateTime(2014, 03, 04),
Size = "small",
Visible = true
},
new
{
Id = 6,
Price = 31.61,
Company = "AT&T Inc.",
Date = new DateTime(2014, 02, 01),
Size = "extra large",
Visible = false
},
new
{
Id = 7,
Price = 75.43,
Company = "Boeing Co.",
Date = new DateTime(2014, 01, 01),
Size = "large",
Visible = true
}
};

return goods;
}
}
}

This example is added to the SVN trunk.

trunk\Ext.Net.Examples.MVC\Areas\Data\...