Call ASP.Net Page Method using jQuery

Question

Here i am pasting my code.

<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>

I want in var items= ,it will take a method i.e getItems() and that method is written in ItemDAL.cs(DAL layer) and it is getting all the items list from database.How to do this? Can anyone suggest me?

You should create an ASP.NET Web API service that can access your ItemDAL.cs. — Håkan Fahlstedt
– Håkan Fahlstedt, Commented Feb 11, 2014 at 12:16

hutchonoid · Accepted Answer · 2014-02-11 12:26:11Z

2

Create a c# representation of your object:

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

Then a page behind web method:

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

Then your 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>

answered Feb 11, 2014 at 12:26

hutchonoid

33.4k15 gold badges102 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JOJO Over a year ago

Its not working properly... in web method its working properly..but in jquery its nt accepting the items value..where should i write that web methods..can you tell me?

hutchonoid Over a year ago

You can do a jquery for each to populate it instead. I just left the jquery as it was. I can update the question with the fore each later today. Not on a computer at the moment.

hutchonoid Over a year ago

I'm not sure what the checklist is that you are using but this is an example of how I populate a dropdown list in a success call, I hope it is of some help: var subs = msg.d; // empty selection var $ddlSubCategory = $('#ddlSubCategory'); $ddlSubCategory.empty(); $.each(subs, function (index, sub) { $ddlSubCategory.append($('<option/>', { value: sub.Id, text: sub.Text })); });

JOJO Over a year ago

How to call a webmethod in jquery? today i posted dis question...der i hv given the details..can u answer?

Collectives™ on Stack Overflow

Call ASP.Net Page Method using jQuery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related