Mar 24, 2017, 9:23 PM
[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
Thanks for your help.
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>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);
}
}
}@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
