彩世界开奖app官网-彩世界平台官方网址(彩票平台)
做最好的网站
来自 前端技术 2019-11-28 11:53 的文章
当前位置: 彩世界开奖app官网 > 前端技术 > 正文

jquery发起get/post请求_或_获取html页面数据彩世界平

 

二、使用布局页面统一风格[Creating a Consistent Look Using Layout Pages]

彩世界平台官方网址,  到目前为止,您已经看到了很容易就实现了多个页面中包含相同内容。创建统一风格站点更具结构化的方法是使用布局页面。一个布局页定义了Web页面的结构,但是并不包含任何实际内容。当您创建了一个布局页之后,您可以编写包含内容或联合布局页的Web页面(?)。这些页面也会按布局页统一格式化显示。(在这个意义上,布局页实际是利用定义在其他页面中的内容提供一种模板。)

  这种布局页除了包含对RenderBody()方法的调用,就像大多数HTML页面。布局页面中RenderBody()方法的位置确定了将来包含内容页面中信息的位置。

  下图展示了运行的时候内容页面和布局页面是如何合并,并生成最终页面的。浏览器请求内容页时,内容页有代码声明了其应用的布局页面,并应用该布局页面的结构。在布局页面中,内容页的信息都会插入到RenderBody方法调用的位置。通过调用RenderPage()方法,内容块也可以插入到布局页面中,就像上一节中的示例一样。

彩世界平台官方网址 1

  接下来演示如何创建一个布局页并将内容页整合进去。

  1. 在Shared文件夹下创建一个_Layout1.cshtml的文件。
  2. 用以下代码替换其中所有内容:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Structured Content </title>
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        @RenderPage("~/Shared/_Header2.cshtml")
        <div id="main">
          @RenderBody()
        </div>
        <div id="footer">
          &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
        </div>
      </body>
    </html>
    

    在布局页面中使用RenderPage()方法插入内容块。一个布局页面只能包含调用一次RenderBody()方法。

  3. 在Shared文件夹下,创建一个_Header2.cshtml的文件并用以下内容替换之:

    <div id="header">Creating a Consistent Look</div>
    
  4. 在根目录下,创建一个Styles文件夹。

  5. 在Styles文件夹下,创建Site.css文件并添加以下样式定义: 彩世界平台官方网址 2彩世界平台官方网址 3

    h1 {
        border-bottom: 3px solid #cc9900;
        font: 2.75em/1.75em Georgia, serif;
        color: #996600;
    }
    
    ul {
        list-style-type: none;
    }
    
    body {
        margin: 0;
        padding: 1em;
        background-color: #ffffff;
        font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
        color: #006600;
    }
    
    #list {
        margin: 1em 0 7em -3em;
        padding: 1em 0 0 0;
        background-color: #ffffff;
        color: #996600;
        width: 25%;
        float: left;
    }
    
    #header, #footer {
        margin: 0;
        padding: 0;
        color: #996600;
    }
    

    View Code

  6. 在根目录下,创建Content1.cshtml文件并用以下内容替换:

    @{
        Layout = "~/Shared/_Layout1.cshtml";
    }
    
    <h1> Structured Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</p>
    

    这就是一个应用了布局页面的页面。页面顶部的代码块指示了将应用哪一个布局页面来格式化这些内容。

  7. 在浏览器中运行Content1.cshtml,这个渲染的页面使用了定义在_Layout1.cshtml的格式、样式表和定义在Content1.cshtml中的文本(内容)。彩世界平台官方网址 4

    您还可以重覆第6步创建共享了相同布局页面的内容页面。

2、设计导航信息
nav元素是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进nav元素,只需要将主要的、基本的链接组放进nav元素即可。
使用场景:
(1)传统导航条。常规网站都设置有不同层级的导航条,其作用是将当前画面跳转到网站的其他主要页面上去;
(2)侧边栏导航。现在主流博客网站及商品网站上都有侧边栏导航,其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去;
(3)页内导航。页内导航的作用是在本页面几个主要的组成部分之间进行跳转;
(4)翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。

 

