PDA

View Full Version : MVC, Drag-Drop & DirectMethods



sodeve
Mar 28, 2011, 9:17 AM
Hi All,

I am sorry if the title is a bit confusing. :)

To cut the story short, I've been building application based on the Ext.NET MVC example. Everything was good. Then I had requirement in which I need to do drag-drop from the main GridPanel (iframe) to the TreePanel (master page). Since the GridPanel is inside Iframe, the drag-drop couldn't be done.

After searching internet for days, apparently this is a show-stopper (or does anyone manage to successfully implement drag-drop from GridPanel in iframe to the TreePanel in the masterpage?)

So now, I am started to rewrite one View page as a control and use DirectMethods to dynamically load it.

So in the Site.Master file I defined the DirectMethods as


<script runat="server">
[DirectMethod]
public void AddInboxTab(String ID)
{
var p = new Ext.Net.Panel { Title = "Inbox", ID = ID, Closable = true };
p.ContentControls.Add(this.Page.LoadControl("~/Views/Shared/Inbox.ascx"));
tpMain.Items.Add(p);
p.Render();
tpMain.SetActiveTab(p.ClientID);
}
</script>

Whenever user click one of the TreePanel's leaf, it will be handled by this procedure which is handled in separate .js file

addTab: function(config) {
if (Ext.isEmpty(config.url, false)) {
return;
}

var tp = Ext.getCmp('tpMain');
var id = this.hashCode(config.url);
var tab = tp.getComponent(id);

if (!tab) {
if (config.title == 'Inbox') {
//Call direct method
//Ext.net.DirectMethod.request("AddInboxTab", Ext.applyIf(config || {}, { params: { ID: id }, control: "ctl00" }));
Ext.net.DirectMethods.AddInboxTab(id); // ERROR
}
else {
tab = tp.addTab({
id: id.toString(),
title: config.title,
iconCls: config.icon || 'icon-applicationdouble',
closable: config.closable == undefined ? true : config.closable,
autoscroll: config.autoscroll,
autoLoad: {
showMask: true,
url: config.url,
mode: 'iframe',
noCache: true,
maskMsg: "Loading ...",
scripts: true,
passParentSize: config.passParentSize
}
});
}
} else {
tp.setActiveTab(tab);
Ext.get(tab.tabEl).frame();
}
}

But Chrome's debugger is throwing exception. When I inspected the Ext.net.DirectMethods object, I couldn't find AddInboxTab there. What mistakes did I do?

Vladimir
Mar 28, 2011, 12:19 PM
Hi,

Master page is iNamingContainer therefore additional namespace is added to Directmethod name (ClientID is added)
You can set DirectMethodProxyID for master page class to avoid it
Please see (master page code behind file)
http://examples1.ext.net/#/Events/DirectMethods/ID_Mode/

Under MVC I recommend to use PartialViewResult, see http://mvc.ext.net/ (Examples -> Partial Views)
MVC sample was created when partial rendering was not supported therefore we used iframes. At this moment, I recommend to use partial rendering instead iframes. We will update MVC sample to remove iframes in future