Ext.Net MVC 配置（2）

在VS2012中使用NuGet類庫管理器配置EXT.NET MVC環境在“Ext.Net MVC 配置（1）”文章已經寫到，方法很簡單也很方便，但就是不知道它在安裝這些庫時對項目做了什么很不爽。

通過幾天的研究終於琢磨出來如何手動在mvc3的項目中手動配置EXT.NET MVC環境了，現在就開始吧！

1、引用EXT.NET的相關DLL

（1）Ext.Net.dll

（2）Ext.Net.Utilities.dll

（3）Transformer.NET.dll

（4）Newtonsoft.Json.dll

2、配置項目下的Web.config 如下：

<?xml version="1.0" encoding="utf-8"?>
<!--
  有關如何配置 ASP.NET 應用程序的詳細信息，請訪問
  http://go.microsoft.com/fwlink/?LinkId=152368
  -->
<configuration>
  <configSections>
    <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
    <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=4.4.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
    <section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false" />   </configSections>
  <appSettings>
    <add key="webpages:Version" value="1.0.0.0" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
    <authentication mode="Forms">
      <forms loginUrl="~/Account/LogOn" timeout="2880" />
    </authentication>
    <pages>
      <namespaces>
        <add namespace="System.Web.Helpers" />
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <add namespace="System.Web.WebPages" />
 <add namespace="Ext.Net" /> <!--<add namespace="Ext.Net.MVC"/>--> <add namespace="Ext.Net.MVC" />       </namespaces>
      <controls>
        <add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext" />       </controls>
    </pages>
    <profile defaultProvider="DefaultProfileProvider">
      <providers>
        <add name="DefaultProfileProvider" type="System.Web.Providers.DefaultProfileProvider, System.Web.Providers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" connectionStringName="DefaultConnection" applicationName="/" />
      </providers>
    </profile>
    <membership defaultProvider="DefaultMembershipProvider">
      <providers>
        <add name="DefaultMembershipProvider" type="System.Web.Providers.DefaultMembershipProvider, System.Web.Providers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" connectionStringName="DefaultConnection" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false" maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10" applicationName="/" />
      </providers>
    </membership>
    <roleManager defaultProvider="DefaultRoleProvider">
      <providers>
        <add name="DefaultRoleProvider" type="System.Web.Providers.DefaultRoleProvider, System.Web.Providers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" connectionStringName="DefaultConnection" applicationName="/" />
      </providers>
    </roleManager>
    <!--
            If you are deploying to a cloud environment that has multiple web server instances,
            you should change session state mode from "InProc" to "Custom". In addition,
            change the connection string named "DefaultConnection" to connect to an instance
            of SQL Server (including SQL Azure and SQL  Compact) instead of to SQL Server Express.
      -->
    <sessionState mode="InProc" customProvider="DefaultSessionProvider">
      <providers>
        <add name="DefaultSessionProvider" type="System.Web.Providers.DefaultSessionStateProvider, System.Web.Providers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" connectionStringName="DefaultConnection" />
      </providers>
    </sessionState>
 <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>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
 <modules runAllManagedModulesForAllRequests="true"> <add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net" /> </modules>  <handlers> <add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler" /> </handlers>   </system.webServer>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="3.0.0.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
  <entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlConnectionFactory, EntityFramework" />
  </entityFramework>
  <connectionStrings>
    <add name="DefaultConnection" providerName="System.Data.SqlClient" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-MvcApplication-20131212093541;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-MvcApplication-20131212093541.mdf" />
  </connectionStrings>
  <extnet theme="Gray" licenseKey="** Ext.NET LICENSE KEY HERE **" /> </configuration>

上面加粗斜體部分就是添加的部分。

3、配置view中的Web.config 如下：

