PDA

View Full Version : [CLOSED] MVC Ajax Automatic binding



adelaney
Jun 06, 2012, 7:42 PM
What is the propery way, in MVC, to pass a GridPanel item via an Ajax Proxy in order to wire up automatic binding to the parameter of the function, and what is the correct result type to pass back (if any) to the Grid?

For example:
Controller Code

<HttpPost()> _
Public Function _AddTeam(ByVal team As CWTeam) As ActionResult
Dim grid As Telerik.Web.Mvc.GridModel
Dim results As New List(Of Models.CWTeam)
Dim svc As New Services.TeamService

results.Add(svc.CreateTeam(team))
grid = New Telerik.Web.Mvc.GridModel(results)

Return View(grid)

End Function


Model:

Namespace Models
Public Class CWTeam
#Region "Properties"
<DisplayName("Team ID")> _
Public Property CWTeamID As Integer
Get
Return Me._CWAssignmentTeamID
End Get
Set(ByVal value As Integer)
Me._CWAssignmentTeamID = value
End Set
End Property

<Required(), DisplayName("Team Name")> _
Public Property Name() As String
Get
Return _name
End Get
Set(ByVal value As String)
_name = value
End Set
End Property

#Region "ForeignKeys"
<Required(), DisplayName("Reviewer")> _
Public Property ReviewerEmployeeID As Integer
Get
Return Me._reviewerEmployeeID
End Get
Set(ByVal value As Integer)
Me._reviewerEmployeeID = value
End Set
End Property

<Required(), DisplayName("QA Reviewer")> _
Public Property QAReviewerEmployeeID As Integer
Get
Return Me._qaReviewerEmployeeID
End Get
Set(ByVal value As Integer)
Me._qaReviewerEmployeeID = value
End Set
End Property

<Required(), DisplayName("Drafter")> _
Public Property DrafterEmployeeID As Integer
Get
Return Me._drafterEmployeeID
End Get
Set(ByVal value As Integer)
Me._drafterEmployeeID = value
End Set
End Property

<Required(), DisplayName("Correspondent")> _
Public Property CorrespondentEmployeeID As Integer
Get
Return Me._correspondentEmployeeID
End Get
Set(ByVal value As Integer)
Me._correspondentEmployeeID = value
End Set
End Property
#End Region

<Required(), DisplayName("Last Modified"), [ReadOnly](True)> _
Public Property LastModified As Date
Get
Return Me._lastModified
End Get
Set(ByVal value As Date)
Me._lastModified = value
End Set
End Property

#End Region

#Region "Local"
Private _name As String
Private _CWAssignmentTeamID As Integer
Private _lastModified As Date
Private _reviewerEmployeeID, _qaReviewerEmployeeID, _drafterEmployeeID, _correspondentEmployeeID As Integer
#End Region

End Class

End Namespace

Daniil
Jun 07, 2012, 5:56 AM
Hi,


What is the propery way, in MVC, to pass a GridPanel item via an Ajax Proxy in order to wire up automatic binding to the parameter of the function, and what is the correct result type to pass back (if any) to the Grid?


Could you, please, clarify the requirement with more details? Do you just need to add a row for the GridPanel from a controller action when, for example, you are clicking on the Button?

Thanks for the example. But I'm not experienced with Telerik to understand well what it does.

adelaney
Jun 07, 2012, 1:28 PM
Sorry to confuse. That was poor form. I didn't mean to leave the Telerik code in there. The application had some Telerik controls in originally and the code there simply returns a grid model which is just a class that shapes a collection to a convenient Grid/JSON response {Data:"x", Total:"#", state:"gripOptions"} etc. Actually, it is a very convenient class they provide for MVC, and it really would be nice if you had an equivalent. Still, for the purpose of this example, please read the Telerik "GridModel" as a custom class.

Now, as to my original question, I have a grid with data loaded. I also have set up the grid's store to use proxy, Ajax functions for update, insert, etc. I am using a RowEditing plugin to update and add rows. I now have the client-side able to add a new record and to manually fire off the store's sync upon the edit event which calls my "_AddTeam" function. That's where I get stuck. When I watch the input value of the function's parameter (team), I have nothing. Additionally, when I inspect the QueryString of the post, I see this:
{_dc=1339075015470&Data=%5bobject+Object%5d}
System.Web.HttpValueCollection: {_dc=1339075015470&Data=%5bobject+Object%5d}

Now, it may be that I am not forming the Proxy or Javascript correctly. If so, then I would like to know what to do to have my incoming parameter object's (i.e. team) properties automatically wired up by MVC.

For clarity, here is my proxy config:

.Proxy(Sub(proxy)
Dim prxy As New Ext.Net.AjaxProxy()
With prxy
.API.Create = Url.Content("~/Assignments/_AddTeam/")
.API.Read = Url.Content("~/Assignments/_GetTeams/") + MvcApplication.CurrentApplicationUser.EmployeeID.T oString()
.API.Update = Url.Content("~/Assignments/_EditTeam")
.API.Destroy = ""
.Json = True
.Reader.Add(New Ext.Net.JsonReader() With {.Root = "Data", .AutoDataBind = True})
.Writer.Add(New Ext.Net.JsonWriter() With {.Root = "Data", .AutoDataBind = True, .AllowSingle = False, .ExcludeId = False})
End With

proxy.Add(prxy)
End Sub) _

And my javascript is this:

function editGrid(editor, e, eOpts) {
var grid = App.TeamGrid;
grid.store.sync();
}

Maybe there is some parameter configuration I need to add, some record information I need to add to the Javascript etc. However, I am not sure how to pass the current team back to my function's input parameter. I have seen in your DirectMethod examples how the function has a parameter for each grid's column, but I really want not to have to do that if possible as some of my grids will have many, many columns. Anyway, anything you can provide to move this forward would be very helpful.

Thanks in advance.

Daniil
Jun 07, 2012, 3:20 PM
Here is the example.

Example View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net.MVC v2 Example</title>

<script type="text/javascript">
var add = function () {
App.GridPanel1.getStore().insert(0, {});
App.RowEditing1.startEdit(0, 0);
};

var sync = function () {
App.GridPanel1.getStore().sync();
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Add">
<Listeners>
<Click Fn="add" />
</Listeners>
</ext:Button>

<ext:Button runat="server" Text="Sync">
<Listeners>
<Click Fn="sync" />
</Listeners>
</ext:Button>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Height="200"
Width="400">
<Store>
<ext:Store runat="server" AutoSync="false">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:AjaxProxy Url="/Test/GetData">
<API Create="/Test/Create" />
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column
runat="server"
Text="Test"
DataIndex="test"
Flex="1">
<Editor>
<ext:TextField runat="server" />
</Editor>
</ext:Column>
</Columns>
</ColumnModel>
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" />
</Plugins>
</ext:GridPanel>
</body>
</html>


Example Controller

public class TestController : Controller
{
public class Test
{
public string test { get; set; }
}

public ActionResult TestAspx()
{
return View();
}

public List<object> MyData = new List<object>
{
new Test() { test = "test1" },
new Test() { test = "test2" },
new Test() { test = "test3" }
};

public ActionResult GetData()
{
StoreResult r = new StoreResult();
r.Data = this.MyData;

return r;
}

public void Create(Test[] records)
{
//the records is an array of created records
}
}

adelaney
Jun 11, 2012, 12:41 PM
Thank you. That was very helpful.