Jquery Tabs 在asp.net 中的应用-阿里云开发者社区

开发者社区> 灵动生活> 正文

Jquery Tabs 在asp.net 中的应用

简介: Jquery Tabs 在asp.net 中的应用 首先寫一個web service 方法 根據不同的汽車類型得到此中類型下的汽車信息   [WebMethod] public List GetCarsByMake(string make) {     var query = from c in Cars                 where c.
+关注继续查看

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

如果你认为此文章有用,请点击底端的【推荐】让其他人也了解此文章,

img_2c313bac282354945ea179a807d7e70d.jpg

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery Ajax应用总结
 (友情提示:本博文章欢迎转载,但请注明出处:陈新汉,http://www.blogjava.net/hankchen)  jQuery提供了简单而强大的选择器功能,同时对Ajax操作也给出了很好的支持。
716 0
ASP.NET MVC 5– 使用Wijmo MVC 5模板1分钟创建应用
开始使用 使用Wijmo制作MVC5应用程序,首先要做的是安装Wijmo 。 测试环境 VS2013(VS2010,VS2012支持MVC3,MVC4)、MVC5、Framework4.5、IE11、Studio for ASP.NET Wijmo2014V1,Note:不支持VS的更高版本 文件-新建项目 在安装了Wijmo之后,在 VS2010,VS2013 中选择新建项目分别如下。
1033 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
8947 0
一起谈.NET技术,SharePoint开发笔记-SharePoint2010添加ASP.NET应用程序
大家可能在sharepoint开发webpart会引入一些asp.net的控件,这时候就会需要添加dll引用..下图所示CRSWebControls便是我添加的.   部署这个项目到sharepoint后.
769 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
10541 0
+关注
灵动生活
12年电商经验,8年IT项目管理经验,曾就职于中国第一家上市的B2C电商公司麦考林,擅长电商业务模式规划以及大型电商系统架构。创立闪酷&amp;酷客多小程序
203
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载