[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...ll=1#post72560

**UnifyEducation** · Apr 27, 2012, 9:26 AM

Originally Posted by Vladimir

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/5...ifferent-views

**michael_aj** · Jul 23, 2012, 8:23 AM

Originally Posted by Vladimir

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...ll=1#post83329

**michael_aj** · Jul 24, 2012, 1:59 AM

Originally Posted by Daniil

Hi @michael_aj,

Please investigate the examples.
http://forums.ext.net/showthread.php...ll=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

Click image for larger version.

Name: demoapp.jpg
Views: 212
Size: 56.0 KB
ID: 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.

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

Thread Tools

Search Thread

Display

[CLOSED] [MVC] How to add RenderBody, ActionLink in Ext.Net Controls

Similar Threads

Dynamic User controls with window controls is not working

[CLOSED] How should I nested ext.net.controls with user controls?

[1.2] FitLayout doesn't render with user controls or other controls in a UserControl

[CLOSED] Problem with GridPanel controls and FileUploadField controls in the same page

When using GridPanel controls and FileUploadField controls in the same page ,the IE6 Progress Bar still looks like its loading

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

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

[CLOSED] [MVC] How to add RenderBody, ActionLink in Ext.Net Controls

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us