asp.net/wingtip/UI和导航

　　ASP.NET Web窗体可以让web应用创建动态内容。静态网页的知识和HTML、CSS一模一样，区别在于ASP.NET网页包括了ASP.NET可以识别并处理的服务器端的内容。对于静态页面(.html)，服务器响应一个web请求，再把对应页面回传给浏览器。对于ASP.NET页面(.aspx文件)，.aspx文件是在web服务器上运行的一个程序。页面运行的时候，它可以完成任何的web请求，比如计算数值、读写数据库或者调用其他程序。当生成结果时，.aspx会动态地将之转换成网页语言来显示(比如html的元素<p><div>等等)，最后回传到浏览器。

一. 修改UI

1.1 熟悉页面

　　个人认为，对于UI界面的操作，是初次上手去了解一个web项目的相当好的切入点。在wingtip项目根目录下打开Default.aspx，可以看到一个相当简练的程序内容。对于.aspx我把它分成两部分：1)经典html元素 2)ASP元素。二者混合起来就成了一份.aspx文件。

首行内容：

<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>

　　"<%@ % >"，这是典型的ASP指令形式，其中包含 page、language、masterpagefile等选项。<%: Page.Title%>会解析成为html页面标签所显示的title属性内容。这些指令和选项用来告诉ASP.NET如何处理一个页面，但是指令本身不会作为浏览器显示的内容的一部分。在后续文章中会陆续提到不同指令，此处不展开也没必要单独详细说明。

html与asp的融合=aspx：

<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

        <h1><%: Title %>.</h1>

        <h2>Wingtip Toys can help you find the perfect gift.</h2>

        <p class="lead">We're all about transportation toys. You can order

                any of our toys today. Each toy listing has detailed

                information to help you choose the right toy.</p>

</asp:Content>

1.2 @Page指令

　　这是一个aspx页面最常使用的指令，允许配置多个选项：

　　　　1.编程语言(language)，如：c#；

　　　　2.服务器代码直接在当前页面编写(single-file page)或是在单独的类文件中编写(code-behind page)；

　　　　3.是否关联有MasterPage，决定当前页面是否为内容页；

　　　　4.调试与跟踪选项；

1.3 关于母版页

　　母版页是种一致性布局，也就是在不同页面切换时，保持不变的那部分样式布局。当用户请求一个页面时，asp.net会把母版页和内容页的内容融合，最终输出到浏览器，呈现给用户。比如要显示一个公司商标，那么就把它添加在母版页，这样切换到任何一个页面都会显示这个商标。

