PDA

View Full Version : [CLOSED] [MVC] How to add RenderBody, ActionLink in Ext.Net Controls



UnifyEducation
Apr 26, 2012, 10:25 AM
Hi,

I'm creating MVC webportal with Ext.Net. I created a ViewPort in _Layout.cshtml page. How can I add RenderBody or ActionLink in the Panel?
Here is my code:
_Layout.cshtml



@using Ext.Net
@using Ext.Net.MVC
<!DOCTYPE html>
<html lang="en">
<head>
<title>@ViewBag.Title - MVC-Ext.NET Application</title>
</head>
<body>
@Html.X().ResourceManager().Theme(Theme.Default);
@(Html.X().Viewport()
.Layout("BorderLayout")
.Items(item =>
{
item.Add(Html.X().Toolbar()
.Region(Region.North)
.Border(false)
.Height(50)
.Items(toolBar =>
{
toolBar.Add(Html.X().Label()
.Text("Web Portal")
);
toolBar.Add(Html.X().ToolbarFill());
//Here I want to add ActionLink to _LoginPartial.cshtml
})
.Height(35));
//Center
item.Add(Html.X().Panel()
.Height(610)
.Region(Region.Center)
.Border(true)
.ID("mainPanel").ItemsFromPage(this, "../Home/Index.cshtml")
//Here I want to add @RenderBody() to load the views
);

//West
item.Add(Html.X().Panel()
.Width(200)
.Region(Region.West)
.Layout("AccordionLayout")
.Title("ShortCut")
.Collapsible(true)
.Border(true)
.Items(westItem =>
{
westItem.Add(Html.X().MenuPanel()
.Icon(Icon.Folder)
.Title("ParentMenu1")
.ID("ParentMenu1")
.Menu(mpItem =>
{
mpItem.Add(Html.X().MenuItem()
.Icon(Icon.Information)
.Text("Menu1")
.ID("menu1")
);
mpItem.Add(Html.X().MenuItem()
.Icon(Icon.Information)
.Text("Menu2")
.ID("menu2")
);
}));
westItem.Add(Html.X().MenuPanel()
.Icon(Icon.Folder)
.Title("ParentMenu2")
.ID("ParentMenu2")
.Menu(mpItem =>
{
mpItem.Add(Html.X().MenuItem()
.Icon(Icon.Information)
.Text("Menu3")
.ID("menu3")
);
mpItem.Add(Html.X().MenuItem()
.Icon(Icon.Information)
.Text("Menu4")
.ID("menu4")
);
}));
})
);

//South
item.Add(Html.X().Toolbar()
.Height(25)
.Region(Region.South)
.Border(true)
.Items(toolBar =>
{
toolBar.Add(Html.X().ToolbarFill());
toolBar.Add(Html.X().ToolbarTextItem()
.Center()
.Text("Copyright 2012. All rights reserved.")
);
toolBar.Add(Html.X().ToolbarFill());
})
);
}
)
)
</body>
</html>



And Is there any way to load dynamically content in mainPanel when I click the menu link in the West Panel?

Vladimir
Apr 26, 2012, 4:53 PM
Hi,



//Here I want to add ActionLink to _LoginPartial.cshtml

ActionLink generates html string and it cannot be added directly to the toolbar, use Container with Content


.Items(toolBar =>
{
toolBar.Add(Html.X().Label()
.Text("Web Portal")
);
toolBar.Add(Html.X().ToolbarFill());
toolBar.Add(Html.X().Container().Content(@<text>@Html.ActionLink("LinkText", "ActionName")</text>));
})




//Here I want to add @RenderBody() to load the views

First, you should not mix Content and Items in one widget (it is bad practice)

Second, RenderBody is not supported by Ext.Net controls because RenderBody doesn't return string with rendered body
I suggest to use Sections

Layout page


....
@(Html.X().Panel()
.Title("Panel1")
.Width(400)
.Height(400)
.Icon(Icon.Add)
.Layout(LayoutType.Accordion)
.ItemsFromSection(this, "section1")
)
....


Content page


@section section1{
@(Html.X().Panel()
.Title("Section 1 - Panel 1")
.Height(150)
.Icon(Icon.BulletPlus)
)
}

You can accomplish the same functionality using sections

Daniil
Apr 26, 2012, 5:08 PM
Hi,


And Is there any way to load dynamically content in mainPanel when I click the menu link in the West Panel?

We can suggest to render partial views.

Example Main View

@{ Layout = "";
}

<!DOCTYPE html>

<html>
<head>
<title>Ext.NET v2 Example</title>
</head>
<body>
@Html.X().ResourceManager()
@(Html.X().Viewport()
.Layout(LayoutType.Border)
.Items(items1 =>
{
items1.Add(Html.X().MenuPanel()
.Title("West")
.Region(Region.West)
.Width(200)
.Menu(menu =>
{
menu.Add(Html.X().MenuItem()
.Text("Load Page 1")
.DirectEvents(e =>
{
e.Click.Url = "/Test/Page1/";
e.Click.EventMask.ShowMask = true;
e.Click.ExtraParams.Add(new Parameter("containerId", "App.Panel1"));
e.Click.Before = "App.Panel1.removeAll()";
})
);
menu.Add(Html.X().MenuItem()
.Text("Load Page 2")
.DirectEvents(e =>
{
e.Click.Url = "/Test/Page2/";
e.Click.EventMask.ShowMask = true;
e.Click.ExtraParams.Add(new Parameter("containerId", "App.Panel1"));
e.Click.Before = "App.Panel1.removeAll()";
})
);
})
);
items1.Add(Html.X().Panel()
.ID("Panel1")
.Title("Center")
.Region(Region.Center)
.Layout(LayoutType.Fit));
})
)
</body>
</html>