一、布局页面介绍[About Layout Pages]

  很多网站有些内容需要显示在各个页面中,比如Header,Footer或者告诉用户已经登录的部分。ASP.NET允许你创建一个单独的文件来包含文本、标签和代码的内容块,从而搭建一个风格整齐的网站。接下来你就可以将这个内容块插入到任何你想要让它展示的页面中。采用这种方法您不需要将这部分内容在各个页面中复制粘贴。由于创建了公共内容,也使您的更新维护更加简单。如果你需要修改这些内容,只需更新一个文件即可,这个修改操作但会反映到所有你应用了此内容的页面。

  下面展示了内容块是如何工作的。当一个web服务器请求一个页面时,ASP.NET便会将内容块插入到RenderPage方法被调用的地方。最终合并的页面就会被发送到浏览器。

 

彩世界平台官方网址 5

  接下来这个过程中,您将会创建一个包含两个内容块(一个Header和一个Footer)的页面,这些内容块是单独存在在不同文件中的。您也可以在网站中的任何页面中使用这些内容块。操作完成之后,您将会得到一个类似效果:

彩世界平台官方网址 6

  1. 在网站的根目录下,创建一个名为Index.cshtml的文件。
  2. 用以下内容替换文件默认生成的所有内容:
     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <title>Main Page</title>
     5   </head>
     6   <body>
     7     <h1>Index Page Content</h1>
     8     <p>This is the content of the main page.</p>
     9   </body>
    10 </html>
    

  

  3.  在根目录下,创建一个Shared文件夹。

注:在Web页面中通常将存在公共页面文件的文件夹命名为Shared。

  4.  在Shared文件夹下,创建一个_Header.cshtml视图文件。

    5.  用以下内容替换之:

<div class="header">This is header text.</div>

         注意文件_Header.cshtml是以下划线(_)为前缀的。如果一个页面的名字以下线线开头,ASP.NET则不会将其发送到浏览器。从而阻止人们向这些页面直接发起的请求。因为您并不真的希望用户请求这些页面—他们的存在只是作为插入到其他页面的,所以用下划线前缀为这些内容块页面命名是一个很好的主意。

  6.  在Shared文件夹中,创建_footer.cshtml视图文件,并替换为以下内容:

<div class="footer">&copy; 2012 Contoso Pharmaceuticals. All rights reserved. 
</div>

  7. 在Index.cshtml页面中,调用两次RenderPage()方法,如下所示:

<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

    @RenderPage("~/Shared/_Header.cshtml")

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

    @RenderPage("~/Shared/_Footer.cshtml")

  </body>
</html>

  以上展示了如何在一个web页面中添加内容块。调用RenderPage()方法并传入您希望插入内容的文件名。在这个示例中,您正在将_Header.cshtml和_Footer.cshtml文件中的内容插入到Index.cshtml文件中。

  8. 在浏览器中运行Index.cshtml页面。

  9. 在浏览器中,查看页面源代码。(例如,IE中,右建->点击查看源[View Source])。

  您会看到合并了Index页面标签和内容块(_Header.cshtml和_Footer.cshtml)之后,发送到浏览器的整个页面。下面的示例展示了Index.cshtml渲染之后的源代码。您添加到Index.cshtml中的RenderPage()方法调用被替换成了header和footer文件中实际内容。

彩世界平台官方网址 7彩世界平台官方网址 8

<!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

  <div class="header">
    This is header text.
  </div>

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

  <div class="footer">
    &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
  </div>

  </body>
</html>

View Code

 

3、标识文章
article元素用来表示文档、页面中独立的、完整的、可以独自被外部引用的部分。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件等。
一个article元素通常有它自己的标题,一般放在header元素里面,有时还有自己的脚注。
当article嵌套使用的时候,内部的article元素内容必须和外部article元素内容相关。
article元素支持HTML5全局属性。

// Ajax模拟类
var Ajax = function () {
    //一般处理程序名称
    this.handlerName = "";
    //方法名称
    this.actionName = "";
    //传入的参数对象
    this.data = {};
    //回调函数
    this.rollBack = function (result) { };

    this.Init = function (handlerName, actionName, dataObject, rollBack) {
        this.handlerName = handlerName;
        this.actionName = actionName;
        this.data = dataObject;
        this.rollBack = rollBack;
        return this;
    };
    //Get请求
    this.Get = function () {
        $.ajax({
            type: "GET",
            url: "/ajax/"   this.handlerName   ".js?action="   this.actionName,
            data: this.data,
            async: true,//false代表只有在等待ajax执行完毕后才执行
            success: function (json) {
                try {
                    result = JSON.parse(json);
                } catch (e) {
                    result = new Function("return "   json)();
                }
                if (window.Ajax.rollBack && window.Ajax.rollBack instanceof Function) {
                    window.Ajax.rollBack(result);
                }
            },
            error: function (e) {
                console.log(e);
            }
        });
    };
    //获取请求地址的HTML内容(获取html的地址,select选择器)
    this.GetHtml = function (getHtmlUrl, jquerySelectDom) {
        $.ajax({
            type: "GET",
            url: getHtmlUrl,
            data: "",
            dateType: "html",
            //false代表只有在等待ajax执行完毕后才执行
            async: false,
            success: function (data) {
                if (jquerySelectDom != "") {
                    var $data = $(data);
                    //由于$data是个集合,得到的是所有一级节点的jquery集合,所以,先从一级集合中找,再从所有子元素中找
                    var $result = $data.next(jquerySelectDom);
                    if ($result.length == 0) {
                        $result = $data.find(jquerySelectDom);
                    }
                    var resultHtml = "";
                    if ($result.length > 0) {
                        resultHtml = $result.html();
                    }
                    return resultHtml;
                } else {
                    return data;
                }
            }
        });
    };
    //普通Post请求
    this.Post = function () {
        $.ajax({
            type: "POST",
            url: "/ajax/"   this.handlerName   ".js?action="   this.actionName,
            data: this.data,
            //false代表只有在等待ajax执行完毕后才执行
            async: true,
            success: function (json) {
                try {
                    result = JSON.parse(json);
                } catch (e) {
                    result = new Function("return "   json)();
                }
                if (window.Ajax.rollBack && window.Ajax.rollBack instanceof Function) {
                    window.Ajax.rollBack(result);
                }
            },
            error: function (e) {
                console.log(e);
            }
        });
    };
    //模拟Form表单请求-参数为FormData对象
    this.FormPost = function () {
        $.ajax({
            type: "POST",
            url: "/ajax/"   this.handlerName   ".js?action="   this.actionName,
            data: this.data,
            //false代表只有在等待ajax执行完毕后才执行
            async: true,
            processData: false,
            contentType: false,
            success: function (json) {
                try {
                    result = JSON.parse(json);
                } catch (e) {
                    result = new Function("return "   json)();
                }
                if (window.Ajax.rollBack && window.Ajax.rollBack instanceof Function) {
                    window.Ajax.rollBack(result);
                }
            },
            error: function (e) {
                console.log(e);
            }
        });
    };
};
window["Ajax"] = new Ajax();

四、使用内容部分可选参数[Making Content Sections Optional]

  通常,您在一个内容页面中创建的部分必须完全匹配在布局页面中定义的部分。只要下列任一条件发生,您都将得到一个错误:

l  内容页面中包含一个在布局页面中无相应部分的部分。

l  布局页面中包含一个部分,但是没有内容。

l  布局页面中包含尝试将同一部分渲染超过一次的方法调用。

  然而,您可以在布局页面中为命名部分申明为可选来重写这些行为。从来使您定义多个共享同一布局页面的内容页,且它为一个具体部分可以也可不用提供内容。

  1. 打开Content2.cshtml文件并删除以下部分:

    @section header {

    }

  2.  保存页面并在浏览器中运行。因为内容页面没有为已命名的header部分提供内容部分。

彩世界平台官方网址 9
  3.  在Shared文件夹中,打开_Layout2.cshtml页面并替换掉以下内容:

@RenderSection("header")

  使用以下代码:

@RenderSection("header", required: false)

  使用为替代,也可以使用以下代码块替换,产生相同的结果:

@if (IsSectionDefined("header")) {
    @RenderSection("header")
}

  4.  在浏览器中再次运行Content2.cshtml.这次即使页面没有header,依然会正确显示。

6、标题分组
hgroup元素可以为标题或者子标题进行分组,通常它与h1-h6元素组合使用,一个内容块中的标题及其子标题可以通过hgroup元素组成一组。

