Hi,
Here you are.
1. Visual Studio 2010, create an empty ASP.NET MVC3 Application.
2. Attach the Ext.Net.dll reference.
3. Add the following into Web.config:
Add to 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>
4. The Global.asax should look like this:
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);
}
5. Create the Examples folder within the Views one and put the following sample razor 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>
6. Add the following ExamplesController.
ExamplesController.cs
public class ExamplesController : Controller
{
public ActionResult Index()
{
return View();
}
}
7. Add the following DataController.
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)
{
AjaxStoreResult response = new AjaxStoreResult();
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;
}
}
Hope this helps.
EDIT
AjaxStoreResult has been renamed to StoreResult.
