Example of use with legacy .Net code-behind project

[Shea]

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

[Shea]

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.

[Michael]

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!