备注:我们经常会遇到使用jquery获取某个地址下的部分页面内容,然后替换当前页面对应内容,也就是:局部刷新功能。

五、布局页面传值[Passing Data to Layout Pages]

  您可能会在内容页面中定义一系列数据,需要传递到布局页面中。如果是这样,您就需要从内容页面传递这些数据到布局页面中。例如,您可能希望显示用户的登录状态,又或者希望基于用户输入显示或隐藏内容块。

  为了能传递数据,您可以将值放进内容页面的PageData属性。PageData属性是一个你希望在页面之间保存数据的键/值对集合。在布局页面中,您可以读出PageData属性的值。

  这里是另一个示例图。它展示了ASP.NET如何从内容页面到布局页面,使用PageData属性传递值。当ASP.NET开始构建Web页面时,他会创建这个PageData集合。内容页面中,您可能通过代码向PageData集合添加数据。在添加的内容页面和其他部分都可以访问PageData集合中的值。

彩世界平台官方网址 10

  接下来的程序展示了如何在内容页面和布局页面之间传值。当页面运行的时候,会显示一个让用户隐藏或显示一个在布局页面中定义的列表。当用户点击按钮,会给PageData属性设置一个true/false(Boolean)值。布局页面读取到值后,判断如果为false就隐藏列表。这个值也会在内容页面中使用,因为它能确定显示Hide List按钮还是Show List按钮。

彩世界平台官方网址 11

  1. 在根目录下,创建文件Content3.cshtml,并替换为以下内容:

    彩世界平台官方网址 12彩世界平台官方网址 13

    @{
        Layout = "~/Shared/_Layout3.cshtml";
    
        PageData["Title"] = "Passing Data";
        PageData["ShowList"] = true;
    
        if (IsPost) {
            if (Request.Form["list"] == "off") {
                PageData["ShowList"] = false;
            }
        }
    }
    
    @section header {
      <div id="header">
        Creating a Consistent Look
      </div>
    }
    
    <h1>@PageData["Title"]</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</p>
    
    @if (PageData["ShowList"] == true) {
        <form method="post" action="">
          <input type="hidden" name="list" value="off" />
          <input type="submit" value="Hide List" />
        </form>
    }
    else {
        <form method="post" action="">
          <input type="hidden" name="list" value="on" />
          <input type="submit" value="Show List" />
        </form>
    }
    

    View Code

    PageData属性中数据储存为了两部分—Web页面的标题和确定是否显示列表的值(true/false)。

    注意ASP.NET允许您通过条件代码块向页面添加HTML标签。例如,页面body中if/else块确定哪一个表单展示,if/else又是取决于PageData[“ShowList”]是否设置为true。

  2. 在Shared文件夹下,创建文件_Layout3.cshtml并用以下代码替换:

彩世界平台官方网址 14彩世界平台官方网址 15

<!DOCTYPE html>
<html>
  <head>
    <title>@PageData["Title"]</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      @RenderSection("header")
    </div>
      @if (PageData["ShowList"] == true) {
          <div id="list">
            @RenderPage("~/Shared/_List.cshtml")
          </div>
      }
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      <p>&copy; 2012 Contoso Pharmaceuticals. All rights reserved.</p>
    </div>
  </body>
</html>

View Code

  3.  在Shared文件夹下,创建_List.cshtml文件,并用以下内容替换:

彩世界平台官方网址 16彩世界平台官方网址 17

<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Consecte</li>
  <li>Eiusmod</li>
  <li>Tempor</li>
  <li>Incididu</li>
</ul>

View Code

  4.  在浏览器中运行Content3.cshtml。列表在页面左边,Hide List按钮在底部展示。

彩世界平台官方网址 18

  5.  点击Hide List,列表会消失同时按钮会变成Show List。

彩世界平台官方网址 19

  6.  点击Show List按钮,列表再次出现。

 

原文链接:

1、设计辅助信息
aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条以及其他类似的有别于主要内容的部分。
使用场景:
(1)作为主要内容的附属信息部分,包含在article元素中,其中的内容可以是与当前文章有关的参考资料、名词解释等。
(2)作为页面或站点全局的附属信息部分,在article元素之外使用。最典型的形式是侧边栏,其中的内容是友情链接,博客中其他文章列表、广告单元等。

