ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- 送出表單 ( Submit Form )

在看到這篇教學，請先參考 Visual Studio 2012 安裝 Northwind 資料庫並建立 Entity Framework Database First ( .edmx ) 以及 ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- 基本配置、ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- 基本配置

在此利用北風資料庫 ( Northwind Database ) 做一個新增產品 ( Product ) 的頁面。

建立 Controller

注意下拉選單必須要和 Ext.data.JsonStore 資料結合。

先做下拉式選單資料來源的 Controller：

public IEnumerable<Suppliers> Get()
{
    return db.Suppliers.AsEnumerable();
}

...

public IEnumerable<Categories> Get()
{
    var categories = db.Categories.Include(x => x.Products);

    return db.Categories.AsEnumerable();
}

建立資料模型與內容

再來在 View 端宣告下拉是選單的資料模型以及資料內容 ( Category、Supplier )：

var storeCategories = Ext.create('Ext.data.JsonStore', {
    storeId: 'categories',
    fields: ['CategoryID', 'CategoryName'],
    proxy: {
        type: 'ajax',
        url: 'http://localhost/api/Categories/',
        reader: {
            type: 'json',
        }
    },
    autoLoad: true,
});

var storeSuppliers = Ext.create('Ext.data.JsonStore', {
    storeId: 'suppliers',
    fields: ['SupplierID', 'CompanyName'],
    proxy: {
        type: 'ajax',
        url: 'http://localhost/api/Suppliers/',
        reader: {
            type: 'json',
        }
    },
    autoLoad: true,
});

建立產品表單

接著就要做表單 ( form )，要加上驗證的話請參考ASP.NET MVC 4 WebApi 與 Extjs 的結合 -- 欄位驗證 ( Validation )。

var form = Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    collapseFirst: false,
    title: '新增產品資料',
    id: 'form',
    bodyPadding: '5 5 5 5',
    width: 500,
    fieldDefaults: {
        msgTarget: 'side',
        labelWidth: 120
    },
    defaults: {
        margin: '0 0 5 0',
    },
    plugins: {
        ptype: 'datatip'
    },
    defaultType: 'textfield',
    items: [
        {
            itemId: 'ProductNameId',
            name: 'ProductName',
            fieldLabel: '產品名稱',
            maxLength: 50,
            maxLengthText: '最大長度為 50 字元',
            allowBlank: false
        },
        {
            itemId: 'CategoryId',
            name: 'CategoryID',
            fieldLabel: '產品類別',
            xtype: 'combo',
            valueField: 'CategoryID',
            displayField: 'CategoryName',
            queryMode: 'local',
            store: storeCategories,
            emptyText: '請選擇產品類別',
            allowBlank: false
        },
        {
            itemId: 'SupplierId',
            name: 'SupplierID',
            fieldLabel: '貨運公司',
            xtype: 'combo',
            valueField: 'SupplierID',
            displayField: 'CompanyName',
            queryMode: 'local',
            store: storeSuppliers,
            emptyText: '請選擇貨運公司',
            allowBlank: false
        },
        {
            itemId: 'QuantityPerUnitId',
            name: 'QuantityPerUnit',
            fieldLabel: '單位數量',
            maxLength: 50,
            maxLengthText: '最大長度為 50 字元',
            allowBlank: true
        },
        {
            itemId: 'UnitPriceId',
            name: 'UnitPrice',
            fieldLabel: '單價',
            allowBlank: false,
            regex: /^[\$]?[\d]*(.[\d]+)?$/,
            regexText: '金額格式錯誤',
            maskRe: /[\d\$.]/,
        },
        {
            itemId: 'UnitsInStockId',
            name: 'UnitsInStock',
            fieldLabel: '單位庫存量',
            allowBlank: false,
            regex: /^[\d]*$/,
            regexText: '格式錯誤',
            maskRe: /[\d]/,
        },
        {
            itemId: 'UnitsOnOrderId',
            name: 'UnitsOnOrder',
            fieldLabel: '已訂購量',
            allowBlank: false,
            regex: /^[\d]*$/,
            regexText: '格式錯誤',
            maskRe: /[\d]/,
        },
        {
            itemId: 'DiscontinuedId',
            name: 'Discontinued',
            fieldLabel: '不再銷售',
            width: 400,
            xtype: 'radiogroup',
            vertical: false,
            allowBlank: false,
            items: [
                {
                    boxLabel: '是',
                    name: 'discontinued',
                    inputValue: 'true'
                }, {
                    boxLabel: '否',
                    name: 'discontinued',
                    inputValue: 'false'
                }
            ]
        },
    ],
    tools: [
       {
           type: 'save',
           // hidden: true,
           callback: function () {
               if (this.up('form').getForm().isValid()) {
                   $.ajax({
                       url: 'http://localhost:8090/api/Product/Post',
                       data: this.up('form').getForm().getValues(),
                       type: 'POST',
                       error: function () { alert('Error!!'); },
                       success: function () {
                           alert('Success!!');
                       }
                   });
               }
               console.log(this.up('form').getForm().getValues());
           }
       }
    ]
});

執行後如果不打上任何資料，會如同以下圖：

打上資料後送出：

程式中設定中斷點，就會看到資料皆有被傳遞：

最後資料庫就會新增此筆資料：