ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- 基本配置

在使用 Extjs 建置 View 端時，必須先引入 Extjs 的引擎檔案，位置在根目錄下的 ext-all.js ，另外必需引用主題 css，此會依照你挑選的主題 css 外觀上而有所不同，這部分的檔案在 /resources/ 下的目錄之中，套用個目錄內的 ext-theme-*-all.css 就可以開始使用 Extjs 了。

<!-- ExtJS -->
<script type="text/javascript" src="/Scripts/ext/ext-all.js"></script>

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/Scripts/ext/resources/ext-theme-neptune/ext-theme-neptune-all.css" />

1.

建置 View 端一開始要先寫一個 Controller 來啟動頁面，實際上是沒有內容的，例如：

在 View 建置 Ext/BaseControl.html 後在 Controller 建置一個 ExtController 內放一個 BaseControl() 只回傳 View()，基本上只需要讓他可以讀取就好了：

ExtController 內容為：

public class ExtController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult BaseControl()
    {
        return View();
    }
}

為什麼這麼麻煩？ 這是為了讓它保持在路由內，有主版頁面，還是可以使用 Razor，只是說在跨平台的環境中並沒有 Razor 可以使用，為了要快速套用到別的環境中，所以越是純 html 會比較好。

2.

在 Script 底下新增一個資料夾，暫名為 Example，之後所有範例的 JS 檔都開在此。

3.

建立一個 API 方便之後範例使用，建立資料模型可以參考 Visual Studio 2012 安裝 Northwind 資料庫並建立 Entity Framework Database First ( .edmx )，使用 employee 表輸出所有資料表：

public class EmployeeController : BaseApiController
{
    public IEnumerable<Employees> GetEmployees()
    {
        var employees = db.Employees;

        foreach (Employees employee in employees)
        {
            employee.Employees1 = null;
            employee.Employees2 = null;
        }

        return employees;
    }

    public string Get(int id)
    {
        return "value";
    }

}

而 API 的 URL 為：http://localhost/api/Employee/ 。

順便一提，方便管理所有 Controller 常用的函式和共用變數，必須建立一個 BaseApi：

public class BaseApiController : ApiController
{
    protected NORTHWNDEntities db = new NORTHWNDEntities();

    public BaseApiController()
    {
        db.Configuration.ProxyCreationEnabled = false;
    }

}

大致上基本配置就是這樣，如果還有缺之後會補上，之後的教學都會先照篇文章做初始配置。