CODEWITHSUNDEEP
c#javascriptjqueryasp.netajax
JOJO
JOJO

Reputation: 316

How to call a webmethod in jquery

This is my web service method.

LogGeneralIncidentForm.aspx.cs:

public static List<SelectUsers> GetUsers()
    {
        DataTable dtUsers = SLAFacadeBLL.GetGIMUsers(Constants.GIM_USER_ACTIONS.CANLOG);
        var items = new List<SelectUsers>();

        DataView dvUsers = dtUsers.DefaultView;
        dvUsers.RowFilter = "RESPOND = True";

        if (dvUsers.Count > 0)
        {

            DataTable dt = dvUsers.ToTable();
            foreach (DataRow row in dt.Rows)
            {
                items.Add(new SelectUsers { Value = row["Id"].ToString(), Text = row["Name"].ToString() });
            }

        }
        return items;
    }

This is my jquery

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

            $.ajax({
                type: "POST",
                url: "LogGeneralIncidentForm.aspx/GetUsers",
                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>

But i am not getting the users list in jquery method.My web method is working properly .How to do that?What is the problem in my code? Can anyone give me any suggestion?

Upvotes: 0

Views: 714

Answers (4)

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

See the following working example

// Code behind method declared static

[WebMethod]
public static string GetSquare(String value)
{
    return value;
}

your button whose click this has to be done

<input type="button" id="button" value="Chnageurl" onclick="ajaxcall()" />

script for this

<script type="text/jscript">

function ajaxcall(e) {

            $.ajax({
            type: "POST",
            url: "Default.aspx/GetSquare",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ value: "Vinay" }),
            dataType: "json",
            success: function (value) {
            alert(value.d);
        },
       error: function () { alert("Ajax Error"); }
     });
  };

Upvotes: 0

Shirish
Shirish

Reputation: 1250

below code will work in same domain as per your requirement..

On web page

<asp:TextBox ID="txt_name" runat="server"></asp:TextBox>
<asp:Button ID="call_service" runat="server" Text="Call Service" OnClientClick="CallService(); return false;" />
<asp:Label ID="lblMsg" runat="server" Text="" />

<script type="text/javascript">
        function CallWebService() {
            $.ajax({
                type: "POST",
                url: "http://......myurl..../WebService.asmx",
                data: "{'name':'" + $("#txt_name").val() + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: ShowData,
                error: error

            });
        }
        function ShowData(data, status) {
            $("#lblMsg").html(data.d);
        }
        function error(request, status) {  
            alert(request.statusText);
        }
    </script>

Upvotes: 1

hutchonoid
hutchonoid

Reputation: 33316

There was something missing in your question, you forgot to mention you were using the jquery.ui.checkList.js.

I have taken a look at the source code for this and it expects the values passed in to be named value and text:

_addItem: function(listItem){
            var self = this, o = self.options, el = self.element;

            var itemId = 'itm' + (o.icount++);  // generate item id
            var itm = $('<tr/>');
            var chk = $('<input/>').attr('type','checkbox').attr('id',itemId)
                    .addClass('chk')
                    .attr('data-text',listItem.text)
                    .attr('data-value',listItem.value);

            itm.append($('<td/>').append(chk));
            var label = $('<label/>').attr('for',itemId).text(listItem.text);
            itm.append($('<td/>').append(label));
            o.objTable.append(itm);

            // bind selection-change
            el.delegate('.chk','click', function(){self._selChange()});
        }

You need to change your SelectUsers class to reflect this by renaming Id to value and Name to text.

Update

A working jsFiddle with name and text in the json.

http://jsfiddle.net/Yv99D/

Upvotes: 0

Ashwini Verma
Ashwini Verma

Reputation: 7525

There might me many reason and for finding please go through this wonderfull article. http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods

I can even suspect these may be the reason:

Missing [WebMethod] Attribute

   [WebMethod]
   public static List<SelectUsers> GetUsers()
   {
   }

Enabled page methods in your ScriptManager

   <asp:ScriptManager ID="scm" runat="server" EnablePageMethods="true" />

Upvotes: 0

Related Questions