Populating a form with data from a remote datasource is not difficult, but it can be a bit tedious at first. The breakdown below will help clarify the basic steps to creating a MVVM form and understand how it converses with the server.
In this instance, we’re using a Generic Handler, simply because it is an easy “stand-alone” script. In this case I’m using vb.net as the code, simply because that’s the language the parent site had been using.
Step 1. Link in kendo js, css and jquery
Step 2. Make some sample json on a simple controller
[{"id": "3346","first_name": "Dan","last_name": "Morris","phone1": "555-555-5555","phone1_ext": "1","phone2": "666-666-6666","phone2_ext": "2","email": "tester@tester.com","notes": "Here are some notes","job_title": "CEO"}]
Step 2. Get your data into a datasource
var viewModel;
var contact = new kendo.data.DataSource({
transport: {
read: {
url: "/web/contacts/update.ashx?action=read&id="+record_id+"&sid=<%=session("sessionkey") %>",
dataType: "json",
complete: function(jqXHR, textStatus) { console.log(textStatus, "read") }
} ,
update: {
url: "/web/contacts/update.ashx?action=update&id="+record_id+"&sid=<%=session("sessionkey") %>",
dataType: "json",
complete: function(jqXHR, textStatus) { console.log(textStatus, "update") }
},
destroy: {
url: "/web/contacts/update.ashx?action=delete&id="+record_id+"&sid=<%=session("sessionkey") %>",
dataType: "json",
complete: function(jqXHR, textStatus) { console.log(textStatus, "destroy") }
},
error: function(er){console.log(e)},
},
change: function(e){
completeMe();
},
schema:{
id: "Productid",
model: {
Productid: {type: "number"},
first_name: {type: "string"},
last_name: {type: "string"},
phone1: {type: "string"},
phone1_ext: {type: "string"},
phone2: {type: "string"},
phone2_ext: {type: "string"},
email: {type: "string"},
notes: {type: "string"},
job_title: {type: "string"}
}
}
})
contact.read()
Step 3. Pull it into a view model
function completeMe(){
var json = JSON.stringify(contact.data()[0])
console.log("Setting Model Data:"+JSON.stringify(contact.data()[0]) );
viewModel = kendo.observable({
myContact:contact.data()[0],
save: function(e){
contact.sync();
} ,
remove: function(e){
contact.remove(contact.data()[0]);
contact.sync();
}
});
kendo.bind($("#client_contact"), viewModel);
}
step 4. Use databinders on your html fields, spans and buttons
step 6. update your controller or whatever to accept the calls from the viewmodel. IN this case, I was using a .net generic handler.
<%@ WebHandler Language="VB" Class="update" %>
Imports System
Imports System.Web
Imports System.Data
Imports System.Data.SqlClient
Public Class update : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "text/json"
Dim x As String
Dim session_id As String
Dim retval As Integer
Dim contact_id As String
contact_id = context.Request("id")
session_id = context.Request("sid")
Dim first_name, last_name, phone1, phone1_ext, phone2, phone2_ext, email, notes, job_title As String
Dim updateSQL, deleteSQL, readSQL As String
Dim dl As New DataLayer()
Dim ds As DataSet
If context.Request("action") = "read" Then
ds = dl.GetData("select * from contacts where contact_id = " & contact_id, "tbl")
With ds.Tables(0).Rows(0)
first_name = .Item("first_name")
last_name = .Item("last_name")
phone1 = .Item("phone1")
phone1_ext = .Item("phone1_ext")
phone2 = .Item("phone2")
phone2_ext = .Item("phone2_ext")
email = .Item("email")
notes = .Item("notes")
job_title = .Item("job_title")
End With
context.Response.Write("[{")
context.Response.Write("""id"": """ & contact_id & """,")
context.Response.Write("""first_name"": """ & first_name & """,")
context.Response.Write("""last_name"": """ & last_name & """,")
context.Response.Write("""phone1"": """ & phone1 & """,")
context.Response.Write("""phone1_ext"": """ & phone1_ext & """,")
context.Response.Write("""phone2"": """ & phone2 & """,")
context.Response.Write("""phone2_ext"": """ & phone2_ext & """,")
context.Response.Write("""email"": """ & email & """,")
context.Response.Write("""notes"": """ & notes & """,")
context.Response.Write("""job_title"": """ & job_title & """")
context.Response.Write("}]")
ElseIf context.Request("action") = "delete" Then
x = context.Request("id")
context.Response.Write("[{""response"":""DELETE " & x & """}]")
Else
first_name = context.Request("first_name")
last_name = context.Request("last_name")
phone1 = context.Request("phone1")
phone1_ext = context.Request("phone1_ext")
phone2 = context.Request("phone2")
phone2_ext = context.Request("phone2_ext")
email = context.Request("email")
notes = context.Request("notes")
job_title = context.Request("job_title")
updateSQL = "Update contacts set "
updateSQL += "first_name='" & first_name & "',last_name='" & last_name & "', "
updateSQL += "phone1='" & phone1 & "',phone1_ext='" & phone1_ext & "', "
updateSQL += "phone2='" & phone2 & "',notes='" & notes & "', "
updateSQL += "email='" & email & "',job_title='" & job_title & "' "
updateSQL +="Where contact_id = " & contact_id & ";select " & contact_id
retval = dl.RunSQL(updateSQL)
context.Response.Write("[{""updateSQL"":""" & updateSQL & """}]")
End If
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class
[/code]
