jQuery-AJAX 将下拉列表重新绑定到存储过程的结果

发布于 2024-10-20 10:09:20 字数 319 浏览 2 评论 0原文

我有一个很长的人名下拉列表。多达2000个名字。我想通过将下拉列表一次限制为名称的子集来更轻松地找到用户感兴趣的名称。我通过创建一系列 26 个链接（A、B、C ... Z）来完成此操作，这些链接调用后面代码中的一个方法，该方法仅使用以用户单击的字母开头的名称填充下拉列表。

这一切都运行良好，但我希望能够使用 AJAX 来完成下拉列表的更新，而无需刷新页面。我想使用 jQuery 来实现 AJAX 功能，而不是 ASP.NET AJAX。

我的问题是我不确定如何执行存储过程，然后通过 jQuery AJAX 使用新数据集“重新绑定”下拉列表。有什么建议或资源可以提供示例或演练吗？谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

年华零落成诗 2024-10-27 10:09:20

给你一些方向。

首先创建一个页面，webservice，或httphandler 将获取您的帖子并返回 json。

处理程序：

public void GetNames(HttpContext context)
{
    context.Response.ContentType = "application/json";
    context.Response.ContentEncoding = Encoding.UTF8;

    var results = DataAccess.GetNames(context.Request["letter"]);

    string json = //encode results to json somehow, json.net for example.

    context.Response.Write(json );
}

标记

<ul>
  <li>A</li>
</ul>

<select id="names">
</select>

执行 $.post 的脚本

$(function(){
  $("li").click(function(){
    var letter = $(this).text();
    $.post("SomeUrl/GetNames", {letter: letter}, function(data){
     var $sel = $("#names").empty();
     $.each(data, function(){
       //this assumes the json is an array in the format of {value: 1, name:'joe'}
       $sel.append("<option value='" + this.value + "'>" + this.name+ "</option>");
     });
    }, "json");
  });
});

这应该是关于如何完成任务的一个很好的概述。

一些额外的资源。

Some direction for you.

First create a page, webservice, or httphandler that will take your post and return back json.

Handler:

public void GetNames(HttpContext context)
{
    context.Response.ContentType = "application/json";
    context.Response.ContentEncoding = Encoding.UTF8;

    var results = DataAccess.GetNames(context.Request["letter"]);

    string json = //encode results to json somehow, json.net for example.

    context.Response.Write(json );
}

The Markup

<ul>
  <li>A</li>
</ul>

<select id="names">
</select>

The Script to do a $.post

$(function(){
  $("li").click(function(){
    var letter = $(this).text();
    $.post("SomeUrl/GetNames", {letter: letter}, function(data){
     var $sel = $("#names").empty();
     $.each(data, function(){
       //this assumes the json is an array in the format of {value: 1, name:'joe'}
       $sel.append("<option value='" + this.value + "'>" + this.name+ "</option>");
     });
    }, "json");
  });
});

That should be a good outline on how to accomplish your task.

Some additional resources.