Example Partial View 1

@(Html.X().Container()
.Html("I am Page 1")
.StyleSpec("background-color: green;")
)

Example Partial View 2

@(Html.X().Container()
.Html("I am Page 2")
.StyleSpec("background-color: yellow;")
)

Example Controller Actions

public Ext.Net.MVC.PartialViewResult Page1(string containerId)
{
return new Ext.Net.MVC.PartialViewResult(containerId, RenderMode.AddTo);
}

public Ext.Net.MVC.PartialViewResult Page2(string containerId)
{
return new Ext.Net.MVC.PartialViewResult(containerId, RenderMode.AddTo);
}

See also
http://forums.ext.net/showthread.php?16924&p=72560&viewfull=1#post72560

UnifyEducation
Apr 27, 2012, 9:26 AM
Second, RenderBody is not supported by Ext.Net controls because RenderBody doesn't return string with rendered body
I suggest to use Sections

Layout page


....
@(Html.X().Panel()
.Title("Panel1")
.Width(400)
.Height(400)
.Icon(Icon.Add)
.Layout(LayoutType.Accordion)
.ItemsFromSection(this, "section1")
)
....


Content page


@section section1{
@(Html.X().Panel()
.Title("Section 1 - Panel 1")
.Height(150)
.Icon(Icon.BulletPlus)
)
}

You can accomplish the same functionality using sections

Thanks for your big help.
Could you tell me where I can put the content page? I had put your code in _Layout.cshtml and /Home/Index.cshtml, but nothing's displayed in browser
It works fine now. The problem is I must set Layout url on Content page

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}

This link may be helpful for someone want to use different Layouts in different views: http://stackoverflow.com/questions/5059323/asp-mvc-3-use-different-layouts-in-different-views

michael_aj
Jul 23, 2012, 8:23 AM
Hi,

First, you should not mix Content and Items in one widget (it is bad practice)

Second, RenderBody is not supported by Ext.Net controls because RenderBody doesn't return string with rendered body
I suggest to use Sections

Layout page


....
@(Html.X().Panel()
.Title("Panel1")
.Width(400)
.Height(400)
.Icon(Icon.Add)
.Layout(LayoutType.Accordion)
.ItemsFromSection(this, "section1")
)
....


Content page


@section section1{
@(Html.X().Panel()
.Title("Section 1 - Panel 1")
.Height(150)
.Icon(Icon.BulletPlus)
)
}

You can accomplish the same functionality using sections

Hi!

Instead of using @RenderBody() to load the content from different pages, I use @RenderSection("SectionName"). I am now having trouble loading the content from it in the _Layout.cshtml. (By the way I am using ASP.NET MVC 3.) I just want to ask where the content of the "Content Page" is located? Is it on the same file as "Layout page"? Is it possible for the Content Page content to be in a separate page? If yes, how can this be implemented using Razor? Any advice or hint will be much appreciated.

Thanks in advance for the help!

Daniil
Jul 23, 2012, 2:16 PM
Hi @michael_aj,

Please investigate the examples.
http://forums.ext.net/showthread.php?19338&p=83329&viewfull=1#post83329

michael_aj
Jul 24, 2012, 1:59 AM
Hi @michael_aj,

Please investigate the examples.
http://forums.ext.net/showthread.php?19338&p=83329&viewfull=1#post83329

Hi Sir Daniil!

Thanks for the link. I have browsed the attached zip file Ext.Net.MVC3Sandbox. It clears out a lot of my questions regarding the use of Razor with Sections. I have tried some of the examples shown by making a modified demo. And I have some problems again loading the content from a named section.

Here are the code snippets in ASP.NET MVC 3:

[_Layout.cshtml]

...<body>
@Html.X().ResourceManager()
@(Html.X().Viewport()
.Layout(LayoutType.Border)
.Items(items =>
{ //North
items.Add(Html.X().Panel().Header(false)
.Region(Region.North)
.Height(69)
.Border(true)
.Html("<h1>XYZ App</h1>")
);
//Center
items.Add(Html.X().Panel().Header(false)
.Layout(LayoutType.Fit)
.Region(Region.Center)
.Height(100)
.Width(500)
.Border(true)
.ContentFromSection(this, "MainContent")
);...


[Index.cshtml]

@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@section MainContent {

<h2>@ViewBag.Message</h2>

<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>

<br />

@(Html.X().GridPanel().Region(Region.Center)
.Title("Stock Price")
.Height(500)
.Width(500)
.InvalidateScrollerOnRefresh(false)
.DisableSelection(true)
.Store(store => store.Add(Html.X().Store()
.PageSize(100)
.Buffered(true)
.AutoLoad(false)
.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;
})
)
}

I have called ContentFromSection method in the _Layout.cshtml to load content from a named section "MainContent" in Index.cshtml view page. What I got upon loading is an empty view page. The data is loaded correctly (as seen by Firebug debugger) but the controls and the html content aren't visible.

Here is a snapshot 4530 of the said demo app.

Is this a bug or is there something wrong with what I am doing?

Please advise.

Thanks a lot for the help!

Daniil
Jul 24, 2012, 9:35 AM
"ContentFromSection" can't participate in the layout logic, i.e. Fit Layout you have set up:

.Region(Region.Center)

Any layouts can participate with Ext.NET widgets only.

So, please use ItemsFromSection instead and leave only GridPanel in the section.

By the way setting up Width and Height for the Center region doesn't make any sense, because it will be just stretched up to fill all space remained from North and other regions.