Site.Master页面:

 <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WingtipToys.SiteMaster" %>

 <!DOCTYPE html>

 <html lang="en">

 <head runat="server">

     <meta charset="utf-8" />

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

     <title><%: Page.Title %> - Wingtip Toys</title>

     <asp:PlaceHolder runat="server">

         <%: Scripts.Render("~/bundles/modernizr") %>

     </asp:PlaceHolder>

     <webopt:bundlereference runat="server" path="~/Content/css" />

     <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

 </head>

 <body>

     <form runat="server">

         <asp:ScriptManager runat="server">

             <Scripts>

                 <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>

                 <%--Framework Scripts--%>

                 <asp:ScriptReference Name="MsAjaxBundle" />

                 <asp:ScriptReference Name="jquery" />

                 <asp:ScriptReference Name="bootstrap" />

                 <asp:ScriptReference Name="respond" />

                 <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />

                 <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />

                 <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />

                 <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />

                 <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />

                 <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />

                 <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />

                 <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />

                 <asp:ScriptReference Name="WebFormsBundle" />

                 <%--Site Scripts--%>

             </Scripts>

         </asp:ScriptManager>

         <div class="navbar navbar-inverse navbar-fixed-top">

             <div class="container">

                 <div class="navbar-header">

                     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

                         <span class="icon-bar"></span>

                         <span class="icon-bar"></span>

                         <span class="icon-bar"></span>

                     </button>

                     <a class="navbar-brand" runat="server" href="~/">Wingtip Toys</a>

                 </div>

                 <div class="navbar-collapse collapse">

                     <ul class="nav navbar-nav">

                         <li><a runat="server" href="~/">Home</a></li>

                         <li><a runat="server" href="~/About">About</a></li>

                         <li><a runat="server" href="~/Contact">Contact</a></li>

                     </ul>

                     <asp:LoginView runat="server" ViewStateMode="Disabled">

                         <AnonymousTemplate>

                             <ul class="nav navbar-nav navbar-right">

                                 <li><a runat="server" href="~/Account/Register">Register</a></li>

                                 <li><a runat="server" href="~/Account/Login">Log in</a></li>

                             </ul>

                         </AnonymousTemplate>

                         <LoggedInTemplate>

                             <ul class="nav navbar-nav navbar-right">

                                 <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>

                                 <li>

                                     <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />

                                 </li>

                             </ul>

                         </LoggedInTemplate>

                     </asp:LoginView>

                 </div>

             </div>

         </div>

         <div id="TitleContent" style="text-align: center">

             <a runat="server" href="~/">

                 <asp:Image  ID="Image1" runat="server" ImageUrl="~/Images/logo.jpg" BorderStyle="None" />

             </a>

             <br />

         </div>

         <div class="container body-content">

             <asp:ContentPlaceHolder ID="MainContent" runat="server">

             </asp:ContentPlaceHolder>

             <hr />

             <footer>

                 <p>&copy; <%: DateTime.Now.Year %> - Wingtip Toys</p>

             </footer>

         </div>

     </form>

 </body>

 </html>

　　母版页是以.master为后缀的asp.net文件，其中预定义了括静态文本(text)、 HTML 元素(html elements)和服务器控件(server control)。母版页可以使用任何html和asp.net元素。此外，母版页有一个或多个ContenePlaceHolder控件，这些控件表示可以由内容页(content pages)替换的区域。

1.4 添加新的一页(.aspx)　

选择包含母版页的web窗体，新窗体就创建完成了。

1.5 修改默认导航选项

在下图所示的母版页中，上方导航栏分别链接至Home、About、Contact、Products：

新的导航链接如何添加？代码如下:

<ul class="nav navbar-nav">

    <li><a runat="server" href="~/">Home</a></li>

    <li><a runat="server" href="~/About">About</a></li>

    <li><a runat="server" href="~/Contact">Contact</a></li>

    <li><a runat="server" href="~/ProductList">Products</a></li> <!--此处为新添加ProductList链接-->

</ul>

1.6 增加类别的导航链接

现在要给页面增加一个根据类别导航的文字链接。这里使用到了一个asp.net控件，ListView。

在Site.Master添加如下代码:

<div id="TitleContent" style="text-align: center">

            <a runat="server" href="~/">

                <asp:Image  ID="Image1" runat="server" ImageUrl="~/img/logo.jpg" BorderStyle="None" />

            </a>

            <br />

        </div>

<!--此处为新添代码->

        <div id="CategoryMenu" style="text-align: center">

            <asp:ListView ID="categoryList"

                ItemType="WingtipToys.Models.Category"

                runat="server"

                SelectMethod="GetCategories" >

                <ItemTemplate>

                    <b style="font-size: large; font-style: normal">

                        <a href="/ProductList.aspx?id=<%#: Item.CategoryID %>">

                        <%#: Item.CategoryName %>

                        </a>

                    </b>

                </ItemTemplate>

                <ItemSeparatorTemplate>  |  </ItemSeparatorTemplate>

            </asp:ListView>

        </div>

　　ListView控件把每个文本处理为一个超链接，每个链接都指向ProductList.aspx，但是根据产品类别的不同，ListView控件都传递(query-string value)不同的类别ID，这样就实现了不同类别的产品显示。

　　通过在ListView控件中设置ItemType属性，ItemTemplate节点中的数据就可以通过data-binding方式来显示。(也就是绑定Category类中的字段，依次显示)。

二 . 服务器

2.1 Web服务器控件

