Home > Others

Practice of Hierarchical Architecture Based on. NET platform (11)-Implementation of presentation layer

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In this article, we will discuss the implementation of the presentation layer.

The presentation layer is the "face" of a system. No matter how good your system is designed, how beautiful the code is, and how scalable the system is, the end users are mostly exposed to the presentation layer. Therefore, the advantages and disadvantages of the presentation layer are crucial to the user's evaluation of the system. In general, the advantages and disadvantages of the presentation layer are as follows:

1. Beautiful. That is to say, the design is beautiful, and it can make people feel beautiful.

2. Easy to use. That is, they have a good user experience and are comfortable and comfortable to use.

The presentation layer design involves many non-technical issues, such as art, user psychology, etc. However, in this article, I will not be able to address these issues much, but my level is limited, the second is the content and {
Tagshow (Event)
} "> The relationship between the series is not very close. The presentation layer design will be discussed from the perspective of technical implementation.

Generally, the presentation layer has the following responsibilities:

1. Accept user input.

2. Present information to the user.

In general, it is the interaction with the user.

The presentation layer also has a variety of implementation technologies, such as Windows Forms (or even command line forms) in the C/S architecture ), in B/S architecture, Web pages are mainly used for implementation. In addition, after the emergence of Ajax technology {
Tagshow (Event)
} "> Synchronization {
Tagshow (Event)
} "> B/S architecture Implementation of the model and {
Tagshow (Event)
} "> Implementation of the B/S architecture of the asynchronous model. In this article, we will mainly discuss the presentation layer Implementation of the B/S architecture under the Synchronization Model, and the asynchronous model based on AJAX technology will be discussed in the next article.

In addition, when talking about the implementation of the presentation layer, you will surely think {
Tagshow (Event)
} "> Good MVC has become a classic model of presentation layer design. Struts on the J2EE platform and ASP. net mvc recently released by Microsoft both implement the MVC mode {
Tagshow (Event)
} "> Framework. But in order to highlight the focus of this series of articles-stratified, but also to take care of beginners. The MVC mode is not designed here, but the traditional ASP. NET programming model is used to design the presentation layer.

All the discussions will be centered on the "Administrator Logon" case. Next we will gradually implement the presentation layer design for administrator login.

1. design the interface

To implement this function, we must first have a web page. Shows the designed page: (time-consuming, too simple to create. Thank you)

Attachment: login.jpg

First, we need to create a new aspx file under the "Web" project, called login. aspx, which is the Web page logged on by the Administrator. The code for this file is as follows:

Login. aspx:

  1. 1 <% @ page Language = "C #" autoeventwireup = "true" codefile = "login. aspx. cs" inherits = "login" %>
  2. 2
  3. 3 <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. 4
  5. 5 <HTML xmlns = "http://www.w3.org/1999/xhtml">
  6. 6
  7. 7 <title> nguestbook-Administrator Logon </title>
  8. 8 <link href = "styles/common.css" rel = "stylesheet" type = "text/CSS"/>
  9. 9 <link href = "styles/login.aspx.css" rel = "stylesheet" type = "text/CSS"/>
  10. 10
  11. 11 <body>
  12. 12 <Form ID = "form1" runat = "server">
  13. 13 <Div id = "Container">
  14. 14 <Div id = "box">
  15. 15
  16. 16 <Table id = "forms" cellpadding = "0" cellspacing = "0">
  17. 17 <tr>
  18. 18 <TD> User name: </TD>
  19. 19 <TD> <asp: textbox id = "name" textmode = "singleline" runat = "server"> </ASP: textbox> </TD>
  20. 20 </tr>
  21. 21 <tr>
  22. 22 <TD> password: </TD>
  23. 23 <TD> <asp: textbox id = "password" textmode = "password" runat = "server"> </ASP: textbox> </TD>
  24. 24 </tr>
  25. 25 </table>
  26. 26 <Div id = "buttons">
  27. 27 <asp: button id = "Submit" runat = "server" text = "login" onclick = "submit_click"/>
  28. 28 <asp: button id = "cancel" runat = "server" text = "Rewrite" onclick = "cancel_click"/>
  29. 29 </div>
  30. 30 </div>
  31. 31 </div>
  32. 32 </form>
  33. 33 </body>
  34. 34
  35. 35

Copy code

As you can see, this file mainly involves the structure of various page elements, but their appearance is not defined. We noticed that two external {
Tagshow (Event)
} "> CSS file, where it defines the appearance. Among them, common.cssis the general appearance of the page, and login.aspx.css is the special appearance of this page.

This is a presentation layer design method I advocate. The concept of separation of structure and performance is similar to the current "standardized Webpage Design" (some people call it Div + CSS layout). The core idea is the same, but I am not so strict here, in addition, you can consider using the table layout where appropriate. My general method is as follows: In the aspx file, only {
Tagshow (Event)
} "> Stores the page structure. No Code related to appearance exists. In this way, the structure and performance can be separated.

In my project, there is a styles folder dedicated to storing CSS files. The code for the common.cssand login.aspx.css files is attached below:

Common.css

  1. 1 *{}{
  2. 2 margin: 0;
  3. 3 padding: 0;
  4. 4}
  5. 5
  6. 6h1, H2, H3, H4, H5, H6 {}{
  7. 7 font-size: 12px;
  8. 8}
  9. 9
  10. 10 # container {}{
  11. 11 width: 100%;
  12. 12}

