1

+- 50 行 (DB から生成) の html テーブルがあり、各行には 3 つの一意のドロップダウン リストがあります (各ドロップダウン オプションは db の異なるテーブルからのものです)。

それらにajaxを入力するにはどうすればよいですか。1つを入力して構築する方法は知っていますが、多くの概念についてアドバイスできますか.

1つのsqlステートメントを使用して3つのテーブルデータすべてを取得し、それをjsonオブジェクトに配置するhandler.ashxへの投稿を1つのajax呼び出しを使用してから、jqueryがそこからすべてを構築しますか?

それとも、3 つの個別の ajax 呼び出しと 3 つの sql ステートメントを使用する必要がありますか? しかし、ループ内でajaxがデータがフェッチされるのを待たないので、これは可能だとは思いませんか?

最適なソリューション、チュートリアル、またはアイデア/コンセプトについてアドバイスしていただけますか?

4

1 に答える 1

2

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;
   }    
}

結果のスクリーンショット

ここに画像の説明を入力

于 2012-09-01T03:15:52.750 に答える