PDA

View Full Version : [CLOSED] RenderSection to Ext.Net Control



edip
Apr 29, 2016, 7:57 PM
Hello,
I am trying to use the "ContentFromSection" in my Layout page and the actual controls that i am trying load do not seem to be getting loaded. The following is my layout page...


@Html.X().ResourceManager().CleanResourceUrl( true ).ShowWarningOnAjaxFailure( false ).AjaxTimeout( 130000 );

@(
X.Viewport ( )
.Layout ( Ext.Net.LayoutType.Border )
.ID ( "OutlookViewport" )
.ItemID ( "OutlookViewport" )
.Items
(
X.Panel ( )
.Region ( Ext.Net.Region.North )
.ItemID ( "NorthRegion" )
.Height ( 178 )
.Border ( false )
.ContentFromSection ( this , "NorthRegion" , false )
, X.Panel ( )
.Region ( Ext.Net.Region.West )
.ItemID ( "WestRegion" )
.Split ( true )
.Resizable ( false )
.Collapsible ( true )
.Collapsed ( false )
.Layout ( Ext.Net.LayoutType.Fit )
.ContentFromSection ( this , "WestRegion" , false )
, X.Panel ( )
.Region ( Ext.Net.Region.Center )
.ItemID ( "CenterRegion" )
.Split ( true )
.Header ( false )
.Layout ( Ext.Net.LayoutType.Fit )
.ContentFromSection ( this , "CenterRegion" , false )
, X.Panel ( )
.Region ( Ext.Net.Region.East )
.ItemID ( "EastRegion" )
.HideMode ( Ext.Net.HideMode.Display )
.Collapsible ( true )
.Split ( true )
.Layout ( Ext.Net.LayoutType.Fit )
.ContentFromSection ( this , "EastRegion" , false )
, X.Panel ( )
.Region ( Ext.Net.Region.South )
.ItemID ( "SouthRegion" )
.HideMode ( Ext.Net.HideMode.Display )
.Collapsible ( false )
.MaxHeight ( 20 )
.Split ( false )
.Layout ( Ext.Net.LayoutType.Fit )
.ContentFromSection ( this , "SouthRegion" , false )


)

)

the following is the page which reference the layout page above...


@section NorthRegion
{

@(

X.ComponentLoader()
.AutoLoad(true)
.Mode ( Ext.Net.LoadMode.Component )
.Url ( this.Url.Action ( "NorthRegion" , "Home" ) )
.Params
(
new Ext.Net.Parameter ( "token" , this.Model.Token )
)

)

}

@section WestRegion
{

@(
X.ComponentLoader()
.AutoLoad(true)
.Mode (Ext.Net.LoadMode.Component )
.Url ( this.Url.Action ( "WestRegion" , "Home" ) )
.Params
(
new Ext.Net.Parameter ( "token" , this.Model.Token )
)

)
}


When i run the application, the "NorthRegion" and "WestRegion" controller methods do not get fired. Do i need to add something to the ComponentLoader?

Thanks.

fabricio.murta
Apr 29, 2016, 11:18 PM
Hello @edip!

I am looking on your code but it just make me want to show you one example in our Examples Explorer. Probably you already know it and I am missing the reason you need to use ContentFromSection() instead of ItemFromSection(), though!

