[CLOSED] Center align content when using MVC Layout page with ContentFromSection OR @RenderBody

  1. #1

    [CLOSED] Center align content when using MVC Layout page with ContentFromSection OR @RenderBody

    Hi Support,

    I'm working on MVC application with Ext.Net 4. I've problem align the content of the view to center of the page While using MVC layout. FYI, I only want content coming from view to be center aligned not the Layout controls too.

    I've tried rendering view Content with @RenderBody() and also ContentFromSection.

    Here is the sample code for you to play around,

    Layout

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width"/>
        <title>@ViewBag.Title</title>
    
    </head>
    <body>
    @{
        var X = Html.X();
    }
    
    
    @(Html.X().ResourceManager())
    
    @(X.Viewport()
          .Layout(LayoutType.Anchor)
          .Items(
              X.Container()
                  .Border(true)
                  .ID("TopPanel")
                  .Items(
                      X.Toolbar()
                          .ID("ToolBarContent")
                          .Items(
                              X.ComboBox()
                                  .ID("cmbTest1")
                                  .Editable(false)
                                  .Width(300)
                                  .LabelWidth(50)
                                  .MarginSpec("0 5 0 5")
                                  .FieldLabel("Combo1:")
                                  .Items(
                                      new Ext.Net.ListItem("Item 1", "1"),
                                      new Ext.Net.ListItem("Item 2", "2")
                                  )
                          )
                      ,
                      X.Toolbar()
                          .ID("ToolBarMenu")
                          .Items(
                              X.Button()
                                  .ID("MenuGlobalSetupButton")
                                  .Text("Menu")
                                  .Icon(Icon.World)
                                  .Menu(
                                      X.Menu()
                                          .Icon(Icon.ArrowDown)
                                          .Header(false)
                                          .Items(X.MenuItem()
                                              .ID("MenuHomeItem")
                                              .Icon(Icon.BulletWrench)
                                              .Text("Home")
                                              .Href(@Url.Action("Index", "Home")),
                                              X.MenuItem()
                                                  .ID("MenuFooItem")
                                                  .Icon(Icon.BulletWrench)
                                                  .Text("Foo Setup")
                                                  .Href(@Url.Action("Index", "Foo"))
                                          )
                                  )
                          )
                  ),
              X.Container().ID("PageBody")
                  //.Layout(LayoutType.VBox)
                  //.LayoutConfig(l => l.Add(new VBoxLayoutConfig() { Align = VBoxAlign.Center, Pack = BoxPack.Center }))
                  .ContentFromSection(this, "pageBody")
                  @*.Content(
                      @<text>
                          @RenderBody()
                       </text>
                  )*@
          ))
    @RenderSection("scripts", required: false)
    </body>
    </html>
    Controller

    using System;
    using System.Web.Mvc;
    using Ext.Net;
    using Ext.Net.MVC;
    using MvcTest.Models;
    
    namespace MvcTest.Controllers
    {
        public class FooController : Controller
        {
    
            public ActionResult Index()
            {
                var model = new FooModel()
                {
                    TextValue = "TextValue",
                    DateTimeValue = DateTime.Now,
                    ComboValue1 = new ListItem("Item 1", "1"),
                    ComboValue2 = new ListItem[]
                    {
                        new ListItem("Item 1", "1"),
                        new ListItem("Item 5", "5")
                    },
                    ComboValue3 = "1",
                    CheckboxValue = true,
                    NumberValue = 1,
                    MultiSliderValue = new int[] { 10, 40, 70 },
    
                    Data = new ListItem[]
                    {
                        new ListItem("Item 1", "1"),
                        new ListItem("Item 2", "2"),
                        new ListItem("Item 3", "3"),
                        new ListItem("Item 4", "4"),
                        new ListItem("Item 5", "5")
                    }
                };
                return View("FooView", model);
    
            }
        }
    }
    Foo View

    @model MvcTest.Models.FooModel
    @{
        ViewBag.Title = "Foo";
    }
    @section pageBody {
        <h1>Foo</h1>
    
        @(
            Html.X().FormPanel()
                .Layout(LayoutType.Form)
                .Width(350)
                .FieldDefaults(d => { d.LabelWidth = 150; })
                .BodyPadding(10)
                .Frame(true)
                .Items(
                    Html.X().TextFieldFor(m => m.TextValue),
                    Html.X().DateFieldFor(m => m.DateTimeValue),
                    Html.X().ComboBoxFor(m => m.ComboValue1).Items(Model.Data),
                    Html.X().ComboBoxFor(m => m.ComboValue2).Items(Model.Data),
                    Html.X().ComboBoxFor(m => m.ComboValue3).Items(Model.Data),
                    Html.X().CheckboxFor(m => m.CheckboxValue),
                    Html.X().NumberFieldFor(m => m.NumberValue),
                    Html.X().SliderFor(m => m.MultiSliderValue)
                )
                .Buttons(
                    Html.X().Button()
                        .Text("Save")
                        .Icon(Icon.Disk)
                        .FormBind(true)
                        .DirectEvents(de =>
                        {
                            de.Click.Url = Url.Action("Index");
                            de.Click.Method = HttpMethod.POST;
                            de.Click.EventMask.ShowMask = true;
                            de.Click.EventMask.CustomTarget = "App.MainContent";
                        }))
              )
    }

    Thanks for your help.
    Last edited by fabricio.murta; May 12, 2017 at 10:53 PM. Reason: no feedback from the user in 7+ days
  2. #2
    Hello, @Fahd!

    The problem is not with using layout or render sections, but with using .Content() instead of .Items(), which is not possible between layout and page.

    Layouts in turn do not govern Content blocks inside your components. Layouts only deal with other components, from the point you use Content, you are breaking the layout "laws" designed outside that component.

    One way to get rid of this, is make an "outer maximized" panel on your actual page and then center contents (components-driven) to it.

    Here's a sample turning your <h1>Foo</h1> to an Ext.Label:

    Layout page slightly changed to:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>
    
    </head>
    <body>
        @{
            var X = Html.X();
        }
    
        @(Html.X().ResourceManager())
    
        @(X.Viewport()
            .Layout(LayoutType.Anchor)
            .Items(
                X.Container()
                    .AnchorHorizontal("100%")
                    .AnchorVertical("20%")
                    .Border(true)
                    .ID("TopPanel")
                    .Items(
                        X.Toolbar()
                            .ID("ToolBarContent")
                            .Items(
                                X.ComboBox()
                                    .ID("cmbTest1")
                                    .Editable(false)
                                    .Width(300)
                                    .LabelWidth(50)
                                    .MarginSpec("0 5 0 5")
                                    .FieldLabel("Combo1:")
                                    .Items(
                                        new Ext.Net.ListItem("Item 1", "1"),
                                        new Ext.Net.ListItem("Item 2", "2")
                                    )
                            )
                        ,
                        X.Toolbar()
                            .ID("ToolBarMenu")
                            .Items(
                                X.Button()
                                    .ID("MenuGlobalSetupButton")
                                    .Text("Menu")
                                    .Icon(Icon.World)
                                    .Menu(
                                        X.Menu()
                                            .Icon(Icon.ArrowDown)
                                            .Header(false)
                                            .Items(X.MenuItem()
                                                .ID("MenuHomeItem")
                                                .Icon(Icon.BulletWrench)
                                                .Text("Home")
                                                .Href(@Url.Action("Index", "Home")),
                                                X.MenuItem()
                                                    .ID("MenuFooItem")
                                                    .Icon(Icon.BulletWrench)
                                                    .Text("Foo Setup")
                                                    .Href(@Url.Action("c61830_centerAlignContent", "issues"))
                                            )
                                    )
                            )
                    ),
                X.Panel().ID("PageBody")
                    .AnchorHorizontal("100%")
                    .AnchorVertical("80%")
                    .Title("Page body")
                    .Frame(true)
                    .Scrollable(ScrollableOption.Both)
                    .ContentFromSection(this, "pageBody")
            )
        )
    
        @RenderSection("scripts", required: false)
    </body>
    </html>
    And the page becomes this:
    @model ExtNetPlaygroundMVC_current.Controllers.issuesController.c61830_Model
    @{
        Layout = "c61830_layoutPage.cshtml";
        ViewBag.Title = "Foo";
    }
    @section pageBody {
        @(
            Html.X().Panel()
                .Title("Page contents (center-packing panel)")
                .Frame(true)
                .WidthSpec("100%")
                .LayoutConfig(l => l.Add(new HBoxLayoutConfig() { Pack = BoxPack.Center }))
                .Items(
                    Html.X().Panel()
                        .Title("Page liner (placing content as rows)")
                        .Frame(true)
                        .Layout(LayoutType.VBox)
                        .Items(
                            Html.X().Label().Height(50)
                                .Html(@<text><h1>Foo</h1></text>),
                            Html.X().FormPanel()
                                .Layout(LayoutType.Form)
                                .Width(350)
                                .FieldDefaults(d => { d.LabelWidth = 150; })
                                .BodyPadding(10)
                                .Frame(true)
                                .Items(
                                    Html.X().TextFieldFor(m => m.TextValue),
                                    Html.X().DateFieldFor(m => m.DateTimeValue),
                                    Html.X().ComboBoxFor(m => m.ComboValue1).Items(Model.Data),
                                    Html.X().ComboBoxFor(m => m.ComboValue2).Items(Model.Data),
                                    Html.X().ComboBoxFor(m => m.ComboValue3).Items(Model.Data),
                                    Html.X().CheckboxFor(m => m.CheckboxValue),
                                    Html.X().NumberFieldFor(m => m.NumberValue),
                                    Html.X().SliderFor(m => m.MultiSliderValue)
                                )
                                .Buttons(
                                    Html.X().Button()
                                        .Text("Save")
                                        .Icon(Icon.Disk)
                                        .FormBind(true)
                                        .DirectEvents(de =>
                                        {
                                            de.Click.Url = Url.Action("Index");
                                            de.Click.Method = HttpMethod.POST;
                                            de.Click.EventMask.ShowMask = true;
                                            de.Click.EventMask.CustomTarget = "App.MainContent";
                                        })
                                )
                        )
                )
        )
    }
    The controller is still the same you used.

    Please notice some nuances in my environment:
    - Namespace is ExtNetPlaygroundMVC_current
    - For simplicity I just defined the model inside the controller, thus the path: ExtNetPlaygroundMVC_current.Controllers.issuesController.c61830_Model
    - I named the layout after c61830_layoutPage.cshtml on the same directory the view sits
    - The page per se is called c61830_centerAlignContent.cshtml
    - The namespace/controller is ExtNetPlaygroundMVC_current.Controllers.issuesController
    - The address to the page in that set up would be /issues/c61830_centerAlignContent.cshtml

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello @Fahd!

    It's been some days since we posted a reply for your inquiry here and still no feedback from you. Did the post above help at all? Do you still need assistance with this? We may mark this thread as closed if you do not provide any feedback in 7+ days from now, but that won't prevent you from further posting here if/when you have something to add about the matter.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 3
    Last Post: May 22, 2014, 3:16 PM
  2. [CLOSED] How to align window content as center
    By iansriley in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: May 16, 2014, 4:28 PM
  3. Replies: 8
    Last Post: Nov 14, 2013, 10:57 PM
  4. Replies: 5
    Last Post: Nov 07, 2013, 4:40 AM
  5. Replies: 2
    Last Post: Nov 09, 2012, 4:32 PM

Posting Permissions