[CLOSED] Multiple partial views on single page

  1. #1

    [CLOSED] Multiple partial views on single page

    I've got several partial views that I need to include on the same page - they all work individually but the layout breaks when they are all included... the code is as follows:

    @(Html.X().Panel()
                .Collapsible(true)
                .ID("pnlEditServiceDetails")
                .Layout(LayoutType.Container)
                .Title("SERVICE DETAILS")
                .AutoHeight(true)
                .Items(sections =>
                    {
                        sections.Add(Html.X().Container()
                            .ID("BasicServiceDetails")
                            .Layout(LayoutType.Column)
                            .Padding(10)
                            .AutoHeight(true)
                            .Margins("0 0 0 10")
                            .Items(containers =>
                            {
                                containers.Add(Html.X().Container()
                                    .Layout(LayoutType.Anchor)
                                    .Cls("droppable")
                                    .Items(items =>
                                    {
                                        items.Add(Html.X().Panel()
                                            .ID("pnlBasicServiceDetails")
                                            .ContentFromPage(this, "/Views/Shared/_BasicServiceDetailsPanel.cshtml"));
                                    }));
    
                                containers.Add(Html.X().Container()
                                    .Layout(LayoutType.Anchor)
                                    .Cls("droppable")
                                    .Items(items =>
                                    {
                                        items.Add(Html.X().Panel()
                                            .ID("pnlPlaceDetails")
                                            .ContentFromPage(this, "/Views/Shared/_PlaceDetailsPanel.cshtml"));
                                    }));
    
                                containers.Add(Html.X().Container()
                                    .Layout(LayoutType.Anchor)
                                    .Cls("droppable")
                                    .Items(items =>
                                    {
                                        items.Add(Html.X().Panel()
                                            .ID("pnlRecurringCharges")
                                            .ContentFromPage(this, "/Views/Shared/_RecurringChargesPanel.cshtml"));
                                    }));
    
                                containers.Add(Html.X().Container()
                                    .Layout(LayoutType.Anchor)
                                    .Cls("droppable")
                                    .Items(items =>
                                    {
                                        items.Add(Html.X().Panel()
                                            .ID("pnlContractDetails")
                                            .ContentFromPage(this, "/Views/Shared/_ContractDetailsPanel.cshtml"));
                                    }));
                                    
    
                            }));
                    })
                )
    Last edited by Daniil; May 04, 2012 at 9:52 PM. Reason: [CLOSED]
  2. #2
    Hi,

    ColumnLayout requires Width or ColumnWidth to be set up for its items. The ColumnWidths must always add up to 1 (or 100%) when added together, otherwise your layout may not render as expected.
    http://docs.sencha.com/ext-js/4-1/#!...ntainer.Column
  3. #3
    That doesn't appear to be the problem - I'm basically trying to refactor some code into partial views and it's not working as expected. The original code is:

    Container View:

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Manager</title>
        <link rel="stylesheet" type="text/css" href="/resources/css/main.css" />
        <script type="text/javascript" src="/resources/js/site.js"></script>
    
        <style type="text/css">
            .invite {
                background-color : #99bbe8 !important;
            }
            
            .x-drop-marker {
                background-color : silver;
            }
        </style>
    
        <script type="text/javascript">
            var notifyDrop = function (source, e, data) {
                var targetCt = Ext.getCmp(this.el.dom.id),
                    targetPanel = targetCt.items.get(0),
                    sourceCt = data.panel.ownerCt;
    
                sourceCt.add(targetPanel);
                targetCt.add(data.panel);
    
                Ext.defer(function () {
                    targetPanel.doLayout();
                    data.panel.doLayout();
                }, 1);
            };
    
            var startDrag = function () {
                Ext.select(".droppable").addCls("x-drop-marker");
                Ext.select(".draggable").hide();
                this.panelProxy.moveOnDrag = false;
            };
    
            var endDrag = function () {
                Ext.select(".droppable").removeCls("x-drop-marker");
                Ext.select(".draggable").show();
                Ext.panel.DD.prototype.endDrag.apply(this, arguments);
            };
        </script>
    </head>
    <body>
        <div>
            @(Html.X().ResourceManager()
               .Theme(Theme.Gray)
            )
    
            @(Html.X().Panel()
                .Collapsible(true)
                .ID("pnlBasicServiceDetails")
                .Layout(LayoutType.Container)
                .Title("SERVICE DETAILS")
                .AutoHeight(true)
                .Items(sections =>
                    {
                        sections.Add(Html.X().Container()
                            .ID("BasicServiceDetails")
                            .Layout(LayoutType.Column)
                            .ContentFromPage(this, "/Views/Shared/_BasicServiceDetails.cshtml"));
                    })
                )
    
            @(Html.X().DropTarget()
                .Target("${.droppable}")
                .Group("panelDD")
                .OverClass("invite")
                .NotifyDrop(notifyDrop =>
                {
                    notifyDrop.Fn = "notifyDrop";
                })
                .NotifyOut(notifyOut =>
                {
                    notifyOut.Handler = "this.el.removeCls('invite');";
                })
                .NotifyOver(notifyOver =>
                {
                    notifyOver.Handler = "Ext.select('.droppable').removeCls('invite'); this.el.addCls('invite');";
                }))
        </div>
    </body>
    </html>
    _BasicServiceDetails.cshtml

    @{var outer = Html.X().Container()
            .ID("pnlBasicServiceDetails")
            .Layout(LayoutType.Column)
            .Padding(10)
            .AutoHeight(true)
            .Margins("0 0 0 10")
            .Items(containers =>
            {
                containers.Add(Html.X().Container()
                    .Layout(LayoutType.Fit)
                    .Cls("droppable")
                    .Items(p =>
                        {
                            p.Add(Html.X().Panel()
                                .ID("pnlServiceDetails")
                                .Layout(LayoutType.Column)
                                .Title("BASIC SERVICE DETAILS")
                                .Cls("draggable")
                                .Padding(4)
                                .Width(800)
                                .AutoHeight(true)
                                .Margins("4 0 4 4")
                                .BodyPadding(4)
                                .Items(items =>
                                {
                                    items.Add(Html.X().FieldContainer()
                                        .Layout(LayoutType.Anchor)
                                        .ColumnWidth(0.4)
                                        .Items(fields =>
                                        {
    
                                            fields.Add(Html.X().NumberField()
                                                .ID("txtServiceId")
                                                .FieldLabel("Service Id")
                                                .LabelAlign(LabelAlign.Top)
                                                .Cls("form-label")
                                                .Width(75)
                                                .LabelWidth(200)
                                                .ReadOnly(true)
                                                .Margins("0 0 4 4"));
    
                                            fields.Add(Html.X().TextField()
                                                .ID("txtServiceReference")
                                                .LabelAlign(LabelAlign.Top)
                                                .FieldLabel("Service Reference")
                                                .Width(300)
                                                .LabelWidth(200)
                                                .Cls("form-label")
                                                .Margins("0 0 4 4"));
    
                                            fields.Add(Html.X().TextField()
                                                .ID("txtServiceName")
                                                .FieldLabel("Service Name")
                                                .LabelAlign(LabelAlign.Top)
                                                .Cls("form-label")
                                                .Width(300)
                                                .LabelWidth(200)
                                                .Margins("0 0 4 4"));
    
                                            fields.Add(Html.X().TextField()
                                                .ID("txtServiceAlias")
                                                .LabelAlign(LabelAlign.Top)
                                                .FieldLabel("Service Alias")
                                                .Width(300)
                                                .LabelWidth(200)
                                                .Cls("form-label")
                                                .Margins("0 0 4 4"));
                                        }));
    
                                    items.Add(Html.X().FieldContainer()
                                        .Layout(LayoutType.Anchor)
                                        .ColumnWidth(0.3)
                                        .Margins("0 0 0 8")
                                        .Items(fields =>
                                        {
                                            fields.Add(Html.X().ComboBox()
                                                .FieldLabel("Service Status")
                                                .LabelAlign(LabelAlign.Top)
                                                .ID("ddlServiceStatus")
                                                .Margins("0 0 0 0")
                                                .LabelWidth(200)
                                                .Width(200)
                                                .EmptyText("--- Please Select ---")
                                                .Cls("form-label")
                                                .DisplayField("ServiceStatusName")
                                                .ValueField("ServiceStatusId")
                                                .Store(store => store.Add(Html.X().Store()
                                                                .AutoLoad(true)
                                                                .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                                                                    .Url("/Services/RetrieveServiceStatuses/")
                                                                    .Reader(reader => reader.Add(Html.X().JsonReader()
                                                                            .Root("data")
                                                                            .TotalProperty("total")
                                                                            ))
                                                                        ))
                                                                .Model(model => model.Add(Html.X().Model()
                                                                    .Fields(modelFields =>
                                                                    {
                                                                        modelFields.Add(Html.X().ModelField().Name("ServiceStatusID"));
                                                                        modelFields.Add(Html.X().ModelField().Name("ServiceStatusName"));
                                                                    })
                                                                ))
                                                            )
                                                        )
                                                );
    
                                            fields.Add(Html.X().ComboBox()
                                                .FieldLabel("Commercial Status")
                                                .LabelAlign(LabelAlign.Top)
                                                .ID("ddlCommercialStatus")
                                                .Margins("0 0 0 0")
                                                .LabelWidth(200)
                                                .Width(200)
                                                .EmptyText("--- Please Select ---")
                                                .Cls("form-label")
                                                .DisplayField("CommercialStatusName")
                                                .ValueField("CommercialStatusId")
                                                .Store(store => store.Add(Html.X().Store()
                                                                .AutoLoad(true)
                                                                .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                                                                    .Url("/Services/RetrieveCommercialStatuses/")
                                                                    .Reader(reader => reader.Add(Html.X().JsonReader()
                                                                            .Root("data")
                                                                            .TotalProperty("total")
                                                                            ))
                                                                        ))
                                                                .Model(model => model.Add(Html.X().Model()
                                                                    .Fields(modelFields =>
                                                                    {
                                                                        modelFields.Add(Html.X().ModelField().Name("CommercialStatusID"));
                                                                        modelFields.Add(Html.X().ModelField().Name("CommercialStatusName"));
                                                                    })
                                                                ))
                                                            )
                                                        )
                                                );
    
                                            fields.Add(Html.X().TextField()
                                                .FieldLabel("Parent Product Type")
                                                .LabelAlign(LabelAlign.Top)
                                                .ID("txtParentProductType")
                                                .Margins("0 0 0 0")
                                                .LabelWidth(200)
                                                .Width(200)
                                                .Cls("form-label"));
    
    
                                        }));
    
    
    
    
                                })
                            );
                        }
                    ));
    
                containers.Add(Html.X().Container()
                    .Layout(LayoutType.Fit)
                    .Cls("droppable")
                    .Items(p =>
                        {
                            p.Add(Html.X().Panel()
                                    .Draggable(true)
                                    .AutoHeight(true)
                                    .ID("pnlPlaceDetails")
                                    .Layout(LayoutType.Column)
                                    .Title("PLACE DETAILS")
                                    .Cls("draggable")
                                    .Padding(4)
                                    .Width(800)
                                    .Margins("4 0 4 4"));
                        }));
    
                
    
                containers.Add(Html.X().Container()
                    .Layout(LayoutType.Fit)
                    .Cls("droppable")
                    .Items(p =>
                        {
                            p.Add(Html.X().Panel()
                                .ID("pnlContractDetails")
                                .Layout(LayoutType.Column)
                                .Title("CONTRACT DETAILS")
                                .Cls("draggable")
                                .Padding(4)
                                .Width(800)
                                .AutoHeight(true)
                                .Margins("4 0 4 4")
                                .BodyPadding(4)
                                .Items(items =>
                                {
    
                                    items.Add(Html.X().FieldContainer()
                                        .Layout(LayoutType.Anchor)
                                        .ColumnWidth(0.4)
                                        .Margins("0 0 0 8")
                                        .Items(fields =>
                                        {
                                            fields.Add(Html.X().NumberField()
                                                .ID("txtQuotedLeadTime")
                                                .FieldLabel("Quoted Lead Time (weeks)")
                                                .LabelAlign(LabelAlign.Top)
                                                .LabelCls("numberFieldWidth")
                                                .Cls("form-label")
                                                .Width(75)
                                                .LabelWidth(300)
                                                .Margins("0 0 4 4"));
    
                                            fields.Add(Html.X().DateField()
                                                .ID("txtCustomerCommitDate")
                                                .FieldLabel("Customer Commit Date")
                                                .LabelAlign(LabelAlign.Top)
                                                .Cls("form-label")
                                                .LabelWidth(200)
                                                .Margins("0 0 4 4"));
    
                                            fields.Add(Html.X().DateField()
                                                .ID("txtForecastDate")
                                                .FieldLabel("Forecasted Date")
                                                .LabelAlign(LabelAlign.Top)
                                                .Cls("form-label")
                                                .LabelWidth(200)
                                                .Margins("0 0 4 4"));
                                            
                                            
                                        }));
    
                                    items.Add(Html.X().FieldContainer()
                                        .Layout(LayoutType.Anchor)
                                        .ColumnWidth(0.3)
                                        .Margins("0 0 0 8")
                                        .Items(fields =>
                                        {
    
                                            fields.Add(Html.X().NumberField()
                                                .ID("txtContractTermMonth")
                                                .FieldLabel("Contract Term (months)")
                                                .LabelAlign(LabelAlign.Top)
                                                .LabelCls("numberFieldWidth")
                                                .Cls("form-label")
                                                .Width(75)
                                                .LabelWidth(300)
                                                .Margins("0 0 4 4"));
    
                                            fields.Add(Html.X().DateField()
                                                .ID("txtContractExpiryDate")
                                                .FieldLabel("Contract Expiry Date")
                                                .LabelAlign(LabelAlign.Top)
                                                .Cls("form-label")
                                                .LabelWidth(200)
                                                .Margins("0 0 4 4"));
    
                                            fields.Add(Html.X().DateField()
                                                .ID("txtImplementedDate")
                                                .FieldLabel("Implemented Date")
                                                .LabelAlign(LabelAlign.Top)
                                                .Cls("form-label")
                                                .LabelWidth(200)
                                                .Margins("0 0 4 4"));
                                        }));
                                }));
                        }));
                
                containers.Add(Html.X().Container()
                    .Layout(LayoutType.Fit)
                    .Cls("droppable")
                    .Items(p =>
                    {
                        p.Add(Html.X().Panel()
                                .Draggable(true)
                                .ID("pnlRecurringCharges")
                                .Layout(LayoutType.Column)
                                .Title("RECURRING CHARGES")
                                .Cls("draggable")
                                .Padding(4)
                                .Width(800)
                                .AutoHeight(true)
                                .Margins("4 0 4 4")
                                .BodyPadding(4)
                                .Items(items =>
                                {
                                    items.Add(Html.X().FieldContainer()
                                         .Layout(LayoutType.Anchor)
                                         .ColumnWidth(0.4)
                                         .Margins("0 0 0 8")
                                         .Items(fields =>
                                         {
                                             fields.Add(Html.X().DateField()
                                                 .ID("txtPricingLineStartDate")
                                                 .FieldLabel("Pricing Line Start Date")
                                                 .LabelAlign(LabelAlign.Top)
                                                 .Cls("form-label")
                                                 .LabelWidth(200)
                                                 .Margins("0 0 4 4"));
    
                                             fields.Add(Html.X().DateField()
                                                 .ID("txtPricingLineEndDate")
                                                 .FieldLabel("Pricing Line End Date")
                                                 .LabelAlign(LabelAlign.Top)
                                                 .Cls("form-label")
                                                 .LabelWidth(200)
                                                 .Margins("0 0 4 4"));
    
                                             //monthly, yearly, quarterly
                                             fields.Add(Html.X().ComboBox()
                                                .FieldLabel("Invoice Frequency")
                                                .LabelAlign(LabelAlign.Top)
                                                .ID("ddlInvoiceFrequency")
                                                .Margins("0 0 0 0")
                                                .LabelWidth(200)
                                                .Width(200)
                                                .EmptyText("--- Please Select ---")
                                                .Cls("form-label")
                                                .Items(dd =>
                                                {
                                                    dd.Add(new ListItem("Daily", "2"));
                                                    dd.Add(new ListItem("Weekly", "3"));
                                                    dd.Add(new ListItem("Fortnightly", "4"));
                                                    dd.Add(new ListItem("Monthly", "5"));
                                                    dd.Add(new ListItem("BiMonthly", "6"));
                                                    dd.Add(new ListItem("Quarterly", "7"));
                                                    dd.Add(new ListItem("Annually", "8"));
                                                    dd.Add(new ListItem("Biennially", "9"));
                                                }));
    
                                             //in advance, in arrears
                                             fields.Add(Html.X().ComboBox()
                                                .FieldLabel("Pricing Charge Date")
                                                .LabelAlign(LabelAlign.Top)
                                                .ID("ddlChargeDate")
                                                .Margins("0 0 0 0")
                                                .LabelWidth(200)
                                                .Width(200)
                                                .EmptyText("--- Please Select ---")
                                                .Cls("form-label")
                                                .Items(dd =>
                                                {
                                                    dd.Add(new ListItem("In advance", "1"));
                                                    dd.Add(new ListItem("In arrears", "2"));
                                                }));
    
                                             //monthly, yearly, quarterly
                                             fields.Add(Html.X().ComboBox()
                                                .FieldLabel("Invoice Sending Frequency")
                                                .LabelAlign(LabelAlign.Top)
                                                .ID("ddlInvoiceSendingFrequency")
                                                .Margins("0 0 0 0")
                                                .LabelWidth(200)
                                                .Width(200)
                                                .EmptyText("--- Please Select ---")
                                                .Cls("form-label")
                                                .Items(dd =>
                                                {
                                                    dd.Add(new ListItem("Daily", "2"));
                                                    dd.Add(new ListItem("Weekly", "3"));
                                                    dd.Add(new ListItem("Fortnightly", "4"));
                                                    dd.Add(new ListItem("Monthly", "5"));
                                                    dd.Add(new ListItem("BiMonthly", "6"));
                                                    dd.Add(new ListItem("Quarterly", "7"));
                                                    dd.Add(new ListItem("Annually", "8"));
                                                    dd.Add(new ListItem("Biennially", "9"));
                                                }));
    
                                         }));
    
                                    items.Add(Html.X().FieldContainer()
                                         .Layout(LayoutType.Anchor)
                                         .ColumnWidth(0.3)
                                         .Margins("0 0 0 8")
                                         .Items(fields =>
                                         {
                                             fields.Add(Html.X().NumberField()
                                                     .ID("txtPriceExGST")
                                                     .FieldLabel("Price (ex GST)")
                                                     .LabelAlign(LabelAlign.Top)
                                                     .Cls("form-label")
                                                     .LabelWidth(200)
                                                     .Margins("0 0 4 4"));
    
                                             // Contracted Power, Reservation Power
                                             //must be updated to use a ajax store populated from database|
                                             fields.Add(Html.X().ComboBox()
                                                .FieldLabel("Pricing Line Item Type")
                                                .LabelAlign(LabelAlign.Top)
                                                .ID("ddlPricingLineItemType")
                                                .Margins("0 0 0 0")
                                                .LabelWidth(200)
                                                .Width(200)
                                                .EmptyText("--- Please Select ---")
                                                .Cls("form-label")
                                                .Items(dd =>
                                                {
                                                    dd.Add(new ListItem("Contracted Power", "1"));
                                                    dd.Add(new ListItem("Reservation Power", "2"));
                                                    dd.Add(new ListItem("Recurring", "5"));
                                                }));
    
                                             //Fixed Price, Per Usage
                                             //must be updated to use a ajax store populated from database|
                                             fields.Add(Html.X().ComboBox()
                                                .FieldLabel("Service Price Type")
                                                .LabelAlign(LabelAlign.Top)
                                                .ID("ddlServicePriceType")
                                                .Margins("0 0 0 0")
                                                .LabelWidth(200)
                                                .Width(200)
                                                .EmptyText("--- Please Select ---")
                                                .Cls("form-label")
                                                .Items(dd =>
                                                {
                                                    dd.Add(new ListItem("Fixed Price", "1"));
                                                    dd.Add(new ListItem("Price Per Usage", "2"));
                                                }));
    
                                             //Usage Related Fields
                                             //Power Usage, Volume Usage
                                             //must be updated to use a ajax store populated from database|
                                             fields.Add(Html.X().ComboBox()
                                                .FieldLabel("Service Usage Type")
                                                .LabelAlign(LabelAlign.Top)
                                                .ID("ddlServiceUsageType")
                                                .Margins("0 0 0 0")
                                                .LabelWidth(200)
                                                .Width(200)
                                                .EmptyText("--- Please Select ---")
                                                .Cls("form-label")
                                                .Items(dd =>
                                                {
                                                    dd.Add(new ListItem("Power Usage", "1"));
                                                    dd.Add(new ListItem("Data Volume Usage", "2"));
                                                }));
    
                                             //kWt, Mb
                                             //must be updated to use a ajax store populated from database
                                             fields.Add(Html.X().ComboBox()
                                                .FieldLabel("Service Usage Units")
                                                .LabelAlign(LabelAlign.Top)
                                                .ID("ddlServiceUsageUnits")
                                                .Margins("0 0 0 0")
                                                .LabelWidth(200)
                                                .Width(200)
                                                .EmptyText("--- Please Select ---")
                                                .Cls("form-label")
                                                .Items(dd =>
                                                {
                                                    dd.Add(new ListItem("kWh", "1"));
                                                    dd.Add(new ListItem("kb", "2"));
                                                }));
    
    
                                         }));
    
                                    items.Add(Html.X().FieldContainer()
                                         .Layout(LayoutType.Anchor)
                                         .ColumnWidth(0.3)
                                         .Margins("0 0 0 8")
                                         .Items(fields =>
                                         {
                                             fields.Add(Html.X().TextArea()
                                                 .FieldLabel("Pricing Line Description")
                                                 .LabelAlign(LabelAlign.Top)
                                                 .ID("txtPricingLineDescription")
                                                 .Margins("0 0 0 0")
                                                 .LabelWidth(200)
                                                 .Width(200)
                                                 .Height(200)
                                                 .Cls("form-label"));
                                         }));
                                }));
                    }));
    
            });
        }
    
    
        @outer
    This works basically as expected - now I need to modularise the view by creating partial views for each section on the page. I've done this by putting each of the panels in a partial view and setting up the container view like so:

    Container:

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Service Manager</title>
        <link rel="stylesheet" type="text/css" href="/resources/css/main.css" />
        <script type="text/javascript" src="/resources/js/site.js"></script>
    
        <style type="text/css">
            .invite {
                background-color : #99bbe8 !important;
            }
            
            .x-drop-marker {
                background-color : silver;
            }
        </style>
    </head>
    <body>
        <div>
            @(Html.X().ResourceManager()
               .Theme(Theme.Gray)
            )
    
            @(Html.X().Panel()
                .Collapsible(true)
                .ID("pnlEditServiceDetails")
                .Layout(LayoutType.Container)
                .Title("SERVICE DETAILS")
                .AutoHeight(true)
                .Items(sections =>
                    {
                        sections.Add(Html.X().Container()
                            .ID("BasicServiceDetails")
                            .Layout(LayoutType.Column)
                            .Padding(10)
                            .AutoHeight(true)
                            .Margins("0 0 0 10")
                            .Items(containers =>
                            {
                                containers.Add(Html.X().Container()
                                    .Layout(LayoutType.Fit)
                                    .Cls("droppable")
                                    .AutoHeight(true)
                                    .Width(800)
                                    .Items(items =>
                                    {
                                        items.Add(Html.X().Panel()
                                            .ID("pnlBasicServiceDetails")
                                            .ContentFromPage(this, "/Views/Shared/_BasicServiceDetailsPanel.cshtml"));
                                    }));
    
                                containers.Add(Html.X().Container()
                                    .Layout(LayoutType.Fit)
                                    .Width(800)
                                    .Cls("droppable")
                                    .AutoHeight(true)
                                    .Items(items =>
                                    {
                                        items.Add(Html.X().Panel()
                                            .ID("pnlPlaceDetails")
                                            .ContentFromPage(this, "/Views/Shared/_PlaceDetailsPanel.cshtml"));
                                    }));
    
                                containers.Add(Html.X().Container()
                                    .Layout(LayoutType.Fit)
                                    .AutoHeight(true)
                                    .Width(800)
                                    .Cls("droppable")
                                    .Items(items =>
                                    {
                                        items.Add(Html.X().Panel()
                                            .ID("pnlRecurringCharges")
                                            .ContentFromPage(this, "/Views/Shared/_RecurringChargesPanel.cshtml"));
                                    }));
    
                                containers.Add(Html.X().Container()
                                    .Layout(LayoutType.Fit)
                                    .Width(800)
                                    .Cls("droppable")
                                    .AutoHeight(true)
                                    .Items(items =>
                                    {
                                        items.Add(Html.X().Panel()
                                            .ID("pnlContractDetails")
                                            .ContentFromPage(this, "/Views/Shared/_ContractDetailsPanel.cshtml"));
                                    }));
                                    
    
                            }));
                    })
                )
        </div>
    </body>
    </html>
    Example partial view:
    @(Html.X().Panel()
        .ID("pnlBasicServiceDetails")
        .Layout(LayoutType.Column)
        .AnchorHorizontal("100%")
        .Title("BASIC SERVICE DETAILS")
        .Cls("draggable")
        .Padding(4)
        .Width(800)
        .AutoHeight(true)
        .Margins("4 0 4 4")
        .BodyPadding(4)
        .Items(items =>
        {
            items.Add(Html.X().FieldContainer()
                .Layout(LayoutType.Anchor)
                .ColumnWidth(0.4)
                .Items(fields =>
                {
    
                    fields.Add(Html.X().NumberField()
                        .ID("txtServiceId")
                        .FieldLabel("Service Id")
                        .LabelAlign(LabelAlign.Top)
                        .Cls("form-label")
                        .Width(75)
                        .LabelWidth(200)
                        .ReadOnly(true)
                        .Margins("0 0 4 4"));
    
                    fields.Add(Html.X().TextField()
                        .ID("txtServiceReference")
                        .LabelAlign(LabelAlign.Top)
                        .FieldLabel("Service Reference")
                        .Width(300)
                        .LabelWidth(200)
                        .Cls("form-label")
                        .Margins("0 0 4 4"));
    
                    fields.Add(Html.X().TextField()
                        .ID("txtServiceName")
                        .FieldLabel("Service Name")
                        .LabelAlign(LabelAlign.Top)
                        .Cls("form-label")
                        .Width(300)
                        .LabelWidth(200)
                        .Margins("0 0 4 4"));
    
                    fields.Add(Html.X().TextField()
                        .ID("txtServiceAlias")
                        .LabelAlign(LabelAlign.Top)
                        .FieldLabel("Service Alias")
                        .Width(300)
                        .LabelWidth(200)
                        .Cls("form-label")
                        .Margins("0 0 4 4"));
                }));
    
            items.Add(Html.X().FieldContainer()
                .Layout(LayoutType.Anchor)
                .ColumnWidth(0.3)
                .Margins("0 0 0 8")
                .Items(fields =>
                {
                    fields.Add(Html.X().ComboBox()
                        .FieldLabel("Service Status")
                        .LabelAlign(LabelAlign.Top)
                        .ID("ddlServiceStatus")
                        .Margins("0 0 0 0")
                        .LabelWidth(200)
                        .Width(200)
                        .EmptyText("--- Please Select ---")
                        .Cls("form-label")
                        .DisplayField("ServiceStatusName")
                        .ValueField("ServiceStatusId")
                        .Store(store => store.Add(Html.X().Store()
                                        .AutoLoad(true)
                                        .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                                            .Url("/Services/RetrieveServiceStatuses/")
                                            .Reader(reader => reader.Add(Html.X().JsonReader()
                                                    .Root("data")
                                                    .TotalProperty("total")
                                                    ))
                                                ))
                                        .Model(model => model.Add(Html.X().Model()
                                            .Fields(modelFields =>
                                            {
                                                modelFields.Add(Html.X().ModelField().Name("ServiceStatusID"));
                                                modelFields.Add(Html.X().ModelField().Name("ServiceStatusName"));
                                            })
                                        ))
                                    )
                                )
                        );
    
                    fields.Add(Html.X().ComboBox()
                        .FieldLabel("Commercial Status")
                        .LabelAlign(LabelAlign.Top)
                        .ID("ddlCommercialStatus")
                        .Margins("0 0 0 0")
                        .LabelWidth(200)
                        .Width(200)
                        .EmptyText("--- Please Select ---")
                        .Cls("form-label")
                        .DisplayField("CommercialStatusName")
                        .ValueField("CommercialStatusId")
                        .Store(store => store.Add(Html.X().Store()
                                        .AutoLoad(true)
                                        .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                                            .Url("/Services/RetrieveCommercialStatuses/")
                                            .Reader(reader => reader.Add(Html.X().JsonReader()
                                                    .Root("data")
                                                    .TotalProperty("total")
                                                    ))
                                                ))
                                        .Model(model => model.Add(Html.X().Model()
                                            .Fields(modelFields =>
                                            {
                                                modelFields.Add(Html.X().ModelField().Name("CommercialStatusID"));
                                                modelFields.Add(Html.X().ModelField().Name("CommercialStatusName"));
                                            })
                                        ))
                                    )
                                )
                        );
    
                    fields.Add(Html.X().TextField()
                        .FieldLabel("Parent Product Type")
                        .LabelAlign(LabelAlign.Top)
                        .ID("txtParentProductType")
                        .Margins("0 0 0 0")
                        .LabelWidth(200)
                        .Width(200)
                        .Cls("form-label"));
                }));
        })
        )
    this works to some extent but only the first partial view renders correctly, the others seem to be hidden behind some broken styles. The error I get if i debug is:

    Node cannot be inserted at the specified point in the hierarchy
    Ext.getDom(el).appendChild(this.dom);

    any ideas where i'm going wrong?
  4. #4
    You should use ItemsFromPage instead of ContentFromPage to cause the items from the partial views to be participated in layout logic.
    Last edited by Daniil; May 03, 2012 at 9:10 AM.

Similar Threads

  1. [CLOSED] [MVC] Cascading multi Partial views
    By UnifyEducation in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: May 10, 2012, 2:10 PM
  2. [CLOSED] [Razor] using partial views
    By machinableed in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 25, 2012, 9:40 AM
  3. [CLOSED] Razor and Ext.Net base and partial views
    By boris in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 01, 2012, 3:45 PM
  4. Adding multiple partial views in single call
    By Tallmaris in forum 1.x Help
    Replies: 0
    Last Post: Sep 14, 2011, 1:26 PM
  5. Replies: 0
    Last Post: Oct 15, 2009, 6:07 AM

Posting Permissions