使用Razor语法创建Ext.NET的MVC3项目

最新推荐文章于 2018-12-14 14:41:00 发布

翻译最新推荐文章于 2018-12-14 14:41:00 发布 · 1.5k 阅读

ASP.NET 同时被 3 个专栏收录

23 篇文章

订阅专栏

15 篇文章

订阅专栏

Razor

7 篇文章

订阅专栏

本文指导如何在Visual Studio 2010中创建ASP.NET MVC3项目，添加Ext.NET库，配置Web.config文件，设置Global.asax，创建控制器和视图，并集成Ext.NET组件以实现无限滚动功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. Visual Studio 2010, 创建ASP.NET MVC3应用程序

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>

4. 将Global.asax设置成如下内容:

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. 创建Controler：ExamplesController，内容如下：

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>

7. 创建Controller: 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)
    {
        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;
    }
}