3. Magicodes. NET Framework path-Preview (1 ),

3. Magicodes. NET Framework path-Preview (1 ),
3. Magicodes. NET Framework path-Preview (1)

• Preface

In the twinkling of an eye, it has been more than two months. Brother has been fully fired (in his spare time and energy, and even gave up various private activities), so don't complain. Programming is like sailing against the water. During this period, on the one hand, the framework is constantly restructured and designed. On the other hand, the system has learned many new technologies and has also felt its powerful vitality.

So I have been feeling a lot over the past two months. I have spent more than two months in my spare time and energy, and have not played LOL or CF for more than two months ......

This article focuses on architecture:

 

Next, I will give a brief introduction to this framework.

First, let's start with the front-end introduction:

• Response layout UI

Background:

Other devices (for user experience, the background framework uses Iframe, which may cause some problems when accessing other devices ):

There is also a list page, but it is not time to change it to MVC.

 

Front-end:

• Modular On-Demand Loading

The front-end JS has written a part, but it is far from perfect. I hope that the front-end engineers can provide support, so that my focus will be better on the back-end architecture.

In the choice of JS, I finally chose excellent RequireJs, which has been used for a long time. It feels better than SeaJs, which is easier to use and easier to use.

First look at several demos, such as the login page:

Magicodes. js has made a lot of encapsulation, of course, to maximize productivity savings. The entire login mechanism is done by the above script, and of course it is also associated with MVVM. This is what we will introduce below.

Magicodes. js is the core library of the current front-end framework. Of course, it is still called not to be uploaded to the database. Many internal modules are also loaded on demand, such:

 

Window. magicodes. messager = {

ShowMessage: function (title, message, className, funcs ){

Var setting = {

Title: title,

Text: message,

Class_name: className

};

If (typeof (funcs )! = "Undefined "){

If (typeof (funcs. before_close )! = "Undefined ")

Setting. before_close = funcs. before_close;

If (typeof (funcs. after_open )! = "Undefined ")

Setting. after_open = funcs. after_open;

}

This. _ addGritter (setting );

},

ShowInfoMessage: function (title, message, funcs ){

This. showMessage (title, message, 'gritter-info gritter-light', funcs );

},

ShowErrorMessage: function (title, message, funcs ){

This. showMessage (title, message, 'gritter-error gritter-light', funcs );

},

ShowWarnMessage: function (title, message, funcs ){

This. showMessage (title, message, 'itter-warning gritter-light', funcs );

},

RemoveAll: function (){

Typeof ($. gritter )! = "Undefined" & $. gritter. removeAll ();

},

_ AddGritter: function (setting ){

Require (["jquery", "jquery. gritter"], function (){

$. Gritter. add (setting );

});

}

};

This is a pop-up message, such:

I will not talk about it here.

• MVVM

In the selection of MVVM framework, knockoutjs was selected. It is lightweight and flexible. It feels pretty good to use it.

For example, the logon page:

The login page is relatively simple, with the focus on navigation binding. I will show you a piece of information right away.

The functions shown in are developed in the traditional way. Recursive binding is indispensable (multi-level support), a bunch of JS controls, and a bunch of Business Code (I actually wrote code at the beginning, I changed it to the MVVM mode later, so I had a detour. Haha)

So how is it done now? The following code is used:

That is, my binding logic is out of the data model, and the front-end shows that I only need to modify this code. Is it really tough?

Then JS only needs to provide data. The background obtains the following JSON from WebAPI:

Then, under JS processing, generate the children attribute based on the parent-child relationship (convenient view binding ):

// Add a menu item

// Source data

// Current item

This. _ appendChildrenMenus = function (data, itemData ){

Var childrenNavs = $. grep (data, function (I ){

Return I. ParentId = itemData. Id;

});

If (childrenNavs. length> 0 ){

ItemData. children = childrenNavs;

$. Each (childrenNavs, function (I, v ){

V. _ active = ko. observable (false );

V. _ open = ko. observable (false );

Self. _ appendChildrenMenus (data, v );

});

}

};

The core code is as follows:

Is it convenient to use knockoutjs? In fact, knockoutjs is very good. In addition to this, knockoutjs can do a lot of convenient things, such as binding pages, binding lists, and binding forms. Here we will just list them and post them in detail, after all, there are still few knockoutjs instances.

Here is another paging template:

<Script id = "pagesTemplate" type = "text/html">

<Li class = "prev" data-bind = "css: {disabled: $ root. gridViewModel. currentPageIndex () <= 1}, click: function () {$ root. previousPage ();} ">

<A href = "#">

<I class = "ace-icon fa-angle-double-left"> </I>

</A>

</Li>

<! -- Ko foreach: $ root. gridViewModel. pages -->

<Li data-bind = "css: {active: $ data = $ root. gridViewModel. currentPageIndex ()} "> <a href =" # "data-bind =" text: $ data, click: function () {$ root. gridViewModel. currentPageIndex ($ data);} "> </a> </li>

<! --/Ko -->

<Li class = "next" data-bind = "css: {disabled: $ root. gridViewModel. currentPageIndex ()> = $ root. getTotalPages ()}, click: function () {$ root. nextPage ();} ">

<A href = "#">

<I class = "ace-icon fa-angle-double-right"> </I>

</A>

</Li>

</Script>

Let's introduce the front-end first. We look forward to the participation of front-end engineers. Let's work together to build the Magicodes front-end framework.

Now let's talk about the background framework:

• Plug-in architecture

For example, this is the current project structure.

View pages, controllers, policies, data models, services (including webapis and Odata) all exist as plug-ins.

Here, the Service plug-in is very different from the traditional layer. The Service components here focus on the Web interfaces provided by WebApi and Odata.

• MVC

Currently, WebForm support has been removed. Hey.

Note: All configuration views and controllers of configuration management are automatically generated using the T4 template. This topic is described below.

• ASP. NET Identity and OAuth

Magicodes. NET supports ASP. NET Identity and OAuth protocols. without writing a line of code, you can easily integrate QQ, Microsoft, Google, Facebook, Twitter, and other OAuth interfaces.

More...

• WebAPI

I have also designed a set of webapis, and now I have removed the support for this API. It is encapsulated based on Microsoft's WebAPI. I like WebAPI from the beginning. Without a doubt, her future achievements will be limitless. Here is a brief introduction:

For example, the website information configuration page you just saw has the following WebAPI:

Here it is obvious that a set of Web methods based on the REST protocol standards. Webapis do not have to be designed based on the REST Protocol. They are only recommended.

Get, Post, Put, and Delete (the configuration file cannot be deleted here), which is a standard Web method of the Rest protocol. First-class companies should stick to the standards. Don't think that standards are far away from us. If you don't hug us, can people take the initiative?

