Jquery Tabs 在asp.net 中的应用

简介:

Jquery Tabs asp.net 中的应用

首先寫一個web service 方法

根據不同的汽車類型得到此中類型下的汽車信息

 

[WebMethod]

public List<Car> GetCarsByMake(string make)

{

    var query = from c in Cars

                where c.Make == make

                select c;

    return query.ToList();

}

 

引入Jquery類庫

 

<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script> 

<script type="text/javascript" src="script/ui.core.min.js"></script> 

<script type="text/javascript" src="script/ui.tabs.min.js"></script> 

 

編寫html腳本

<form id="form1" runat="server"> 

<div> 

  <div id="content">

    <ul>

      <li><a href="#tab0"><span>Ford</span></a></li>

      <li><a href="#tab1"><span>Toyota</span></a></li>

      <li><a href="#tab2"><span>Honda</span></a></li>

      <li><a href="#tab3"><span>Audi</span></a></li>

    </ul>

    <div id="tab0"></div>

    <div id="tab1"></div>

    <div id="tab2"></div>

    <div id="tab3"></div>

  </div>

</div> 

</form> 

 

 


html中調用tabs

 

$(function() {

  var $tabs = $("#content").tabs();

});

 

運行頁面結果如下圖

此時,點擊每個標籤可以相互切換,但是標籤里沒有內容,Let’s go on….

以下代碼用來注冊tab的单击事件,并通过web service 从数据库中获得数据显示到前台

 

var make;

$(function() {

  var $tabs = $("#content").tabs({

    select: function(e, ui) {

      var thistab = ui.index;

      $("#tab" + thistab).html(getCars(thistab));

    }

  });

});

 

function getCars(thistab) {

  switch (thistab) {

    case 0:

      make = "Ford";

      break;

    case 1:

      make = "Toyota";

      break;

    case 2:

      make = "Honda";

      break;

    case 3:

      make = "Audi";

      break;

  }

  $.ajax({

    type: "POST",

    url: "Services/CarService.asmx/GetCarsByMake",

    data: "{make: '" + make + "'}",

    contentType: "application/json; charset=utf-8",

    dataType: "json",

    success: function(response) {

      var cars = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

      for (var i = 0; i < cars.length; i++) {

        $('#tab' + thistab).append('<p><strong>' + cars[i].Make + ' ' +

                              cars[i].Model + '</strong><br /> Year: ' +

                              cars[i].Year + '<br />Doors: ' +

                              cars[i].Doors + '<br />Colour: ' +

                              cars[i].Colour + '<br />Mileage: ' +

                              cars[i].Mileage + '<br />Price: £' +

                              cars[i].Price + '</p>');

      }

    }

  });

}

 

再次运行页面,切换不同的标签,根据种类显示不同的内容.

这时就出现了一个问题重复点击相同的标签,会重复向服务器发送请求.

解决办法如下:

var make;

var clicked = new Array();

$(function() {

  var $tabs = $("#content").tabs({

    select: function(e, ui) {

      var thistab = ui.index;

      $("#tab" + thistab).html(getCars(thistab));

    }

  });

});

 

function getCars(thistab) {

  for (var x in clicked) {
    
if (clicked[x] == thistab)
      
return;
  }

  switch (thistab) {

    case 0:

      make = "Ford";

      break;

    case 1:

      make = "Toyota";

      break;

    case 2:

      make = "Honda";

      break;

    case 3:

      make = "Audi";

      break;

  }

  $.ajax({

    type: "POST",

    url: "Services/CarService.asmx/GetCarsByMake",

    data: "{make: '" + make + "'}",

    contentType: "application/json; charset=utf-8",

    dataType: "json",

    success: function(response) {

      var cars = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

      for (var i = 0; i < cars.length; i++) {

        $('#tab' + thistab).append('<p><strong>' + cars[i].Make + ' ' +

                              cars[i].Model + '</strong><br /> Year: ' +

                              cars[i].Year + '<br />Doors: ' +

                              cars[i].Doors + '<br />Colour: ' +

                              cars[i].Colour + '<br />Mileage: ' +

                              cars[i].Mileage + '<br />Price: £' +

                              cars[i].Price + '</p>');

      }

      clicked.push(thistab);

    }

  });

}

 

至此,Jquery tabsasp.net 中的应用结束。

此案例下載:

http://www.mikesdotnetting.com/Samples/LazyLoadTabs.aspx

原文地址:

http://www.mikesdotnetting.com/Article.aspx?ArticleID=102



本文转自灵动生活博客园博客,原文链接:http://www.cnblogs.com/ywqu/archive/2009/04/24/1442904.html,如需转载请自行联系原作者

相关文章
|
3月前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
26 0
|
4月前
|
算法 Java 调度
|
7月前
|
Kubernetes 关系型数据库 数据库
.netcore应用容器化部署
.netcore应用容器化部署
|
7月前
|
Kubernetes 数据库 C++
.netcore应用在WSL中的容器化部署
前面,我们讲解了如何在wsl中安装数据库,.netcore运行时,以及如何发布一个.netcore应用,为了构成一个完整的小系列,本节,我们来学习一下,如何将.netcore应用在WSL中容器化。
|
7月前
|
安全 C# 开发工具
模拟.NET应用场景,综合应用反编译、第三方库调试、拦截、一库多版本兼容方案
模拟.NET实际应用场景,综合应用三个主要知识点:一是使用dnSpy反编译第三库及调试,二是使用Lib.Harmony库实现第三库拦截、伪造,三是实现同一个库支持多版本同时引用。
模拟.NET应用场景,综合应用反编译、第三方库调试、拦截、一库多版本兼容方案
|
6月前
|
Go
Golang 语言怎么使用 net/http 标准库开发 http 应用?
Golang 语言怎么使用 net/http 标准库开发 http 应用?
26 0
|
7月前
|
关系型数据库 MySQL 容器
.netcore应用容器化时更改Expose端口无法访问
.netcore应用容器化时更改Expose端口无法访问
|
4月前
|
小程序 安全 JavaScript
.NET微信网页开发之通过UnionID机制解决多应用用户帐号统一问题
.NET微信网页开发之通过UnionID机制解决多应用用户帐号统一问题
.NET微信网页开发之通过UnionID机制解决多应用用户帐号统一问题
|
4月前
|
C# Windows
C#安装“Windows 窗体应用(.NET Framework)”
C#安装“Windows 窗体应用(.NET Framework)”
50 0

相关课程

更多