MVC, Drag-Drop & DirectMethods

  1. #1

    MVC, Drag-Drop & DirectMethods

    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?
  2. #2
    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/Di...thods/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
    Vladimir Shcheglov
    Sr. Developer

Similar Threads

  1. Drag & Drop - Copy
    By elbanna23 in forum 1.x Help
    Replies: 1
    Last Post: May 17, 2012, 1:06 PM
  2. Drag'n Drop
    By Yannis in forum 1.x Help
    Replies: 1
    Last Post: Oct 28, 2009, 7:14 PM
  3. Drag Drop
    By designworxz in forum 1.x Help
    Replies: 0
    Last Post: Feb 20, 2009, 12:46 AM
  4. [CLOSED] MultiSelect with drag and drop, Drop listener
    By Jurke in forum 1.x Premium Help
    Replies: 2
    Last Post: Jan 30, 2009, 9:25 AM
  5. Drag & Drop
    By iwen in forum 1.x Premium Help
    Replies: 2
    Last Post: Nov 26, 2008, 2:23 PM

Posting Permissions