How do i connect to a datasource using a method from code behind C#

[Edmund]

I would like to create a chart, but on my datasource connection, i'm going to use a method to get a result from the database and then convert the result into json as follows in the default.aspx.cs code behind:

    public string  LoadData()
    {
        DataClassesDataContext db=new DataClassesDataContext();
     var linq = from s in db.Edmund_Reporting_Counter()
                    select s;
     string jsonStr = JsonConvert.SerializeObject(linq);
   
    return jsonStr;
    }

The question is coming from the default.aspx on the datasource:


  theme: $(document).data("kendoSkin") || "default",
                        dataSource: {
                            transport: {
                                read: {
                                   
                                    url: "default.aspx/LoadData",           
                                    dataType: "json"
                                    
                                }

                            }
                   
On the url, what must i do so that it will i pick the result from the LoadData method in code behind.
Thanks,

[John DeVight]

Hi Edmund,

Try changing your LoadData Controller Action to this:

public JsonResult LoadData()

{

    DataClassesDataContext db=new DataClassesDataContext();

    var linq = from s in db.Edmund_Reporting_Counter()

            select s; 

    // string jsonStr = JsonConvert.SerializeObject(linq);

      

    // return jsonStr;

    return Json(linq, JsonRequestBehavior.AllowGet);

}

If this doesn't work, let me know.

Regards,

John DeVight

[Edmund]

Hi,
Where is the libarary of JsonResult class.
Im using Newtonsoft.Json dll but it looks like it does not have the JsonResult class.
It looks like the example you gave me is for mvc not normal asp.net.
JsonResult class is in using System.Web.Mvc;
Thanks,

[John DeVight]

Hi Edmund,

I'm very sorry.  You are right, the solution I gave you was for ASP.NET MVC.

Have you considererd adding a Web Service to your ASP.NET application?

Regards,

John DeVight

[Edmund]

I have tried to use a web service but still its not working.
I have replaced   url: "default.aspx/LoadData",   
with a remote webservice   url: "kendoservice/Service1.asmx/LoadData",   
BUT it is still not working.
Thanks,

[John DeVight]

Hi Edmund,

I did a bit of research and was able to get a working sample put together of an ASP.NET WebForms application that has a REST WCF Service.  I put together the REST WCF Service based on this article: Create RESTful WCF Service API: Step By Step Guide

In the WCF Service Interface, I define a method called List.  The List method has a WebInvoke attribute that specifies the results as JSON and defines the URI to be used to call the method.  I needed to add the System.ServiceModel.Web assembly to be able to use it.  Here is the code:

namespace KendoWebFormApp.Services

{

    [ServiceContract]

    public interface IProductService

    {

        [OperationContract]

        [WebInvoke(Method = "GET", 
                      ResponseFormat = WebMessageFormat.Json, 
                      BodyStyle = WebMessageBodyStyle.Bare, 
                      UriTemplate = "List")]

        IList<Product> List();

    }

}

Here is the code for the service:

namespace KendoWebFormApp.Services

{

    public class ProductService : IProductService

    {

        public IList<Product> List()

        {

            IList<Product> products = new List<Product>();

            products.Add(new Product { Id = 1, Name = "Blue Widgets", Sold = 1000 });

            products.Add(new Product { Id = 2, Name = "Green Widgets", Sold = 1200 });

            products.Add(new Product { Id = 3, Name = "Red Widgets", Sold = 800 });

  

            return products;

        }

    }

}

The WCF Service is configured in the web.config file as follows:

<system.serviceModel>

  <services>

    <service name="KendoWebFormApp.Services.ProductService" 

             behaviorConfiguration="ServiceBehavior">

      <endpoint address="" binding="webHttpBinding" 

                contract="KendoWebFormApp.Services.IProductService" 

                behaviorConfiguration="web"></endpoint>

    </service>

  </services>

  <behaviors>

    <serviceBehaviors>

      <behavior name="ServiceBehavior">

        <serviceMetadata httpGetEnabled="true" />

        <serviceDebug includeExceptionDetailInFaults="false" />

      </behavior>

    </serviceBehaviors>

    <endpointBehaviors>

      <behavior name="web">

        <webHttp/>

      </behavior>

    </endpointBehaviors>

  </behaviors>

  <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />

</system.serviceModel>

Now I can call the WCF Service to get the data for the chart:

$(document).ready(function () {

    $("#chart").kendoChart({

        dataSource: {

            transport: {

                read: {

                    url: "/Services/ProductService.svc/List",

                    dataType: "json"

                }

            }

        },

        seriesDefaults: {

            type: "column" 

        },

        series: [{

            field: "Sold",

            name: "Sold"

        }],

        categoryAxis: {

            field: "Name"

        } 

    });

});

Attached is the sample application.  Let me know if you have any questions.

Regards,

John DeVight

[Edmund]

Thanks a lot, it worked BUT i have one issue,if i want to connect or to have the
 url: "/Services/ProductService.svc/List", to point to a cross domain path,
its tot working.
like using  url: "http://sharptech.healthinsite.net/kendoTest/Services/ProductService.svc/List" from my local application,this is not working.

I have tried to use jsonp, but its not working as well.

Thanks,

[Asad]

HI Edmund,

Have you checked this tutorial... http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/ 
it helped me a lot while I was working with KnockoutJS...

point it to load data with $.ajax call and then do something like:  

var localDataSource = new kendo.data.DataSource({data: yourAjaxLoadedData});

and voila... ;)


PS: do have a look at all comments, because, comments helped me a lot more than the article itself...

cheers,
Asad.