服务器控件(server controls)使用ASP.NET的专有语法。控件的标记名称以asp:前缀开头，asp.net通过这种方法识别和处理这些控件。此外，控件中还包括runat="server"和ID等属性。在asp.net中，有许多服务器控件来渲染html页面。

2.2 服务器代码

asp.net web应用程序包含在处理页面时在服务器上运行的代码。服务器代码可以实现很多操作，比如向ListView控件中添加数据。

asp.net支持两种服务器代码的编写模式：1)single-file模式 2)code-behind模式。在code-behind模式中，codebghind属性指明了后台单独类文件的名称，inherits属性指明了前端页面在与后台交互时，所使用的类的名称。

三. 关于数据库的一些东西

3.1 将数据控件链接到数据库

当我们在前端页面和后台程序中把数据控件都做好了，数据从哪来？这是很自然的一个思路，那么我们接下来需要把控件和数据库相连接。

首先，在Site.Master.cs中添加两个命名空间，如下：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Linq;    //添加linq

using WingtipToys.Models;   //添加models(上一章创建好的)

接着，添加GetCategories()方法:

protected void Page_Load(object sender, EventArgs e)

{

}

//添加GetCategories()方法

public IQueryable<Category> GetCategories()

{

  var _db = new WingtipToys.Models.ProductContext();

  IQueryable<Category> query = _db.Categories;

  return query;

}