The example would be Items > Section from Page (http://mvc4.ext.net/#/Items/Section_From_Page/) from our examples explorer!

edip
May 01, 2016, 8:12 PM
Hello,
I am using ContentFromSection because it has the option to render selectively. I have created an example at

https://drive.google.com/file/d/0B7DjyvuiqD5NYjhJMjNTeW9RYjA/view?usp=sharing

fabricio.murta
May 02, 2016, 2:54 PM
Hello @edip!

Your sample project is missing references to the NuGet packages it has to restore so it is not much useful. I will try to identify extract the pages that illustrate your problem and run somewhere else.

edip
May 02, 2016, 3:29 PM
I had removed the NuGet dependencies for that reason and all the required libraries should be in the "Dependencies" folder. There is nuget stuff hanging around in the "ForExt.csproj" file. I have uploaded a modified project file to...

https://drive.google.com/file/d/0B7DjyvuiqD5NZUVycHVQYmF2c2M/view?usp=sharing

Thanks.

fabricio.murta
May 02, 2016, 9:40 PM
Hello! I've got your solution working with the updated .csproj. If you don't mind, would you make a fresh .zip file and update the link to the first post? It would make it easier to reproduce the issue later.

I currently do not have you an answer but I am investigating the best way to achieve the result you want.

At first, my thoughts are that you should be using LoadMode.Script and then return the component's .ToScript() result. This is how several other examples use to build partial views. The issue so far is just that you don't really have a partial view to return, but you want to return the component from the action result.

I hope to be able to return to you soon with the correct way to use it.

edip
May 02, 2016, 9:57 PM
Hello Fabricio,
As you requested, I have uploaded a new zip and updated the link in my initial post. The link is...

https://drive.google.com/file/d/0B7DjyvuiqD5NZUVycHVQYmF2c2M/view?usp=sharing

fabricio.murta
May 03, 2016, 9:31 PM
Hello @edip!

I'll tell you one way to achieve the panels' contents correctly.

The problem is not really with ContentFromSection in your test project. A proof is that you actually get the alert() about failure firing upon loading the page.

What you need for the loader to work on MVC context is return the components as a script that, once injected, draws the panel on the page.

So, your model writing the panel is OK. Your OutlookLayout.cshtml layout file also seems to be alright, pulling the contents from the respective sections in the view itself.

As for your controller, we're going to turn the NorthRegion() and the other related methods from ActionResult to simply string. In other words:


public string NorthRegion()
{
TestExt.Models.HomeModel oHomeModel = new TestExt.Models.HomeModel();

return oHomeModel.NorthRegion.ToScript();
}


The same to your WestRegion() action.

Now, on your view, the container loader will also be changed so it loads the component in script mode. In other words, your ComponentLoader().Mode() setting will be changed as follows (context included):


X.ComponentLoader()
.AutoLoad(true)
.Mode(Ext.Net.LoadMode.Script)
.Url(this.Url.Action("NorthRegion", "Home"))


As you can see, LoadMode.Script now.

Give it a try on the project your provided us, I am sure you'll have the code running fine in no time! But if the instructions above are not clear enough or for some reason you can't make it work with just what is provided above, just let us know!

I hope this helps!

edip
May 09, 2016, 3:22 PM
Hi Fabricio,
Thanks for the response. I have tried your suggestion and cannot get it to work...maybe i am doing something wrong. I have posted my code to https://drive.google.com/file/d/0B7DjyvuiqD5NMEZMd19pR0tSbWc/view?usp=sharing
Thanks,
Emidio

fabricio.murta
May 09, 2016, 6:30 PM
Hello!

You didn't change the functions' return value to string.

It must be public string NorthRegion() not public Sytem.Web.Mvc.ActionResult NorthRegion()

And then the return is just return oHomeModel.NorthRegion. Analog to WestRegion() in your controller.

Alright. This though adds the ExtJS script to create the components. The script to draw the components is run at that given point. A component simply created is placed last in the page dom, not necessarily where it is run, so the way the page is with the fix above only will draw the panel contents on the top of the page. And I believe that's not what you need.

One way to solve this is provide the panel directions on where to place the component to. You can see this is used in the partial rendering examples on MVC examples explorer (http://mvc4.ext.net/) with containerId passed to the controller methods.

In a simplistic approach, you can give an ID to the west/north panels and tell the inner panels on the model to be written there.

Okay, enough theory. In practice, what you'll change on your code would be:
- your controller methods (showing just for West, North is analog):


public string WestRegion ( )
{
ForExt.Models.HomeModel oHomeModel
= new ForExt.Models.HomeModel ( );

return oHomeModel.WestRegion;
}


Model for the WestRegion panel:


public string WestRegion
{
get
{
try
{
Ext.Net.Panel oPanel
= new Ext.Net.Panel ( );

for ( int iIndex = 0 ; iIndex < 10 ; iIndex++ )
{
Ext.Net.Label oLabel
= new Ext.Net.Label ( );

oLabel.Width = 200;

oLabel.Text = "West " + iIndex.ToString ( );

oPanel.Items.Add
( oLabel );
}

oPanel.CustomConfig.Add(new ConfigItem() { Name = "renderTo", Value = "App.wr1.body", Mode = ParameterMode.Raw });

return oPanel.ToScript () ;
}
catch ( System.Exception ex )
{
System.Diagnostics.Debug.Fail ( ex.Message );

throw ex;
}
}
}


Notice the oPanel.CustomConfig line on the model code.

And for your view (which is in the layout file!), just vie the ID, as we used here, wr1:


X.Panel ( )
.Region ( Ext.Net.Region.West )
.ItemID ( "WestRegion" )
.ID ( "wr1" ) // << I am what you need!
.Split ( true )
.Resizable ( false )
.Collapsible ( true )
.Collapsed ( false )
.Width ( 200 )
.MinWidth ( 200 )
.Title ( "west" )
.Layout ( Ext.Net.LayoutType.Fit )
.ContentFromSection ( this , "WestRegion" , false )


Notice the renderTo parameter must be only in the outmost component. If you draw a panel with several labels inside, only the panel needs the RenderTo. The RenderTo parameter is passed via customConfig because we want to rely on the ExtJS result of the layout panel's getBody() to position the dynamic components into it.

I hope the explanation is clear. But if not, just let us know and we'll try and clarify it!

edip
May 09, 2016, 7:29 PM
Hi Fabricio,
Still not working for me. I have uploaded my solution to https://drive.google.com/file/d/0B7DjyvuiqD5NSHdVZWVBREF0Z0E/view?usp=sharing

Thanks.

fabricio.murta
May 09, 2016, 9:29 PM
Hello Emidio! Please do not use space characters (as well as other non-alphanumeric characters) on IDs.

You wrote: .ID ( "NexWestRegion " ). That's not going to work due to the space in the end of the string.

Also, you have to use renderTo on the CustomConfig's Name property. It must match javascript-side name, in contrast to the RenderTo property we set in C# side.

I believe that, with just these two bits, your example is going to work fine!

edip
May 10, 2016, 1:58 PM
Thanks, the space was just a typo and not intentional. It works now.

fabricio.murta
May 10, 2016, 2:35 PM
Hello Emidio!

Glad we could finally have your problem sorted out!

I'm not sure I get the point on sharing that screenshot you did last, though. Is there still a problem?

edip
May 10, 2016, 4:19 PM
No, it's all good. Thanks.