Copy code

Login.aspx.css

  1. 1 # Box {}{
  2. 2 width: 40%;
  3. 3 margin: 200px auto;
  4. 4 Border: 3px solid #036;
  5. 5}
  6. 6
  7. 7h1 {}{
  8. 8 margin: 1px;
  9. 9 padding: 5px 0;
  10. 10 font-size: 14px;
  11. 11 color: # FFF;
  12. 12 Background: #036;
  13. 13 text-align: center;
  14. 14}
  15. 15
  16. 16 # forms {}{
  17. 17 margin: 20px auto;
  18. 18 font-size: 12px;
  19. 19 color: #036;
  20. 20}
  21. 21
  22. 22 # forms input {}{
  23. 23 margin: 10px;
  24. 24 border: 0;
  25. 25 Border-bottom: 1px solid #036;
  26. 26 width: 160px;
  27. 27}
  28. 28
  29. 29 # buttons {}{
  30. 30 margin-bottom: 20px;
  31. 31 text-align: center;
  32. 32}
  33. 33
  34. 34 # buttons input {}{
  35. 35 margin: 0 10px;
  36. 36}

Copy code

2. Representation Logic

The page is done, but the presentation logic is required for the page to function. The login logic is as follows: First, check whether the system administrator is based on the user name and password entered by the user (the system administrator has only one user name and password defined on the web. in config, the system administrator can add, modify, and delete common administrators.) If yes, the system administrator can store the corresponding information in the session and log on to the background management page as the system administrator. If not, check whether it is a common administrator. If yes, store the Administrator information in the session and return it to the home page as a general administrator. If not, a logon Failure prompt is displayed.

Of course, the identity control can be completed only by checking sessions on the background page and the home page. For example, when requesting a background page, you must check whether the corresponding information in the session is complete. If the information is incomplete, the page is not allowed to be accessed. On the home page, if the corresponding session item contains the information of the common administrator, it indicates that the current user is an administrator and the buttons such as modification, reply, and deletion should be displayed. Otherwise, the user is a tourist, these buttons are not displayed.

First {
Tagshow (Event)
} "> Configure the user name and password of the system administrator, open web. config, and add the following items under the <paiettings> node:

  1. <Add key = "administartorname" value = "admin"/>
  2. <Add key = "administartorpassword" value = "123456"/>

Copy code

It is obvious that the first one is the user name of the system administrator. Here it is set to "admin", the other one is the password, and it is set to "123456"

Generally, Web. config does not allow requests, so you do not have to worry about password leakage.

The business logged on by the common Administrator has been implemented at the business logic layer, and the presentation layer can be called directly. The system administrator's judgment, session operation check, and page Jump are all placed in the presentation layer. This set of logic is placed on the "Submit" button {
Tagshow (Event)
} "> In the Click Event of the control, the specific code is as follows:

Login. aspx. CS:

  1. 1 using system;
  2. 2 using system. Data;
  3. 3 using system. configuration;
  4. 4 using system. collections;
  5. 5 using system. Web;
  6. 6 using system. Web. Security;
  7. 7 using system. Web .{
    Tagshow (Event)
    } "> UI;
  8. 8 using system. Web. UI. webcontrols;
  9. 9 using system. Web. UI. webcontrols. webparts;
  10. 10 using system. Web. UI. htmlcontrols;
  11. 11 using nguestbook. entity;
  12. 12 using nguestbook. ibll;
  13. 13 using nguestbook. factory;
  14. 14
  15. 15 public partial class login: system. Web. UI. Page
  16. 16 {
  17. 17 protected void page_load (Object sender, eventargs E)
  18. 18 {
  19. 19
  20. 20}
  21. 21 protected void cancel_click (Object sender, eventargs E)
  22. 22 {
  23. 23 This. Name. Text = "";
  24. 24 This. Password. Text = "";
  25. 25}
  26. 26 protected void submit_click (Object sender, eventargs E)
  27. 27 {
  28. 28 string administratorname = configurationmanager. deleettings ["administartorname"];
  29. 29 string administratorpassword = configurationmanager. receivettings ["administartorpassword"];
  30. 30
  31. 31 // if it is a system administrator, log on to the background as a system administrator
  32. 32 If (this. Name. Text = administratorname & this. Password. Text = administratorpassword)
  33. 33 {
  34. 34 session ["Administrator"] = "Administrator ";
  35. 35 response. Redirect ("~ /Manage. aspx ");
  36. 36 return;
  37. 37}
  38. 38
  39. 39 // determine whether the account is a common administrator. If yes, log on to the Message book as an administrator; otherwise, the logon fails.
  40. 40 admininfo admin = bllfactory. createadminbll (). login (this. Name. text, this. Password. Text );
  41. 41 if (Admin! = NULL)
  42. 42 {
  43. 43 session ["admin"] = admin;
  44. 44 response. Redirect ("~ /Default. aspx ");
  45. 45}
  46. 46 else
  47. 47 {
  48. 48 response. Redirect ("~ /Error. aspx? Errmsg = Logon Failed ");
  49. 49}
  50. 50}
  51. 51}

Copy code

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
practice of programming example of blogging platform advantages of microservices architecture list of chromium based browsers practice of statistics 2nd edition function of web based application function of web based application

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More