21, ". NET open source framework "EFW framework web front-end development of the directory structure and use of Firebug debugging methods

Back to the "open source" EFW Framework Series article index

EFW Framework Source code Download V1.2:http://pan.baidu.com/s/1hcnua

EFW Framework Instance source code download: Http://pan.baidu.com/s/1o6MAKCa

Preface: The core class library of EFW frame is explained in detail in the preceding chapters, the next chapter will explain the function of front end and interface layer in the framework, the front end is divided into two parts web front end and WinForm front end, the Web front-end is mainly used in the web system. is to write HTML code and JS code Development Web Interface, the framework recommends Jqueryeasyui as the interface framework, WinForm front-end in the WinForm (c/s) system and the WCF (C/S/S) system, using the DOTNETBAR2 control development Interface, Later, in order to meet the requirements of business functions, a set of their own custom controls was developed.

This chapter starts with the Web interface project, including the project directory structure and JS code to use Firebug how to debug, detailed analysis of each directory in the project including the code files and why so divided, what is the benefit;

This article highlights:

1. Complete directory structure description of the system

2.CONIFG Configuration file Directory

3.ModulePlugin Business Function Module Catalog

4.WebPlugin Interface Component Catalog

5. How to debug the system with Firebug

1. Complete directory structure description of the system

The development of a web system requires only two projects, including the books Project (logical layer Code) and the Efwweb project (interface layer code), Web Controller, ObjectModel, entity, and DAO code are placed in the books project, not split into projects separately Efwweb project mainly two parts, Modelplugin business module plug-in and Webplugin component plug-in;

Business interface code is placed in the Modelplugin directory, according to the module, the code file in the module is divided into the aspx file box js file, Modelplugin directory built in the framework of the basic functions, divided into the Rights Management, report management, message management and basic data;

Web Component functionality is placed in the Webplugin directory, broken down by components, and built into a number of commonly used components including jquery, Jqueryeasyui, Fusioncharts, Reportall, jquerymobile, etc. , you can put the Web components you collected or the development of your own in this directory, the business module to use the direct reference Web components of the JS file can be;

Overall why the project structure and file directory are designed so little, is to let us see the system source code First impressions feel very simple, clear, there will not be the kind of open solution to load dozens of projects, looking at the fear;

2.CONIFG configuration file directory

Web System configuration files in addition to the Config directory, the others are placed in the config directories, in order to facilitate the development of a separate Config folder in the solution, and all the Web system configuration files are added to this folder, so that we can easily find configuration files to make configuration changes;

which

1) A configuration file that is available in all Web systems, where there are several places worth noting;

2) entlib.config The configuration file of Microsoft Enterprise Library, this file generally does not need to be modified, only the database connection string needs to be configured;

3) Efwunity.config the configuration of dependency injection in Enterprise Library, according to the specific business object to configure;

3.ModulePlugin Business Function Module Catalog

The four business modules built into the EFW framework include:

1) Rights Management module, Userlogin and Rightmanager

2) Basic data module, Basedatamanager

3) Report Management module, Reportmanager

4) Message Management module, Sysmessage

With these modules, we will be able to build a new system of forming, and focus on the development of business functions; we'll look at the aspx file and the JS file in a business module, which is generally an interface file aspx corresponding to a script file js, aspx file content is the HTML tag implementation interface, JS files are JavaScript code using jquery as the main development method, mainly to implement the back table request data and display data;

4.WebPlugin Interface Component Catalog

There are some common Web components built into the EFW framework, including jquery, Jqueryeasyui, Fusioncharts, Reportall, Jquerymobile, and so on, the following articles will explain the use of these components in detail, or you can learn the information on the Internet first:

1) jqueryeasyui:http://www.jeasyui.com/

2) funsioncharts:http://www.fusioncharts.com/

3) reportall:http://www.reportall.com.cn/

4) jquerymobile;http://jquerymobile.com/

5. How to debug the system with Firebug

Finally, some problems of debugging JavaScript code with Firebug tool and using AJAX to request data from the background controller are introduced.

1) Firebug introduction , the individual has always felt that using the Firefox browser to do Web development debugging is very convenient, especially firebug very powerful, let me feel the same as the VS debugging tools; How to install it does not speak, very simple search on the internet to know When installed, a bug-like icon will appear, click on it to enable Firebug for debugging, such as:

See above three graphs, so that we can use the most three functions in the debugging process,

The First Picture: the console , which lists each request operation to the background, you can view the parameters sent by the request and the results received; see if the code sends a request to the background. See here to find the problem;

second Picture: HTM L, look at the page after the HTML code, the general code is very simple, but the debugging time to see very complex, many tags are generated dynamically by the interface framework, such as Jqueryeasyui; When you write an interface code, but the effect is not as you think, Then you need to use this function to see the resulting HTML lookup reason, because which label is not written, or the style is not called the wrong, etc.;

The third Picture: The Script , the page needs the JS file can be found in this function, debugging is here to break the point, step to run to see the value of the variable and the process of execution; debugging is similar to the VS tool;

2) below I will show you the function of debugging and modifying books for books instances.

We first hit a breakpoint in the Save Book Btn_save () method of the Book.js file in Firebug, and the Bookcontroller () method in the SaveBook file in the books project in the background vs tool also breaks the breakpoint;

Start Project Click the Book save button on the interface, breakpoint first executed in Firebug, press F10 step, run to Formsubmit method to send the HTTP request in the background, this time the breakpoint ran to the VS tool SaveBook method, Press F5 after the execution of the background SaveBook method, breakpoints and run to Firebug in the Formsubmit method, indicating that the HTTP request is complete, save the data successfully;

Note: If there is no access to the background SaveBook breakpoint, it is necessary to check the HTTP request address is correct, the project has a normal start load Webcontroller,webcontroller on the Add WebMethod custom label, This is all interlocking, more familiar with the familiar on the clear;

21, ". NET open source framework "EFW framework web front-end development of the directory structure and use of Firebug debugging methods