PDA

View Full Version : [CLOSED] Loading another view on the center region of ViewPort using MVC 3



Fahd
Apr 14, 2014, 9:14 PM
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>

Daniil
Apr 15, 2014, 5:15 AM
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.

Fahd
Apr 15, 2014, 1:53 PM
Thank you. That was it.