Apr 14, 2014, 9:14 PM
[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".
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":
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]