jQuery的阿贾克斯重新绑定下拉列表从存储过程的结果 [英] jQuery-AJAX to rebind dropdown list to results from stored procedure

问题描述

我有人民的名字那是相当长的一个下拉列表。多达2000名。我想，使其更容易找到用户通过一次限制下拉列表的名称的一个子集感兴趣的名字。我已经创造了一系列的环节26（A，B，C ...... Z）调用在code的方法背后与填充只有那些开始用户点击字母名称的下拉列表中做到了这一点。

I have a dropdown list of peoples names that is quite long. As many as 2,000 names. I would like to make it easier to find the name the user is interested in by limiting the dropdown list to a subset of names at a time. I have done this by creating a series of 26 links (A, B, C ... Z) that call a method in the code behind that populates the dropdown list with only those names starting with the letter the user clicked.

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

This all works well but I would like to be able to use AJAX to accomplish this update of the dropdown list without a page refresh. I would like to use jQuery for the AJAX functionality rather than ASP.NET AJAX.

我的问题是我不知道如何执行存储过程，然后重新绑定通过jQuery的AJAX的新的数据集的下拉列表中。这可能提供与实例或步行通过任何建议或资源？谢谢你。

My problem is I am not sure how to execute the stored procedure and then "rebind" the dropdown list with the new dataset via jQuery AJAX. Any suggestions or resources that might provide and example or walk-through? Thank you.

推荐答案

为你一些方向。

首先创建一个页面，<一个href=\"http://msdn.microsoft.com/en-us/library/system.web.services.webmethodattribute.aspx\">webservice,或的HttpHandler ，将带您的文章，并返回JSON。

First create a page, webservice, or httphandler that will take your post and return back 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>

脚本做一个 $。员额

$(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.

一些额外的资源。

• jQuery AJAX教程


• 简介JSON MSDN上


• json.net


• jQuery的文档


• Creating返回JSON 一个HTTP处理程序（在博客上的其他文章可以使用的为好）

• jQuery AJAX Tutorial
• Intro to JSON on msdn
• json.net
• jQuery Docs
• Creating a http handler that returns json (other articles on the blog could be of use as well)

这篇关于jQuery的阿贾克斯重新绑定下拉列表从存储过程的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！