2014年1月26日 星期日

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

}




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

沒有留言 :

張貼留言

Related Posts Plugin for WordPress, Blogger...