使用jQuery调用ASP.Net Page方法

时间:2014-02-11 12:08:34

标签: c# javascript jquery html asp.net

我在这里粘贴我的代码。

<script type="text/javascript">
        $(function() {
            var items = [{text: 'Onion', value: '1'},
                         {text: 'Ketchup', value: '2'},
                         {text: 'Mayonnaise', value: '3'},
                         {text: 'Pickles', value: '4'},
                         {text: 'Tomato', value: '5'},
                         {text: 'Patatoes', value: '6'},
                         {text: 'Sausage', value: '7'},
                         {text: 'Lettuce', value: '8'},
                         {text: 'Pepper', value: '9'}
                        ];

            $('#myCheckList').checkList({
                listItems: items,
                onChange: selChange
            });

            function selChange(){
                var selection = $('#myCheckList').checkList('getSelection');

                $('#selectedItems').text(JSON.stringify(selection));
            }


        });
    </script>

我想在var items=中,它需要一个方法,即getItems(),该方法是用ItemDAL.cs(DAL层)编写的,它从数据库中获取所有项目列表。如何做这个?谁能建议我?

1 个答案:

答案 0 :(得分:2)

创建对象的c#表示:

public class SelectItem
{
    public string Value { get; set; }
    public string Text { get; set; }
}

然后是Web方法背后的页面:

    [WebMethod]
    public static List<SelectItem> GetItems()
    {
        var items = new List<SelectItem>();
        // look up db items and populate from your Dal          
        return items;
    }

那你的js

<script type="text/javascript">
        $(function() {
                var items;

                $.ajax({
                    type: "POST",
                    url: "Default.aspx/GetItems",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (msg) {

                        items = msg.d;

                    }
                });

            $('#myCheckList').checkList({
                listItems: items,
                onChange: selChange
            });

            function selChange(){
                var selection = $('#myCheckList').checkList('getSelection');

                $('#selectedItems').text(JSON.stringify(selection));
            }


        });
    </script>