One of the notes on the use of breeze.js+angular.js+kendoui+bootstrap+typescript+ef4.5

Chapter One: Data interaction

Reminder: the blog begins. Guidance. Don't like to spray casually.

Don't say anything, first.

The Kendoui official website has detailed API description, do not do too much cumbersome, in the use of the control as an example:

I. Dropdownlist,grid

The page is simple and decent, I personally prefer. Mainly speaking DropDownList and Gridonlineedit combined with angular and breezejs applications.

1.breeze.js

? function: Responsible for handling the front-end and back-end program communication.

Usage: Download Breeze package to official website. In the introduction of the page JS.

Add a Breeze.WebApi2.dll reference. Add the Breezecontroller attribute to the back-end controller.

[Breezecontroller (maxanyallexpressiondepth =2)]     Public classAppointmentscontroller:basecontroller {ReadOnlyEfcontextprovider<appointmentcontext> _contextprovider =NewEfcontextprovider<appointmentcontext>(); ReadOnlyEfcontextprovider<lookupcontext> _lookupcontextprovider =NewEfcontextprovider<lookupcontext>(); ReadOnlyEfcontextprovider<setupscreeningsitecontext> _sitecontextprovider =NewEfcontextprovider<setupscreeningsitecontext>(); ReadOnlyEfcontextprovider<lookupscreeningparametercontext> _screencentrecontextprovider =NewEfcontextprovider<lookupscreeningparametercontext>(); Transactionsettings transactionsettings=NULL; /// <summary>        ///Gets the context provider. /// </summary>        /// <value>        ///The context provider. /// </value>         PublicEfcontextprovider<appointmentcontext>Contextprovider {Get{return_contextprovider;} }        /// <summary>        ///Gets or sets the transaction settings. /// </summary>        /// <value>        ///The transaction settings. /// </value>         Publictransactionsettings transactionsettings {Get{returntransactionsettings;} 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 stringMetadata () {stringmetadata =string.            Empty; Try{metadata=_contextprovider.metadata (); returncontrollerhelper.attachdisplaynametometadata (metadata); }            Catch(Exception ex) {if( This. HandleException (ex)) {Throwex; }            }            returnmetadata; }

Breeze Background code example

   boolean): breeze.promises.ipromise<app.dataaccess.setups.screeningparametermodel.ientitycentre> {            var                . Entityquery. From ("Getscreeningcentreparametersbyid"  )                . Withparameters ({Centreid:centreid});             return  This . Manager.executequery (query)                 = =                {return data.results[0];}            );        }

JS data Query

Breaze.js syntax is similar to LINQ.

List Simple examples:

This.entityQuery.from ("data collection/Background method name"). Withparameters ("parameter 1, parameter 2,").

WHERE ("Query condition"). Orderbydesc ("sort Attribute"). Inlinecount ();

this.manager.executeQueryLocally (query)

This.manager.executeQuery (query)

is not very familiar. When this code is executed. Will go to the data to get the data. The manager is the entity defined by breeze in JS. Like the concept of EF.

Executequerylocally is the data that is queried in the cache. The default is to have the manager cache as long as the data being checked is present. ExecuteQuery will not slow down

Stored data. Every time you go to execute the background code, take it from the database.

Working principle:

When the user initiates the data request, the system will automatically find the corresponding controller to change the page. With the metadata () method, you get all the data structures you need and

Back to the front end.

(Note: If the first time is an update operation, no data structure, you must first perform a query operation, or you will get an error.) )

The data for all operations on the page is cached by the browser and then updated to the database via the SaveChanges method. The parameter "Jobject Savebundle" is a JSON object

。 All the structures and data previously obtained through metadata () will be inside. (Pros: Reduce code volume, Cons: Performance is a question.) and of course, you

You can select a stored procedure. As for the internal implementation of Breeze.WebApi2.dll, this section will be explained in detail later in this chapter.

Through this series of preparatory work. You can interact with the data.

2. Data display. Grid

Binding to the Kendo UI after getting the data is a matter of several parameter configurations. However, due to the use of breeze, the data structure of beeze entity is obtained.

form of JSON, not known by the schema of the Kendoui grid, I have to have a good relationship with you, you can help me. What to do, rewrite the schema, first become

Say what you know. Then there is the following paragraph:

 //#region Breeze Kendo grid extention MethodsPublic Createschema = (resourcename:string): any = {            varSchema:App.Shared.IBreezeKendoGridSchema ={total:function(data) {returnData.total;            }, model: {}}; Try {                varTypeobj = This. Service.domainManager.getTypeByResourceName (resourcename); } Catch(ex) {returnschema; }            varModel: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) {                    varmsg = "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) {varType = "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:pro            P.isnullable};            }); Schema.model=model; returnschema; }//#endregion

Createschema

After the facelift, according to the Kendo UI configuration, there is the following picture.

Note: Personally, the biggest advantage of this architecture is that it requires no data manipulation code from the business layer. Greatly reduce the amount of code. Improve the development efficiency. At the same time, because

Both the data manipulation code and the presentation layer are TYPESCRIPT implementations. Almost the entire station all the code, can easily copy. laboriously How many days and nights, a built

Copy all away.

One of the notes on the use of breeze.js+angular.js+kendoui+bootstrap+typescript+ef4.5