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

8 posts, 0 answers
  1. Edmund
    Edmund avatar
    6 posts
    Member since:
    Jan 2012

    Posted 18 Jan 2012 Link to this post

    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,
  2. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 18 Jan 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Edmund
    Edmund avatar
    6 posts
    Member since:
    Jan 2012

    Posted 19 Jan 2012 Link to this post

    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,
  5. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 19 Jan 2012 Link to this post

    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
  6. Edmund
    Edmund avatar
    6 posts
    Member since:
    Jan 2012

    Posted 20 Jan 2012 Link to this post

    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,
  7. John DeVight
    John DeVight avatar
    209 posts
    Member since:
    Jan 2010

    Posted 20 Jan 2012 Link to this post

    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
  8. Edmund
    Edmund avatar
    6 posts
    Member since:
    Jan 2012

    Posted 23 Jan 2012 Link to this post

    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,
  9. Asad
    Asad avatar
    1 posts
    Member since:
    Nov 2011

    Posted 30 Jan 2012 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready