關於Breeze.js+Angular.js+KendoUI+BootStrap+TypeScript+EF4.5的使用心得記錄之一

第一章：數據交互

 

提醒：博客開篇之作。望指導。不喜隨便噴。

什么也不說，先上圖。

就kendoui官網有詳細的API說明，不做過多累贅，以下圖中用到的控件為例:

 

一.DropDownList，Grid

   頁面簡潔得體，是我個人比較偏愛的。主要來講講DropDownList和GridOnLineEdit結合Angular和BreezeJs的應用。

 

   1.Breeze.js

     ☼功能：負責處理前端和后端程序的通訊。

     

        

  用法：到官網下載Breeze包。在頁面引入上圖中JS。

          添加Breeze.WebApi2.dll引用。 在后端控制器添加BreezeController特性。 

              

[BreezeController(MaxAnyAllExpressionDepth = 2)]
    public class AppointmentsController : BaseController
    {
        readonly EFContextProvider<AppointmentContext> _contextProvider = new EFContextProvider<AppointmentContext>();
        readonly EFContextProvider<LookupContext> _lookupContextProvider = new EFContextProvider<LookupContext>();
        readonly EFContextProvider<SetupScreeningSiteContext> _siteContextProvider = new EFContextProvider<SetupScreeningSiteContext>();
        readonly EFContextProvider<LookupScreeningParameterContext> _screenCentreContextProvider = new EFContextProvider<LookupScreeningParameterContext>();
        TransactionSettings transactionSettings = null;

        /// <summary>
        /// Gets the context provider.
        /// </summary>
        /// <value>
        /// The context provider.
        /// </value>
        public EFContextProvider<AppointmentContext> ContextProvider
        {
            get { return _contextProvider; }
        }

        /// <summary>
        /// Gets or sets the transaction settings.
        /// </summary>
        /// <value>
        /// The transaction settings.
        /// </value>
        public TransactionSettings TransactionSettings
        {
            get { return transactionSettings; }
            set { transactionSettings = value; }
        }

        /// <summary>
        /// Returns metadata string serialized from data context.
        /// </summary>
        /// <returns>string</returns>
        [AccessRightAuthorize(AccessRight.DEFAULT_SITE)]
        //[AccessRightAuthorize(AccessRight.APPOINT_READ)]
        [HttpGet]
        public string Metadata()
        {
            string metadata = string.Empty;
            try
            {
                metadata = _contextProvider.Metadata();
                return ControllerHelper.attachDisplayNameToMetadata(metadata);
            }
            catch (Exception ex)
            {
                if (this.HandleException(ex))
                {
                    throw ex;
                }
            }
            return metadata;
        }

 

   public getScreeningCentreById(centreId: number, forceRemote: boolean): breeze.promises.IPromise<App.DataAccess.Setups.ScreeningParameterModel.IEntityCentre> {
            var query = this.entityQuery
                .from("GetScreeningCentreParametersById")
                .withParameters({ centreId: centreId });

            return this.manager.executeQuery(query)
                .then((data) => {
                return data.results[0];
            });
        }

 

breaze.js的語法類似LINQ。

列舉簡單例子：

this.entityQuery.from("數據集合/后台方法名").withParameters("參數1，參數2，······").

                        where("查詢條件").orderByDesc("排序屬性").inlineCount();

this.manager.executeQueryLocally(query)

this.manager.executeQuery(query)

 

是不是非常眼熟。當執行這段代碼的時候。才會去數據拿數據。manager是breeze在JS中定義的Entity。類似EF的概念。

executeQueryLocally是查詢在緩存中的數據。默認只要查過的數據都會存在manager緩存中。executeQuery不會取緩

存數據。每次都會去執行后台代碼，從數據庫拿。

 

工作原理:

　　當用戶發起數據請求，系統會自動去找到改頁面對應的控制器。通過Metadata()方法，拿到所需要的所有數據結構並且

返回給前端。

    （注意:如果第一次是更新操作，沒有拿數據結構，則必須先執行查詢操作，否則會報錯。)

     頁面所有操作的數據會緩存瀏覽器然后通過SaveChanges方法更新到數據庫。參數"JObject saveBundle” 是JSON對象

     。之前通過Metadata()拿到的所有結構和數據都會在里面。(優點：減少代碼量，缺點：性能是個question.),當然，你也

     可以選擇存儲過程。至於Breeze.WebApi2.dll 的內部實現，這節我們后面的章節會詳細說明。

通過這一系列的准備工作。就可以進行數據交互了。

 

2.數據展示。Grid

    拿到數據之后綁定到Kendo Ui就是幾個參數配置的事情。但是，由於使用了Breeze，拿到的數據時beeze Entity的數據結構

    形式的JSON，不被KendoUI Grid的schema所認識，我得和你搞好關系，你才能幫我辦事。怎么辦，重寫Schema，先變成

    你認識的樣子再說。於是就有了下面這段：

  

 //#region Breeze kendo grid extention Methods  
        public createSchema = (resourceName: string): any => {
            var schema: App.Shared.IBreezeKendoGridSchema = {
                total: function (data) {
                    return data.total;
                },
                model: {}
            };
            try {
                var typeObj = this.service.domainManager.getTypeByResourceName(resourceName);
            } catch (ex) {
                return schema;
            }
            var model: App.Shared.IBreezeKendoGridModel = {
                fields: {},
                id: {}
            };
            if (typeObj.keyProperties) {
                if (typeObj.keyProperties.length == 1) {
                    model.id = typeObj.keyProperties[0].name;
                } else if (typeObj.keyProperties.length > 1) {
                    var msg = "Multiple-key ID not supported";
                    this.logError(msg, "createSchema");
                    //typeObj.keyProperties.forEach(function (keyProp) {
                    //    model.id[keyProp.name] = keyProp.name;
                    //});
                }
            }
            typeObj.dataProperties.forEach(function (prop) {
                var type = "string";
                if (prop.dataType.isNumeric) {
                    type = "number";
                }
                else if (prop.dataType.isDate) {
                    type = "date";
                }
                else if (prop.dataType.getName() == "Boolean") {
                    type = "boolean";
                }
                model.fields[prop.name] = {
                    type: type,
                    defaultValue: prop.defaultValue,
                    nullable: prop.isNullable
                };
            });
            schema.model = model;
            return schema;
        }
//#endregion

做完整容之后，按照Kendo UI官網配置來，就有了下面的圖片。 

備注：個人認為這套架構最大的優點就是無需業務層的任何數據操作代碼。大大的減少代碼量。提高了開發效率。與此同時，由於

        數據操作代碼和展示層都是TypeScript實現。幾乎全站所有的代碼，可以輕而易舉的Copy。辛辛苦苦多少個日夜，一建

        Copy全帶走。