(注:此处方法的返回类型是一个接口IQueryable，c#的知识点，再学习)

ListView控件中的"SelectMethod"属性设置为GetCategories()方法，在页面周期运行的适当时间，页面会调用该方法，然后在数据区域绑定返回的数据。

3.2 操作数据库

在web.config文件中，对数据库的连接进行配置。

 <connectionStrings>

     <add name="DefaultConnection"

          connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-WingtipToys-20120302100502;Integrated Security=True"

          providerName="System.Data.SqlClient" />

     <add name="WingtipToys"

          connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\wingtiptoys.mdf;Integrated Security=True"

          providerName="System.Data.SqlClient " />

   </connectionStrings>

你可以看到AttachDbFilename连接字符串中的值，指向Web应用程序项目的DataDirectory。 |DataDirectory|是保留的值，表示工程目录下的App_Data文件夹。

早前我们创建了ProductDataBaseinitializer类，并且在global.asax.cs中的Application_Start()方法里调用了这个类，那么在程序第一次运行时，就会生成数据库的内容，因为在global.asax.cs中的Application_Start()方法是在程序启动时调用的。调用以后，程序会创建一个名为wingtiptoys.mdf的数据库文件，存储在App_Data文件夹中。

四. 总结

这一章捋了捋UI界面、导航操作、数据库。最具有asp.net风格的代码编写应该是在处理导航的那一部分，用到了数据控件(Data Control，也叫服务器控件Server Control)，通过这类控件程序可以跟后台进行数据、方法的交互，最终在浏览器给用户呈现一个完整的页面。

asp.net/wingtip/UI和导航的更多相关文章

asp.net/wingtip/显示数据和详细信息
前边我们的工作处于wingtip工程基础建设阶段,先是建立了“数据访问层”,然后设计建设了“UI和导航”的框架,接下来要充实工程的内容,显示“数据和详细信息”. 一. 添加数据控件(Data Cont ...
IOS开发UI篇—导航控制器属性和基本使用
IOS开发UI篇—导航控制器属性和基本使用一.导航控制器的一些属性和基本使用 1.把子控制器添加到导航控制器中的四种方法 (1) 1.创建一个导航控制器 UINavigationController ...
ASP.NET EF 延迟加载，导航属性延迟加载
ASP.NET EF 延迟加载,导航属性延迟加载 EF(EntityFramework)原理:属于ORM的一种实现通过edmx文件来查看三部分:概念模型,数据模型,映射关系,上下文DbConte ...
ASP.NET的面包屑导航控件、树形导航控件、菜单控件
原文:http://blog.csdn.net/pan_junbiao/article/details/8579293 ASP.NET的面包屑导航控件.树形导航控件.菜单控件. 1. 面包屑导航控件— ...
ASP.NET Web Forms - 网站导航(Sitemap 文件)
[参考]ASP.NET Web Forms - 导航 ASP.NET 带有内建的导航控件. 网站导航维护大型网站的菜单是困难而且费时的. 在 ASP.NET 中,菜单可存储在文件中,这样易于维护.文 ...
ASP.NET四种页面导航方式之比较与选择
一.超级链接从一个表单进入另一个表单最简单的方式是使用HTML超级链接控件.在Web表单中,使用超级链接的HTML代码类如: <a href="WebForm2.aspx" ...
ASP.MVC EASY UI 入门之 —— Tree & ComboTree
1.常规的EASY UI的tree和comboTree代码基本是官方的DEMO都有的,虽然很简单,但是还是要实践的做一次,才能更清晰的了解和使用它!先上效果图因为用的是code first,所以数据 ...
iOS7 UI兼容导航栏按钮边框 UINavigationItem left and right padding
iOS7之前的UI为: 而在iOS7中,由于设计方面的原因,使得UI变为: 修改的方法重写UINavigationItem的setLeftBarButtonItem和setRightBarButton ...
(转)iOS7界面设计规范(5) - UI基础 - 导航
通过分页控件(page control)来暗示多个条目或内容视图的存在.该控件可以有效的向用户展示内容单元的数量,以及当前所见的这一条在队列中的位置.请参考分页控件一节,了解更多详情. 注意:虽然工具 ...

随机推荐

CASE WHEN 高阶用法?
两个表做关联时,以左表为准,若左表某列不为空,则与右表对应列进行关联匹配,为空则不做匹配. 以上做法,有一种说不出来的感觉,不管怎样,问题是解决了. 如有更好的解决思路,请留言告知,不甚感激!
Dora.Interception，为.NET Core度身打造的AOP框架 [2]：以约定的方式定义拦截器
上一篇<更加简练的编程体验>提供了最新版本的Dora.Interception代码的AOP编程体验,接下来我们会这AOP框架的编程模式进行详细介绍,本篇文章着重关注的是拦截器的定义.采用“ ...
[Swift]LeetCode401. 二进制手表 | Binary Watch
A binary watch has 4 LEDs on the top which represent the hours (0-11), and the 6 LEDs on the bottom ...
[Swift]LeetCode530. 二叉搜索树的最小绝对差 | Minimum Absolute Difference in BST
Given a binary search tree with non-negative values, find the minimum absolute difference between va ...
[Swift]LeetCode725. 分隔链表 | Split Linked List in Parts
Given a (singly) linked list with head node root, write a function to split the linked list into k c ...
[Swift]LeetCode790. 多米诺和托米诺平铺 | Domino and Tromino Tiling
We have two types of tiles: a 2x1 domino shape, and an "L" tromino shape. These shapes may ...
zuul网关入门（一、网关具有的功能）
1. zuul网关入门(一.网关具有的功能) 1.1. 基本场景 1.1.1. API网关的由来 1.1.2. API网关基本功能 1.2. 高级应用 1.2.1. 亮点可动态发布的过滤器机制 1. ...
SpringCloud微服务架构
1.Eureka承载大规模系统每天千万级访问的原理 1).首先每个服务的eureka client组件默认30秒发送一个请求到eureka server拉取最近有变化的服务信息: 2).eureka还 ...
Vmware安装Ubuntu ==> 连网成功
由于工作需要,得把NS3安装到内网服务器中,大家知道这个是不能连接外网的,学校又没有Ubuntu高校源.NS3要先安装一大堆的依赖,让人头痛的是在内网里有没发以终端指令形式安装,针对这种麻烦,找到两个 ...
在admui中怎样上传本地文件？
1.首先需要引入一些插件 css: <link rel="stylesheet" href="/vendor/blueimp-file-upload/jquery. ...

asp.net/wingtip/UI和导航

asp.net/wingtip/UI和导航的更多相关文章

随机推荐

热门专题