[CLOSED] Loading another view on the center region of ViewPort using MVC 3

  1. #1

    [CLOSED] Loading another view on the center region of ViewPort using MVC 3

    I am trying to load another view using below code in my layout "_LayoutViewPort.cshtml".
     X.Panel()
                            .Title("Content")
                            .Border(false)
                            .BodyPadding(6)
                            .ID("ContentTab")
                            .Loader(X.ComponentLoader()
                                            .Url("~/Examples")
                                            .AutoLoad(true)
    
                            )

    The view loaded in the content tab/center pages doesn't support Ext.Net control, but it shows any other HTML controls. Please help.

    Here is my main layout "_LayoutViewPort.cshtml":
    <!DOCTYPE html>
    @{
        var X = Html.X();
    }
    <html>
    <head>
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    </head>
    <body>
        @Html.X().ResourceManager()
        @(X.Viewport()
            .Layout(LayoutType.Border)
            .Items(
                     X.Panel()
                    .Title("BIRDIE")
                    .Region(Region.West)
                    .Collapsible(true)
                    .Width(225)
                    //.MinWidth(225)
                    .MaxWidth(400)
                    .Split(true)
                    .Items(
    
                            X.Image()
                                    .ID("image")
                                    .ImageUrl("~/Images/logo.jpg")
                                    .StyleSpec("width: 100px;")
                                    ,
    
    
    
                X.Panel()
                     //.Layout(LayoutType.Accordion)
                    .Items(
                        Html.X().MenuPanel()
                                         .Title("Process")
                                         .Icon(Ext.Net.Icon.Add)
                                         .Collapsible(true)
                                         .Collapsed(false)
                                         .TitleCollapse(true)
                                         .Menu(menu =>
                                         {
                                             menu.Items.Add(
                                             Html.X().MenuItem()
                                             .Text("Apply Adjustment")
                                             .Icon(Ext.Net.Icon.ArrowSwitch)
                                             );
                                             menu.Items.Add(
                                             Html.X().MenuItem()
                                             .Text("Verify Payroll")
                                             .Icon(Ext.Net.Icon.ArrowSwitch)
                                             );
    
    
                                         }),
    
                          Html.X().MenuPanel()
                                        .Title("Maintenance")
                                        .Icon(Ext.Net.Icon.ArrowSwitch)
                                        .Collapsible(true)
                                        .Collapsed(false)
                                        .TitleCollapse(true)
                                        .Menu(menu =>
                                        {
                                            menu.Items.Add(
                                                         Html.X().MenuItem()
                                                          .Text("Maintain Depot")
                                                          .Icon(Ext.Net.Icon.ArrowSwitch)
                                                          );
                                            menu.Items.Add(
                                                       Html.X().MenuItem()
                                                           .Text("Maintain Employee")
                                                           .Icon(Ext.Net.Icon.ArrowSwitch)
                                                          );
                                            menu.Items.Add(
                                                        Html.X().MenuItem()
                                                            .Text("Maintain Permission")
                                                            .Icon(Ext.Net.Icon.ArrowSwitch)
                                                          );
                                            menu.Items.Add(
                                                        Html.X().MenuItem()
                                                            .Text("Maintain Relief Runner")
                                                            .Icon(Ext.Net.Icon.ArrowSwitch)
                                                          );
    
                                        }),
    
                                     Html.X().MenuPanel()
                                                .Title("Report")
                                                .Icon(Ext.Net.Icon.ArrowSwitch)
                                                .Collapsible(true)
                                                .Collapsed(false)
                                                .TitleCollapse(true)
                                                .Menu(menu =>
                                                {
                                                    menu.Items.Add(
                                                                 Html.X().MenuItem()
                                                                  .Text("Commission Report")
                                                                  .Icon(Ext.Net.Icon.ArrowSwitch)
                                                                  );
                                                    menu.Items.Add(
                                                               Html.X().MenuItem()
                                                                   .Text("Adjustment Report")
                                                                   .Icon(Ext.Net.Icon.ArrowSwitch)
                                                                  );
                                                    menu.Items.Add(
                                                                Html.X().MenuItem()
                                                                    .Text("Route Runner Report")
                                                                    .Icon(Ext.Net.Icon.ArrowSwitch)
                                                                  );
                                                    menu.Items.Add(
                                                                Html.X().MenuItem()
                                                                    .Text("Payroll Report")
                                                                    .Icon(Ext.Net.Icon.ArrowSwitch)
                                                                  );
    
                                                })
                                        )
                                        ),
    
    
    
                X.TabPanel()
                    .Region(Region.Center)
                    .Items(
                        X.Panel()
                            .Title("Content")
                            .Border(false)
                            .BodyPadding(6)
                            .ID("ContentTab")
                            .Loader(X.ComponentLoader()
                                            .Url("~/Examples")
                                            .AutoLoad(true)
    
                            )
    
                            //~/Views/Shared/_LayoutViewPort.cshtml
                //.LoadContent("~/Views/TestView.cshtml")
    
    
    
                            //,
                //X.Panel()
                //    .Title("Close Me")
                //    .Closable(true)
                //    .Border(false)
                //    .BodyPadding(6)
                //    .Html("Closeable Tab")
                    )
                //    ,
                //X.Panel()
                //    .Title("South")
                //    .Region(Region.South)
                //    .Split(true)
                //    .Collapsible(true)
                //    .Height(150)
                //    .BodyPadding(6)
                //    .Html("South")
            )
        )
        <div id="headtag">
            @RenderSection("headtag", required: false)
        </div>
        <div id="example">
            @RenderSection("example", required: false)
        </div>
        <div id="main">
            @RenderBody()
        </div>
        <div id="footer">
        </div>
    </body>
    </html>
    Here is my content view page:
    
    
    @{
        ViewBag.Title = "Button Control Variations - Ext.NET MVC Examples";
        Layout = "~/Views/Shared/_LayoutContent.cshtml";
        var X = Html.X();
    }
    
    <h2>Index</h2>
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Infinite Scrolling - Ext.NET Examples</title>
    </head>
    <body>    
        @Html.X().ResourceManager()
     
        <h1>Infinite Scrolling</h1>
      
    
         <p>The brand new GridPanel supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>
             
        <p>The GridPanel uses a new virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.</p>
         <p>The brand new GridPanel supports infinite scrolling, which enables you to load any number of records into a grid without paging.</p>
             
        
         
        <br />
        <table>
        <tr>
        <td>Test Table</td></tr></table>
        @(X.Button()
        .Text("TestButton")
        )
       <p>yhios is a test</p>
     
        @(Html.X().GridPanel()
            .Title("Stock Price")
            .Height(500)
            .Width(500)
            .InvalidateScrollerOnRefresh(false)
            .DisableSelection(true)
            .Store(store => store.Add(Html.X().Store()
                .PageSize(100)
                .Buffered(true)
                .AutoLoad(true)
                .Proxy(proxy => proxy.Add(Html.X().AjaxProxy()
                            .Url("/Data/GetData/")
                            .Reader(reader => reader.Add(Html.X().JsonReader()
                                        .Root("data")
                                    ))
                            ))
                
                .Model(model => model.Add(Html.X().Model()
                            .Fields(fields => {
                                fields.Add(Html.X().ModelField().Name("Company")); 
                                fields.Add(Html.X().ModelField().Name("Price"));
                                fields.Add(Html.X().ModelField().Name("LastUpdate").Type(ModelFieldType.Date));
                            })
                        ))
                ))
            //.VerticalScroller(scroller => scroller.Add(Html.X().GridPagingScroller()))      
            .ColumnModel(columnModel => {
                columnModel.Columns.Add(Html.X().RowNumbererColumn().Width(50).Sortable(false));
                columnModel.Columns.Add(Html.X().Column()
                                                .Text("Company")
                                                .DataIndex("Company")
                                                .Flex(1));
                columnModel.Columns.Add(Html.X().Column()
                                                .Text("Price")
                                                .DataIndex("Price")
                                                .Width(70));
                columnModel.Columns.Add(Html.X().DateColumn()
                                                .Text("LastUpdate")
                                                .DataIndex("LastUpdate")
                                                .Width(140)
                                                .Format("HH:mm:ss"));
            })
            .View(view => view.Add(Html.X().GridView().TrackOver(false)))
            .Listeners(listeners => {
                listeners.AfterRender.Handler = "this.store.guaranteeRange(0, 99);";
                listeners.AfterRender.Delay = 100; 
            })
            
        )
    </body>
    </html>
    
    Here is my _LayoutContent.cshtml:
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    </head>
    <body>
        <div>
            <div id="header">
                <div id="title">
                    <h1>My MVC Application</h1>
                </div>
            
            </div>
            <div id="Menu">
            @RenderSection("Menu", required: false)
            
            </div>
            
            <div id="headtag">
            @RenderSection("headtag", required: false)
            
            </div>
    
            <div id="example">
            @RenderSection("example",required:false)
            
            </div>
            <div id="main">
                @RenderBody()
            </div>
            <div id="footer">
            </div>
        </div>
    </body>
    </html>
    Last edited by Daniil; Apr 15, 2014 at 3:39 PM. Reason: [CLOSED]
  2. #2
    Hi @Fahd,

    So, what does the code produce? What is the result? Any errors, exceptions?

    You might need to set up Frame .Mode for the Loader.
  3. #3
    Thank you. That was it.

Similar Threads

  1. Replies: 8
    Last Post: Jan 21, 2015, 2:44 PM
  2. Replies: 2
    Last Post: Sep 17, 2013, 5:53 AM
  3. [CLOSED] Printing the center region of a viewport
    By blueworld in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 29, 2013, 3:00 PM
  4. Replies: 2
    Last Post: Jun 18, 2012, 6:43 PM
  5. Replies: 5
    Last Post: Mar 22, 2012, 2:12 PM

Posting Permissions