This is a migrated thread and some comments may be shown as answers.

Example of use with legacy .Net code-behind project

2 Answers 102 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Shea
Top achievements
Rank 1
Shea asked on 10 Mar 2013, 09:25 PM
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 Answers, 1 is accepted

Sort by
0
Accepted
Shea
Top achievements
Rank 1
answered on 11 Mar 2013, 07:16 AM
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.
0
Michael
Top achievements
Rank 1
answered on 05 Apr 2015, 04:00 PM

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!

Tags
General Discussions
Asked by
Shea
Top achievements
Rank 1
Answers by
Shea
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Share this question
or