Question

I have some JSON objects that I want to process on Client Side, but My WebMethod that I specified does not want to fire.

Here is the Ajax and GetJson methods i used in my Client Side Script:
GetSJON

$(document).ready(function() {
         $(document).ready(function() {
             //attach a jQuery live event to the button
             $('#getdata').live('click', function() {
             $.getJSON('/Members_Only/StockMovement/WebForm1.aspx/StockPlacementOptions', function(data) {
               //alert(data); //uncomment this for debug
              // alert(data.item1 + " " + data.item2 + " " + data.item3); //further debug
             $('#showdata').html("<p>item1=" + data.item1 + " item2=" + data.item2 + " item3=" + data.item3 + "</p>");
        });
    });
});

Here is the Ajax

$(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "/Members_Only/StockMovement/WebForm1.aspx/StockPlacementOptions",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{}",
            success: function (res) {
                $('#Results').append(CreateTableView(res)).fadeIn();
            }
        });
    });

Both of these Methods Call StockPlacementOptions which is my WebMethod that look like this:

 [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json,
    UseHttpGet = true, XmlSerializeString = false)]
    public static List<StockReturnMethod> StockPlacementOptions()
    {
        scmEntitiesPrimaryCon entities = new scmEntitiesPrimaryCon();
        var binOptions = (from avail in entities.ProductAvailibleBins(1, 2)
                          select new StockReturnMethod() { LotID = (int)avail.LotID, LotName = avail.LotName, AreaID = (int)avail.AreaID, AreaName = avail.AreaName, BinID = (int)avail.BinID, BinName = avail.BinName }).ToList();

        return binOptions;
    }

If I can just get the JSON web Method to fire on $(document).ready event, I will be able to process and work with the data from there. I have also tried looking at a diffrent jQuery library like KnockoutJS with it’s data processing capability, also no luck.
I am using ASP Webforms on Framework 4 with Html5 Markup.

Any advice will be greatly appreciated.

Answer 1

I got it fixed by using a combination of KnockoutJS and ajax.

By utilizing the knockoutJS mapping model, I am able to manipulate the returned JSON anyway i want 🙂

Here is my Jquery that does the Mapping and obtains JSON from server.

<script type="text/javascript">
//Declareing Viewmodel For KnockoutJS
    var viewModel;
    //Using Mapping Plugin for Knockout JS
    function bindModel(data) {
        viewModel = ko.mapping.fromJS(data);
        console.log(viewModel);
        ko.applyBindings(viewModel);
    }

    //Onload ObtainJSON
    $(document).ready(function () {
        $.ajax({
            url: "WebForm1.aspx/StockPlacementOptions",
            // Current Page, Method
            data: {},
            // parameter map as JSON
            type: "POST",
            // data has to be POSTed
            contentType: "application/json",
            // posting JSON content
            dataType: "JSON",
            // type of data is JSON (must be upper case!)
            timeout: 10000,
            // AJAX timeout
            success: function (result) {
                bindModel(result);
            },
            error: function (xhr, status) {
                alert(status + " - " + xhr.responseText);
            }
        });
    });

</script>

I also changed the Webmethod slightly to obtain the result i wanted:

[WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static List<StockReturnMethod> StockPlacementOptions()
    {
        scmEntitiesPrimaryCon entities = new scmEntitiesPrimaryCon();

        var binOptions = (from avail in entities.ProductAvailibleBins(1, 2)
                          select new StockReturnMethod() { LotID = (int)avail.LotID, LotName = avail.LotName, AreaID = (int)avail.AreaID, AreaName = avail.AreaName, BinID = (int)avail.BinID, BinName = avail.BinName }).ToList();

        return binOptions;
    }

And That’s it 😀

Thanks for all the help