当然也可以使用get/post请求获取数据,修改数据,可以参考以下JS代码:

三、设计包含多个内容部分的布局页面[Designing Layout Pages That Have Multiple Content Sections]

  一个内容页面可以包含多个部分,这对于希望使用有可替换内容的多块区域布局是非常有用的。在这样的内容页面中,为每一部分单独命名,名称不能重复。在这个布局页面中,添加RenderBody()方法指定未命名(默认部分就是未命名)的部分出现。接下来添加RenderSection()方法来单独渲染已命名的部分。

  接下来展示ASP.NET如何处理分割成多部分的内容。内容页面中所有已命名的部分包含在一个部分块中。(如下面示例中被命名为Header和List。)框架会在布局页面中调用RenderSection()方法的地方插入内容部分。正如前面所见,未命名(默认)部分会插入到调用RenderBody()方法的位置。

彩世界平台官方网址 20

  接下来示范如何创建一个包含多内容部分的内容页面,以及如何使用支持多内容部分的布局页面渲染它。

  1. 在Shared文件夹中,创建_Layout2.cshtml文件
  2. 用以下内容替换生成的所有内容:

    <!DOCTYPE html>
    <html>
      <head>
        <title>Multisection Content</title>
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <div id="header">
          @RenderSection("header")
        </div>
        <div id="list">
          @RenderSection("list")
        </div>
        <div id="main">
          @RenderBody()
        </div>
        <div id="footer">
          &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
        </div>
      </body>
    </html>
    

    使用RenderSection()方法可同时渲染header和list部分。

  3. 在根目录下创建Content.cshtml文件并用以下内容替换:

    @{
        Layout = "~/Shared/_Layout2.cshtml";
    }
    
    @section header {
        <div id="header">
            Creating a Consistent Look
        </div>
    }
    
    @section list {
        <ul>
            <li>Lorem</li>
            <li>Ipsum</li>
            <li>Dolor</li>
            <li>Consecte</li>
            <li>Eiusmod</li>
            <li>Tempor</li>
            <li>Incididu</li>
        </ul>
    }
    
    <h1>Multisection Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</p>
    

        这个内容页面包含了页面顶部的代码块。所有命名部分都被包含在一个部分块中。页面其余的包含默认(未命名)的内容部分。

  4. 在浏览器中运行Content2.cshtml。

彩世界平台官方网址 21

<article>
   <header>
       <hgroup>
          <h1>主标题</h1>
          <h2>副标题</h2>
          <h3>标题说明</h3>
       </hgroup>
       <p>
         <time datetime="2012-6-20">发布时间:2012年6月20日</time>
       </p>
   </header>
   <p>新闻正文</p>
</article>

 

如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

8、联系信息
address元素用来在文档中定义联系信息,包括文档作者或文档编辑者名称、电子邮箱、真实地址、电话号码等,还可以描述与文档相关的联系人的所有联系信息。

7、脚注块
footer元素可以作为内容块的注脚,如在父级内容块中添加注释,或者在网页中添加版权信息等。
与header元素一样,页面中也可以重复使用footer元素。

4、给内容分段
section元素用于对网站或应用程序中页面上的内容进行分区。一个section元素通常由内容及其标题组成。
使用场景:
通常用section元素为那些有标题的内容进行分段。section元素的作用是对页面上的内容分块处理,如对文章分段等,相邻的section元素的内容,应当是相关的,而不是像article那样独立。
article元素更强调独立性、完整性,section更强调相关性。
使用section元素需注意的问题:
(1)不要将section元素当作设置样式的页面容器,对于此类操作应该使用div元素实现;
(2)如果article元素、aside元素或nav元素更符合使用条件,不要使用section元素;
(3)不要为没有标题的内容区块使用section元素。

5、标题块
header元素是一种引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但也可以包含其它内偶然那个,如数据表格、搜索表单或相关的logo图片,因此整个页面的标题应该放在页面的开头。
在一个网页内可以多次使用header元素。

本文由彩世界开奖app官网发布于前端技术,转载请注明出处:jquery发起get/post请求_或_获取html页面数据彩世界平

关键词: 让前端飞 ASP.NET MVC 前端知识点