<?xml version="1.0" encoding="utf-8"?>

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

  <appSettings>
    <add key="webpages:Enabled" value="false" />
  </appSettings>

  <system.web>
    <httpHandlers>
      <add path="*" verb="*" type="System.Web.HttpNotFoundHandler" />
    </httpHandlers>

    <!--
        在視圖頁面中啟用請求驗證將導致驗證在
        控制器已對輸入進行處理后發生。默認情況下，
        MVC 在控制器處理輸入前執行請求驗證。
        若要更改此行為，請對控制器或操作
        應用 ValidateInputAttribute。
    -->
    <pages validateRequest="false" pageParserFilterType="System.Web.Mvc.ViewTypeParserFilter, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" pageBaseType="System.Web.Mvc.ViewPage, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" userControlBaseType="System.Web.Mvc.ViewUserControl, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <controls>
        <add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" namespace="System.Web.Mvc" tagPrefix="mvc" />
      </controls>
    </pages>
  </system.web>

  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />

    <handlers>
      <remove name="BlockViewHandler" />
      <add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
    </handlers>
  </system.webServer>
</configuration>

4、修改Global.asax文件，代碼如下：

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;


namespace MvcApplication
{
    // 注意: 有關啟用 IIS6 或 IIS7 經典模式的說明，
    // 請訪問 http://go.microsoft.com/?LinkId=9394801

    public class MvcApplication : System.Web.HttpApplication
    {
        public static void RegisterGlobalFilters(GlobalFilterCollection filters)
        {
            filters.Add(new HandleErrorAttribute());
        }

        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            // Ignore all ext.axd embedded resource paths routes.IgnoreRoute("{extnet-root}/{extnet-file}/ext.axd"); 
            routes.MapRoute(
                "Default", // 路由名稱
                "{controller}/{action}/{id}", // 帶有參數的 URL
                new { controller = "Home", action = "Index", id = UrlParameter.Optional } // 參數默認值
            );

        }

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            // 默認情況下對 Entity Framework 使用 LocalDB
            Database.DefaultConnectionFactory = new SqlConnectionFactory(@"Data Source=(localdb)\v11.0; Integrated Security=True; MultipleActiveResultSets=True");

            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
        }
    }
}

紅色為重點，本人就是這句代碼沒有加到，琢磨了很久。（這樣就配置完成了）

下面的是測試是否可以使用

5、修改Views--Shared--_Layout.cshtml文件如下：

@using Ext.Net; @using Ext.Net.MVC; <!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" /> @RenderSection("headtag", false) </head>

<body> @(Html.X().ResourceManager()) @RenderSection("content", true) </body>
</html>

6、創建HomeController控制器並且創建Index視圖

視圖代碼如下：

@using Ext.Net;
@using Ext.Net.MVC;

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var X = Html.X();
}

@section headtag
{
    @(X.XScript().ScriptBlock(@"
        <script>
            var addTab = function (tabPanel, id, url, menuItem) {
                var tab = tabPanel.getComponent(id);

                if (!tab) {
                    tab = tabPanel.add({ 
                        id       : id, 
                        title    : url, 
                        closable : true,
                        menuItem : menuItem,
                        loader   : {
                            url      : url,
                            renderer : 'frame',
                            loadMask : {
                                showMask : true,
                                msg      : 'Loading ' + url + '...'
                            }
                        }
                    });

                    tab.on('activate', function (tab) {
                        #{MenuPanel1}.setSelection(tab.menuItem);
                    });
                }
            
                tabPanel.setActiveTab(tab);
            }
        </script>"
    ))
}

@section content
{
    @(X.Window()
        .Title("Adding tab")
        .Width(700)
        .Height(500)
        .Icon(Icon.Link)
        .Layout(LayoutType.Border)
        .Items(
            X.MenuPanel()
                .ID("MenuPanel1")
                .Width(200)
                .Region(Region.West)
                .Menu(m => { 
                    m.Add(X.MenuItem()
                            .Text("Ext.NET")
                            .OnClientClick("addTab(#{TabPanel1}, 'idClt', 'http://www.ext.net', this);"));
                    m.Add(X.MenuItem()
                        .Text("Ext.NET forums")
                        .OnClientClick("addTab(#{TabPanel1}, 'idGgl', 'http://forums.ext.net', this);"));
                    m.Add(X.MenuItem()
                        .Text("Sencha")
                        .OnClientClick("addTab(#{TabPanel1}, 'idExt', 'http://www.sencha.com', this);"));
                }),
                
            X.TabPanel()
                .ID("TabPanel1")
                .Region(Region.Center)
        )
    )
}

7、運行：谷歌瀏覽器輸入：http://localhost:2833/Home/Index

運行結果：

到此為止您已經可以在您的mvc3項目中使用EXT.NET了。

源代碼到時在上傳上去，敬請期待！