First introduce the REST protocol,Representative State transmission (REST) has been widely accepted in the Web field. It is based on the SOAP and Web Service Description Language (WSDL) web services. Key evidence of this change in interface design is the adoption of REST by mainstream Web 2.0 service providers (including Yahoo, Google, and Facebook, these providers discard or discard Interfaces Based on SOAP and WSDL, and adopt a more user-friendly and resource-oriented model to publish their services.

By the way.REST requires developers to explicitly use the HTTP method and use it in the same way as the Protocol definition. This basic REST design principle establishes a one-to-one ing between create, read, update, and delete, and CRUD operations and HTTP methods. Based on this ing:

• To create resources on the server, use the POST method.
• To retrieve a resource, use the GET method.
• To change the resource status or update it, use the PUT method.
• To DELETE a resource, use the DELETE method.

 

Why did I say that WeAPI is so powerful? It is because the previous WebServices, SOAP, and other interfaces are no longer able to meet the existing use cases. Most of the time, our interface content depends on what terminal outputs, just like what people say. Once you see the Html call, just give him the JSON. C # and Java client calls, and then return the XML for him to play well. MongoDB also needs to play, just give him BSON. What else is not supported? Defined by yourself. In short, programmers are relieved that we don't need to do anything to support the new platform. We do not need to maintain multiple sets of code. How Happy it is. Of course, what is returned is determined by the HTTP Accept Header.

Let him return the JSON

He just returned the JSON:

Let him return XML, and he will return XML:

The above is only an example of adding, modifying, and querying. The following is an example of obtaining a navigation menu:

// Get/api/Menus

/// <Summary>

/// Obtain the current menu item of the user

/// </Summary>

/// <Returns> </returns>

Public IHttpActionResult Get ()

{

Var userId = User. Identity. GetUserId ();

Var menus = from link in db. MenuLinks

Where

! Link. IsDelete &&

Link. Roles. Any (p => db. Users. FirstOrDefault (p1 => p1.Id = userId). Roles. Any (p2 => p2.RoleId = p. Id ))

Select link;

Return OK (menus );

}

Now, let's talk about it. Continue with the following:

• T4 and code generation

An important idea of Magcodes. NET is efficient development, so code generation is indispensable.

I used to play CodeSmith, but now I think T4 is really much easier than CodeSmith. Magcodes. NET has created many T4 templates to minimize coding. Here is an example:

For example, the configuration interface shown below, including the background information configuration and mailbox information configuration, is generated from View to WebAPI, and no manual code is required.

How to generate it? Let's take a look at the related part of the T4 template for generating the View (which will not be described here ):

Later I will write a special article to introduce Magicodes. NET generated using T4 templates. According to my ideas, code will be generated much more than that in the future.

 

• Conclusion

I will introduce it here today. It will take a lot of time to write this article. Tired ha. There are some other things. Let's go back to the next article:

• OData and add, delete, modify, and query
• T4 & add, delete, modify, and query
• Routing System
• Configuration Management
• Event Management
• SignalR
• Code First and Code-based migration
• Log and monitoring
• Background Control
• ... ...

 

The code is constantly changing, so the latest version cannot be released at any time, because the current version is not stable enough, please be considerate. Once the stable version is released, I will provide the download immediately.

In addition, I also hope that interested partners can participate in the process. According to my plan, there are still many tasks to be completed, such:

Sometimes the human resources are poor. After all, a person has limited energy, and my main energy has to be switched around the framework. If you are interested and have time, please join us.

Many modules have not been fully developed or are not well-developed. I have limited energy and will focus on the framework for some time. I hope that some friends of the business module and front-end can help improve the service.

Please follow my official website-http://www.magicodes.net.

In addition, Magicodes. NET will provide an application example: the official website and blog community (the blog is Down at will, but the function is not what I want). If you are interested, you can join.

The official website has used this framework for re-development, so the previous registration data has been lost. Sorry for the inconvenience caused. After this test, we recommend that you bind your QQ number. If you cannot log on Via QQ, it indicates that the interface has not been approved. Please wait.

 

Finally, I will share a poem that I felt occasionally some time ago, although it is still the previous one:

 

Xia Xue

 

You are a maverick snowflake

This suddenly appeared in the clear sky of the city.

Ice Crystal appearance, white Luo skirt

It seems that your beauty is blooming throughout the hot sun

 

I am just a passthrough in this city

All at once

You slowly floated down, and finally melted into my palm

You gave me all the splendor in your life

But I am a passthrough

 

Maybe you shouldn't be in this fierce clear sky

Maybe I shouldn't walk in this noisy city.

Only,

I don't know how this moment is met, but for the sake of its eternity

 

Testimonial: a dream is always as beautiful as a snowflake but delicate and fragile, and the pursuit of a dream is like a fairy. If your faith is not persistent enough, you can't even see it in the flash. Although it is now "hot summer", as long as you are persistent, Xia Xue will not achieve winter.

How does aspnet bring up a layer on the Framework page (frameset )?

A layer is displayed?
You can use the modal box directly!
Bytes
<Script>
Function ShowHtml (){
Window. showModalDialog ("modal.htm", null, "dialogWidth = 200px; dialogHeight = 100px ");
}
</Script>

Button
<Input type = "button" value = "pop-up" onclick = "ShowHtml ()">

Create a webpage with a frame, a left frame, and a right frame. Then I want to drag a scroll bar to the entire frame set. How can I set the code?

Because the size of your framework is not set, if the page in your framework is too large, it cannot be displayed. One way is to set the size of the framework, make the page consistent with the page inside the page <iframe width = "800", height = "600"> </iframe>, and set the scroll bar so that it can be dragged, <iframe scrolling = "auto"> </iframe>