如何使用数据库中的记录来填充jQuery多选插件

时间:2017-02-08 11:48:50

标签: jquery asp.net

我在网上看到了这个插件。它使我能够从一侧添加选定的文本,然后将其添加到另一侧。我已经在我的项目中很好地集成了它,但我很乐意在我的数据库中显示表格中的文本。 下面是我添加到其中的一些文本的定义,但希望从我的数据库中填充此文本,因为它们可以随时更改。我正在使用的jquery插件是pickList插件。我确实有一个想法,我需要使用Ajax来实现这一点,但我还需要更多的解释和指导

 var val = {
                 01: { id:01, text: 'HYGEIA HMO LIMITED ' },
                 02: { id:02, text: 'TOTAL HEALTH TRUST LIMITED' },
                 03: { id:03, text: 'CLEARLINE INTERNATIONAL LIMITED' },
};
 var pick = $("#pickList").pickList({ data: val });

这里只是一个简单的示例代码。如果您之前使用过此插件或类似的东西,并且能够从db填充文本,请提供一个洞察力。谢谢。无论如何,我正在使用asp.net。

更新

public object GetHmo()
        {
            try
            {
                var Result = medical.Service_Rendereds.ToList();
               var ID= new List<int>();
                var Names = new List<string>();
                if (Result.Any())
                {
                    foreach (var item in Result)
                    {
                        ID.Add(item.Id);
                        Names.Add(item.HospitalServices);
                    }
                }
                return new 
                {
                    id = ID,
                    names = Names
                };
            }
            catch (Exception ex)
            {
                return new
                {

                };
            }
        }





$(function () {
                 $.ajax({
                     type: "POST",
                     url: "../HealthCareServices.asmx/GetHmo",
                     data: '{}',
                     dataType: "json",
                     contentType: "application/json; charset=utf-8",
                     async: true,
                     cache: false,
                     success: function (response) {

                     }
                 });
             });
             function renderResult(response)
             {
}

1 个答案:

答案 0 :(得分:0)

根据评论,假设您有一个Web服务,它以您显示的格式返回JSON对象列表,您可以进行类似于ajax的调用 这将填写选项列表:

$.ajax({
    dataType: 'json',
    type: 'GET',
    url: "../HealthCareServices.asmx/GetHmo",
    data: '{}',
    contentType: "application/json; charset=utf-8",
    success: function(response)
    {
       console.log(JSON.stringify(response)); //just for debugging, see the structure of the returned data
        //assign the JSON data in the response to the picklist
        var pick = $("#pickList").pickList({ data: response });
    },
    error: function (jqXHR, textStatus, errorThrown) {
        //handle any HTTP errors which occur
        console.log("An error occurred whilst trying to contact the server: " + jqXHR.status + " " + textStatus + " " + errorThrown);
        console.log(JSON.stringify(jqXHR.responseJSON));
    }
});

注意我已经使用了&#34; GET&#34;而不是一个帖子。要从服务器获取数据,惯例是使用GET(名称中的线索!)。 POST通常用于发送数据。

这是理论。但是,我并不相信您的网络服务会以您需要的格式返回数据。您应该使用Postman或SOAPUI等工具对其进行测试,以检查数据格式是否符合您的需要。我还在&#34;成功&#34;中添加了调试线。回调,以便您可以在控制台中看到返回的数据结构。