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 tabs在asp.net 中的应用结束。

此案例下載：

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

原文地址：

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