我有一個+ 50行（從數據庫生成）的HTML表，每行將有三個獨特的下拉列表（每個下拉選項都來自不同的表中的數據庫）從ajax調用填充多個下拉列表
我該如何去填充它們與Ajax。我知道如何填充和構建一個，但你可以建議許多概念。
我是否使用一個ajax將帖子調用到一個handler.ashx中，它使用一個sql語句檢索所有三個表數據，然後將其放入一個json對象 - 然後jquery從那裏構建它？
或者我使用三個獨立的ajax調用和三個sql語句？但是我認爲這是不可能的，因爲ajax不會等待數據被取回的循環中。
您能否就最佳解決方案或教程或想法/概念提供建議？
我同意markpsmith，你應該可能嘗試填充在服務器端的下拉列表中，但如果你真的想填充他們的客戶端，在這裏是如何可以用AJAX操作的示例。請記住，該示例雖然未註冊要驗證的事件。這是一個完全不同的問題，你將不得不解決......
頁代碼
<%--
c2012 Shawn Eary cc-wiki - Load DropDowns via AJAX Demo
Shows how to use client script to load ASP AJAX DropDownLists using
AJAX and jQuery. This ASP.NET file does not use any server side
code other than the code that is contained in the GetDropDownData
webservice. All population is done on the client side.
References (Places I Got Help From) -
[1] - Unknown.
Options to List Box in Client Side JavaScript."
plus2net. 2010.
http://www.plus2net.com/javascript_tutorial/list-adding.php
(accessed AUG 31, 2012).
[2] - Ward, David.
"Using jQuery to Directly Call ASP.NET AJAX Page Methods."
Encosia. MAR 10, 2012.
http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/
(accessed AUG 31, 2012).
--%>
<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
c2012 Shawn Eary cc-wiki - Load DropDowns via AJAX Demo
</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<%-- A table with three columns and several rows of non
populated DropDownLists --%>
<table>
<tr>
<td><asp:DropDownList CssClass="Drop1" runat="server"></asp:DropDownList></td>
<td><asp:DropDownList CssClass="Drop2" runat="server"></asp:DropDownList></td>
<td><asp:DropDownList CssClass="Drop3" runat="server"></asp:DropDownList></td>
</tr>
<tr>
<td><asp:DropDownList CssClass="Drop1" runat="server"></asp:DropDownList></td>
<td><asp:DropDownList CssClass="Drop2" runat="server"></asp:DropDownList></td>
<td><asp:DropDownList CssClass="Drop3" runat="server"></asp:DropDownList></td>
</tr>
<tr>
<td><asp:DropDownList CssClass="Drop1" runat="server"></asp:DropDownList></td>
<td><asp:DropDownList CssClass="Drop2" runat="server"></asp:DropDownList></td>
<td><asp:DropDownList CssClass="Drop3" runat="server"></asp:DropDownList></td>
</tr>
<tr>
<td><asp:DropDownList CssClass="Drop1" runat="server"></asp:DropDownList></td>
<td><asp:DropDownList CssClass="Drop2" runat="server"></asp:DropDownList></td>
<td><asp:DropDownList CssClass="Drop3" runat="server"></asp:DropDownList></td>
</tr>
</table>
</form>
<script type="text/ecmascript">
function setColumnDropDownData(dataSource, columnNum) {
for (var i = 0; i < dataSource.length; i++) {
var curItem = dataSource[i];
var text = curItem.text;
var value = curItem.value;
var theDropDowns = $('.Drop' + columnNum);
for (var j = 0; j < theDropDowns.length; j++) {
var curDropDown = theDropDowns[j];
// Populate the DropDown as in [1]
var someOption = document.createElement("OPTION");
someOption.text = text;
someOption.value = value;
curDropDown.options.add(someOption);
}
}
}
<%-- Mr. Ward shows how to call a WebMethod without using
AJAX ScriptManager in [2] --%>
$.ajax({
type: "POST",
url: "testServices.asmx/GetDropDownData",
data: "{tableName: 'color'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
setColumnDropDownData(msg.d, 1);
}
});
$.ajax({
type: "POST",
url: "testServices.asmx/GetDropDownData",
data: "{tableName: 'shape'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
setColumnDropDownData(msg.d, 2);
}
});
$.ajax({
type: "POST",
url: "testServices.asmx/GetDropDownData",
data: "{tableName: 'size'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
setColumnDropDownData(msg.d, 3);
}
});
</script>
</body>
</html>
服務代碼
// c2012 Shawn Eary cc-wiki - Load DropDowns via AJAX Demo
//
// Shows how to use a WebMethod to selectively push possible
// DropDownList population data back to the client
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
/// <summary>
/// Container for the data items that will be pushed back to the
/// client via JSON
/// </summary>
public class selectOption
{
public selectOption(int iValue, string iText)
{
value = iValue;
text = iText;
}
public int value;
public string text;
}
/// <summary>
/// Summary description for testServices
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class testServices : System.Web.Services.WebService {
// Send Data back to the client based upon the table of
// information she/he wants. In real life, each of the different
// if branches could be replaced with calls to the SQL database
// to get the data but putting these calls here doesn't
// significantly enhance the purpose of this example
[WebMethod]
public List<selectOption> GetDropDownData(string tableName) {
List<selectOption> returnVal = new List<selectOption>();
if (tableName == "color") {
// Normally you would use Entity Framework to get information
// from your T-SQL database here, but it isn't necessary
// for me to show the database calls for this illustration
returnVal.Add(new selectOption(1, "blue"));
returnVal.Add(new selectOption(2, "yellow"));
returnVal.Add(new selectOption(3, "green"));
}
else if (tableName == "shape")
{
// Normally you would use Entity Framework to get information
// from your T-SQL database here, but it isn't necessary
// for me to show the database calls for this illustration
returnVal.Add(new selectOption(1, "square"));
returnVal.Add(new selectOption(2, "triangle"));
returnVal.Add(new selectOption(3, "oval"));
returnVal.Add(new selectOption(4, "circle"));
}
else if (tableName == "size")
{
// Normally you would use Entity Framework to get information
// from your T-SQL database here, but it isn't necessary
// for me to show the database calls for this illustration
returnVal.Add(new selectOption(1, "big"));
returnVal.Add(new selectOption(2, "small"));
}
return returnVal;
}
}
結果截圖
是否有一個原因，你無法在填充html表的同時填充下拉列表，即在相同的數據庫調用中？ – markpsmith 2012-07-13 09:50:27