PDA

View Full Version : Updating Static Tree Panel through Direct Events (MVC, C#, Razor)



dangerlinto
Nov 25, 2013, 3:53 PM
In order to push back a lot of code as far back as possible (into the Model), we've had to use a lot of direct events in order to refresh info gained from that model. So the example here: Refresh Static Tree (http://mvc.ext.net/#/TreePanel_Basic/Refresh_Static_Tree/) will not work - you really can't post back to your model from a Direct Method

After trying numerous configurations of returning nodes, node collections, node collections without a root and many different JavaScripts handle the resulting returns, this post: http://forums.ext.net/showthread.php?22625-CLOSED-TreePanel-very-slow-at-loading-amp-expanding-250-nodes-after-ajax-call-to-get-nodes got it very close. The real trick was the differences in what object the Direct Event got back and what the Direct Method
got.

If you want to refresh a Tree Panel with a Direct Event, here is the relevant bits:

.cshtml (incl. Javascript)


<script>
var UpdateTreeSuccess = function (tree, node) {

if (!Ext.isEmpty(node)) {
tree.setRootNode( node.result[0] ); //note the node.result[0] - this is where the root object you want is in the Direct Result!
tree.getRootNode().expand( true );
}
else {
tree.getRootNode().removeAll();
}

};
</script>

Html.X().TreePanel()
.ID("TreePanel1")
.Icon(Icon.BookOpen)
.Tools(
Html.X().Tool()
.Type(ToolType.Refresh)
.ID("hiddenRefreshTree")
.DirectEvents(de =>
{
de.Click.Url = Url.Action("UpdateTree");
de.Click.Success = "UpdateTreeSuccess(App.TreePanel1, result);";
de.Click.Failure = "alert('No Tree');";
}
)
.ToolTip("Refresh")
)
.Title("Tournament Dates")
.Root(
Html.X().Node()
.NodeID("TreeRoot")
.Text("RootText")
.Children(r =>
{
//do your static tree work here
}
)

)



controller.cs


public ActionResult UpdateTree( modelType ModelName )
{
return this.Direct(ModelName.ExtNetNodeCollection);
}


model (in this case looking through data in an array to separate out by months)


public Ext.Net.NodeCollection ExtNetNodeCollection
{

get
{

Ext.Net.NodeCollection oNodeCollection = new Ext.Net.NodeCollection ( );

Ext.Net.Node oRootNode = new Ext.Net.Node();
oRootNode.Text = "Some Text"
oRootNode.NodeID = "TreeRoot";
oRootNode.Leaf = false;
oNodeCollection.Add ( oRootNode );

for (int month = 1; month < 13; month++)
{
if (this.SomeData.Where(p => p.Data_Date.Month == month).Count() > 0)
{
Node oMonthNode = new Node();
oMonthNode.Text = (Convert.ToDateTime( month + "/1/" + Year)).ToString("MMMM");
oMonthNode.Leaf = false;
oRootNode.Children.Add(oMonthNode);

foreach (var rows in this.SomeData.Where(c => c.Data_Date.Month == month))
{
Node oDataNode = new Node();
oTourneyNode.Text = rows.Data_Desc + " - " + rows.Data_Date.ToString ( "MMM dd, yyyy" );
oDataNode .Leaf = true;
oMonthNode.Children.Add(oDataNode);
}
}
}

return oNodeCollection;
}

}


There are definitely disadvantages to using the Direct Events, but when you are working with a lot of information pulled data Stores that are only going to get their information through the model, rather than create new instances of that model, Direct Events are the easy route to getting your data.

I wish there were more examples in the MVC examples explorer were direct events were utilized for this very reason.

Daniil
Nov 26, 2013, 3:04 AM
Hi @dangerlinto,

Thank you for sharing and the suggestion.


you really can't post back to your model from a Direct Method

Could you, please, elaborate on that? I don't quite understand what you mean.

dangerlinto
Nov 26, 2013, 12:40 PM
Could you, please, elaborate on that? I don't quite understand what you mean.

The direct event will post back to your controller with your model in MVC without any extra work on your behalf. As near as I can tell, I'd have to rewire everything up in the JavaScript - using the example i referenced, the Direct Method is passing a string (node) back to the controller to get the data needed to rebuild the tree. But what if the data I need is in a model that requires 10, 15, or 20 or more variables to get at.? My first thought was to break the data out of that model, but while my more simplistic, cut-down version doesn't show it, the data can't be separated so easily. Posting back the entire model is the only efficient way to get at the data.

If there was a way in the direct method to wrap up the entire model's worth of data to pass back to the controller, I guess that would be fantastic

Daniil
Nov 29, 2013, 3:59 AM
The direct event will post back to your controller with your model in MVC

Probably, you mean that it submits a form. Because a DirectEvent doesn't submit a Model.


without any extra work on your behalf.

Yes, a DirectEvent submits a form automatically, if it can find it. But it is possible to submit a form with a DirectMethod as well using the formId config. Though, yes, with some small extra work.

View

@model int

@{
var X = Html.X();
}

<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@X.ResourceManager()

<form id="form1">
@X.NumberField().Number(Model).Name("model")

@X.Button().Handler(string.Format("Ext.net.DirectMethod.request({{ url: '{0}', formId: '{1}' }})", Url.Action("GetModel"), "form1"))
</form>
</body>
</html>


Controller

public ActionResult Index()
{
return View(10);
}

[DirectMethod(ClientProxy = ClientProxy.Ignore)]
public ActionResult GetModel(int model)
{
X.Msg.Alert("GetModel", model).Show();

return this.Direct();
}