1. Visual Studio 2010, 创建ASP.NET MVC3应用程序
2. 添加Ext.Net.dll reference.
3. 将以下内容添加到Web.config:
4. 将Global.asax设置成如下内容:
Global.asax
5. 创建Controler:ExamplesController,内容如下:
ExamplesController.cs
6. 创建对应的View,内容如下:
Views\Examples\Index.cshtml
7. 创建Controller: DataController.
DataController.cs
2. 添加Ext.Net.dll reference.
3. 将以下内容添加到Web.config:
<configuration> <configSections> <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" /> <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" /> </sectionGroup> </configSections> <system.web.webPages.razor> <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" /> <pages pageBaseType="System.Web.Mvc.WebViewPage"> <namespaces> <add namespace="System.Web.Mvc" /> <add namespace="System.Web.Mvc.Ajax" /> <add namespace="System.Web.Mvc.Html" /> <add namespace="System.Web.Routing" /> <add namespace="Ext.Net" /> <add namespace="Ext.Net.MVC" /> </namespaces> </pages> </system.web.webPages.razor> <system.web> <httpHandlers> <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false"/> </httpHandlers> <httpModules> <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net"/> </httpModules> </system.web> </configuration>
Global.asax
protected void Application_AuthenticateRequest(object sender, System.EventArgs e) { string url = HttpContext.Current.Request.FilePath; if (url.EndsWith("ext.axd")) { HttpContext.Current.SkipAuthorization = true; } } public static void RegisterGlobalFilters(GlobalFilterCollection filters) { filters.Add(new HandleErrorAttribute()); } public static void RegisterRoutes(RouteCollection routes) { routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); routes.IgnoreRoute("{exclude}/{extnet}/ext.axd"); routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Examples", action = "Index", id = UrlParameter.Optional } // Parameter defaults ); } protected void Application_Start() { AreaRegistration.RegisterAllAreas(); RegisterGlobalFilters(GlobalFilters.Filters); RegisterRoutes(RouteTable.Routes); }
ExamplesController.cs
public class ExamplesController : Controller { public ActionResult Index() { return View(); } }
6. 创建对应的View,内容如下:
Views\Examples\Index.cshtml
<!DOCTYPE html> <html> <head> <title>Infinite Scrolling - Ext.NET Examples</title> </head> <body> @Html.X().ResourceManager() <h1>Infinite Scrolling</h1> <p>The brand new GridPanel supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p> <p>The GridPanel uses a new virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p> <br /> @(Html.X().GridPanel() .Title("Stock Price") .Height(500) .Width(500) .InvalidateScrollerOnRefresh(false) .DisableSelection(true) .Store(store => store.Add(Html.X().Store() .PageSize(100) .Buffered(true) .AutoLoad(false) .Proxy(proxy => proxy.Add(Html.X().AjaxProxy() .Url("/Data/GetData/") .Reader(reader => reader.Add(Html.X().JsonReader() .Root("data") )) )) .Model(model => model.Add(Html.X().Model() .Fields(fields => { fields.Add(Html.X().ModelField().Name("Company")); fields.Add(Html.X().ModelField().Name("Price")); fields.Add(Html.X().ModelField().Name("LastUpdate").Type(ModelFieldType.Date)); }) )) )) .VerticalScroller(scroller => scroller.Add(Html.X().GridPagingScroller())) .ColumnModel(columnModel => { columnModel.Columns.Add(Html.X().RowNumbererColumn().Width(50).Sortable(false)); columnModel.Columns.Add(Html.X().Column() .Text("Company") .DataIndex("Company") .Flex(1)); columnModel.Columns.Add(Html.X().Column() .Text("Price") .DataIndex("Price") .Width(70)); columnModel.Columns.Add(Html.X().DateColumn() .Text("LastUpdate") .DataIndex("LastUpdate") .Width(140) .Format("HH:mm:ss")); }) .View(view => view.Add(Html.X().GridView().TrackOver(false))) .Listeners(listeners => { listeners.AfterRender.Handler = "this.store.guaranteeRange(0, 99);"; listeners.AfterRender.Delay = 100; }) ) </body> </html>
DataController.cs
class StockQuotation { public string Company { get; set; } public int Price { get; set; } public DateTime LastUpdate { get; set; } } public class DataController : System.Web.Mvc.Controller { public AjaxStoreResult GetData(int start, int limit, int page) { StoreResult response = new StoreResult(); List<StockQuotation> data = new List<StockQuotation>(); Random randow = new Random(); DateTime now = DateTime.Now; for (int i = start + 1; i <= start + limit; i++) { StockQuotation qoute = new StockQuotation() { Company = "Company " + i, Price = randow.Next(0, 200), LastUpdate = now }; data.Add(qoute); } response.Data = data; response.Total = 50000; return response; } }