Example of use with legacy .Net code-behind project

3 posts, 1 answers
  1. Shea
    Shea avatar
    58 posts
    Member since:
    Feb 2013

    Posted 10 Mar 2013 Link to this post

    Hello,

    I have used Kendo with MVC projects, and quite like it. 

    Part of my evaluation is how easy it would be to retrofit a couple grids into legacy code-behind projects. 

    Can I use the .Net helpers? Or do I have to use the pure HTML/Javascript methods? 

    Being an MVC guy, I have not sent JSON to/from on a code-behind project before... In MVC the JSON is automatically converted into your viewmodel type onthe backend, if you C# class aligns with the JSON data. Is the same possible with CodeBehind?

    Is there a simple example of a kendo grid using .net code-behind?

    Thanks,

    ~S
  2. Answer
    Shea
    Shea avatar
    58 posts
    Member since:
    Feb 2013

    Posted 11 Mar 2013 Link to this post

    I ended up getting a nice little example working, though there isn't a ton of information on going this route, so I'll post my example, for those others forced to work in vb and code-behind.

    My Tasks.aspx page:

    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="Tasks.aspx.vb" Inherits="KendoFormsTEst.Tasks" %>
     
    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <script src="<%: ResolveUrl("~/Scripts/kendo/2012.3.1114/kendo.web.min.js") %>"></script>
     
        <h2>Tasks</h2>
        <p>I am going to put a data grid here.</p>
        <div id="task-data"></div>
     
        <script type="text/javascript">
            $(document).ready(function () {
                $('#task-data').kendoGrid({
                    toolbar: ["create", "save", "cancel"],
     
                    columns: [
                        {
                            field: "Id",
                            width: 44,
                            title: "ID"
                        }, {
                            field: "Description",
                        }, {
                            field: "IsComplete",
                            width: 90,
                            title: "Complete"
                        } , {
                            field: "CreatedOn",
                            width: 120,
                            title: "Created",
                            format: "{0:yyyy-MM-dd}"
                        }, {
                            command: ["destroy"], title: "", width: 120
                        }
                    ],
     
                    pageable: {
                        pageSize: 5
                    },
     
                    scrollable: true,
                    editable: true,
                    navigatable: true,
                    sortable: true,
     
                    dataSource: {
                        transport: {
                            read: {
                                url: "Handlers/TaskHandler.ashx",
                                dataType: "json",
                                type: "GET",
                            },
                            update: {
                                url: "Handlers/TaskHandler.ashx",
                                dataType: "json",
                                type: "PUT",
                            },
                            destroy: {
                                url: "Handlers/TaskHandler.ashx",
                                dataType: "json",
                                type: "DELETE",
                            },
                            create: {
                                url: "Handlers/TaskHandler.ashx",
                                dataType: "json",
                                type: "POST",
                            },
                            parameterMap: function (options, operation) {
                                if (operation !== "read" && options.models) {
                                    return { tasks: kendo.stringify(options.models) };
                                }
                            }
                        },
     
                        batch: true,
     
                        schema: {
                            model: {
                                id: "Id",
                                fields: {
                                    Id: { editable: false, nullable: true },
                                    Description: { type: "string", editable: true },
                                    IsComplete: { type: "boolean", editable: true },
                                    CreatedOn: { type: "date", editable: false, defaultValue: new Date() }
                                }
                            }
                        },
                    }
                });
            });
        </script>
     
    </asp:Content>
    Then, I ignored the code behind, and added a "Generic Handler" to the project, "Handlers/TaskHandler.ashx":
    Imports System.Web
    Imports System.Web.Services
    Imports Newtonsoft.Json
     
    Public Class TaskHandler
        Implements System.Web.IHttpHandler
     
        Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
            Dim command = context.Request.RequestType.ToLower
            If command = "get" Then
                ReadTask(context)
            ElseIf command = "put" Then
                UpdateTask(context)
            ElseIf command = "post" Then
                AddTask(context)
            ElseIf command = "delete" Then
                DeleteTask(context)
            Else
                Throw New Exception("unknown request type")
            End If
        End Sub
       
        Private Sub DeleteTask(context As HttpContext)
            Dim deletedTasks = JsonConvert.DeserializeObject(Of List(Of Models.Task))(context.Request.Params("tasks"))
     
            For Each deleted As Models.Task In deletedTasks
                Dim existing = Models.Database.TaskData.First(Function(t) t.Id = deleted.Id)
                If existing IsNot Nothing Then
                    Models.Database.TaskData.Remove(existing)
                End If
            Next
     
            Dim jsonData = JsonConvert.SerializeObject(Nothing)
            context.Response.ContentType = "text/json"
            context.Response.Write(jsonData)
        End Sub
       
        Private Sub AddTask(context As HttpContext)
            Dim newTasks = JsonConvert.DeserializeObject(Of List(Of Models.Task))(context.Request.Params("tasks"))
            For Each newTask As Models.Task In newTasks
                Dim largestId = Models.Database.TaskData.OrderByDescending(Function(t) t.Id).First().Id
                newTask.Id = largestId + 1
                Models.Database.TaskData.Add(newTask)
            Next
     
            Dim jsonData = JsonConvert.SerializeObject(newTasks)
            context.Response.ContentType = "text/json"
            context.Response.Write(jsonData)
        End Sub
     
        Private Sub UpdateTask(ByVal context As HttpContext)
            Dim updatedTasks = JsonConvert.DeserializeObject(Of List(Of Models.Task))(context.Request.Params("tasks"))
     
            For Each updated As Models.Task In updatedTasks
                Dim existing = Models.Database.TaskData.First(Function(t) t.Id = updated.Id)
                existing.Description = updated.Description
                existing.IsComplete = updated.IsComplete
                existing.CreatedOn = updated.CreatedOn
                existing.Id = updated.Id
            Next
     
            Dim jsonData = JsonConvert.SerializeObject(updatedTasks)
            context.Response.ContentType = "text/json"
            context.Response.Write(jsonData)
        End Sub
     
        Private Sub ReadTask(ByVal context As HttpContext)
            Dim taskID = -1
            Integer.TryParse(context.Request("taskID"), taskID)
     
            Dim jsonData = JsonConvert.SerializeObject(Models.Database.TaskData)
            context.Response.ContentType = "text/json"
            context.Response.Write(jsonData)
        End Sub
     
        ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
            Get
                Return False
            End Get
        End Property
     
    End Class
    My Task.vb:
    Namespace Models
     
        Public Class Task
            Public Id As Integer?
            Public Description As String
            Public IsComplete As Boolean
            Public CreatedOn As Date
     
            Public Shared Function RandomData() As List(Of Task)
                Dim result = New List(Of Task)
                For i = 0 To 25 Step 1
                    Dim t = New Task
                    t.Id = i
                    t.Description = String.Format("Task number {0}", i)
                    t.CreatedOn = Now.AddDays(i - 10)
                    t.IsComplete = (i Mod 2) = 0
                    result.Add(t)
                Next
                Return result
            End Function
        End Class
     
    End Namespace
    Database.vb:
    Namespace Models
     
        Public Class Database
            Private Shared _tasks As List(Of Task) = Nothing
     
            Public Shared ReadOnly Property TaskData As List(Of Task)
                Get
                    If _tasks Is Nothing Then
                        _tasks = Task.RandomData
                    End If
                    Return _tasks
                End Get
            End Property
     
        End Class
     
    End Namespace
    Hope this helps someone.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dan
    Dan avatar
    70 posts
    Member since:
    Mar 2007

    Posted 05 Apr 2015 Link to this post

    Hi,

    I'm completely new in MVC, have WebForms experience.

    Is there any way to have access in code-behind to ASP.net MVC/Kendo UI controls properties? For example I'd like to setup in C#-code behind Grid's properties (e.g.: columns) regarding some server processing.

     Thanks!

Back to Top