个人中心
gpt4 book ai didi

c# - 从 ajax 调用填充多个下拉列表

转载 作者：行者123 更新时间：2023-11-30 18:23:38 27 4
gpt4 key购买 nike

我有一个包含 +- 50 行的 html 表(从数据库生成)，每一行都有三个唯一的下拉列表(每个下拉列表的选项来自数据库中的不同表)

我如何使用 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;
   }    
}

结果截图

enter image description here

关于c# - 从 ajax 调用填充多个下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11457264/

27 4 0
文章推荐： c++ - 字符到整数数组
文章推荐： c - 在 C 中将字符串文字作为参数传递时的段错误
文章推荐： c - 尝试 "?:"条件 block 是否可以变得更简单
文章推荐： c - 重新分配期间 Valgrind 内存泄漏
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com