PDA

View Full Version : [CLOSED] What to "ajax" load user controls into center area of viewport



RCM
Jun 18, 2012, 6:32 PM
Hi Guys,

I am using MVC and what I want to achieve is as below:

1. A panel which positioned to the center area of a viewport
2. When I click on a button, I could get associated url and "ajax" load a user control into the panel mentioned above.
3. The loaded content should be involved in layout, i.e., loaded content need to take up the whole width of its parent container, which is a panel.

Currently, the main problem I am facing is that the loaded content couldn't take the whole width of its parent panel.

Could you please give me a working example which fullfill the requirements listed above. Thank you very much.

Regards,
RCM

Vladimir
Jun 18, 2012, 6:50 PM
Please review Loader examples, for example
http://examples2.ext.net/#/Loaders/Component/Direct_Method/

Daniil
Jun 18, 2012, 7:22 PM
Hi,

Here is another approach. Though I would also prefer

Mode="Component"

Example View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="North" Height="100">
<Items>
<ext:Button runat="server" Text="Reload">
<Listeners>
<Click Handler="App.Panel1.reload();" />
</Listeners>
</ext:Button>
</Items>
</ext:Panel>
<ext:Panel
ID="Panel1"
runat="server"
Region="Center"
Layout="FitLayout">
<Loader
runat="server"
Mode="Html"
Url="/Test/PartialView1"
Scripts="true">
<Params>
<ext:Parameter Name="containerId" Value="App.Panel1" Mode="Value" />
</Params>
</Loader>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>


Example Partial View

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:Container
ID="Container1"
runat="server"
IDMode="Static"
StyleSpec="background-color: yellow;"
Html='<%# DateTime.Now.Second %>'
AutoDataBind="true" />


Example Controller Action

public Ext.Net.MVC.PartialViewResult PartialView1(string containerId)
{
Ext.Net.MVC.PartialViewResult r = new Ext.Net.MVC.PartialViewResult();
r.ContainerId = containerId;
r.RenderMode = RenderMode.AddTo;
r.SingleControl = true;
return r;
}


Just a note.



1. A panel which positioned to the center area of a viewport

Viewport has no "center region" term by iteself. BorderLayout has regions. You can set up BorderLayout for any Ext.NET container, not just for Viewport.

RCM
Jun 18, 2012, 7:28 PM
Please review Loader examples, for example
http://examples2.ext.net/#/Loaders/Component/Direct_Method/

Thank you very much for your information. I am currently trying to achieve it by call below javascript code:




Ext.Ajax.request({
params: {
containerId: 'MainContentPanel'
},
url: requestUrl,
success: function (response) {
eval(response.responseText);
}
});



The only problem I am facing is that loaded content doesn't take up its parent's whole width. I prefer doing this way because I can easily route a mvc url to its corresponding user control view.

So, could you please let me know how I can stick on my current way and get rid of the layout problem. Tons of thanks.

Regards,
RCM

RCM
Jun 18, 2012, 7:36 PM
Hi,

Here is another approach. Though I would also prefer

Mode="Component"

Example View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="North" Height="100">
<Items>
<ext:Button runat="server" Text="Reload">
<Listeners>
<Click Handler="App.Panel1.reload();" />
</Listeners>
</ext:Button>
</Items>
</ext:Panel>
<ext:Panel
ID="Panel1"
runat="server"
Region="Center"
Layout="FitLayout">
<Loader
runat="server"
Mode="Html"
Url="/Test/PartialView1"
Scripts="true">
<Params>
<ext:Parameter Name="containerId" Value="App.Panel1" Mode="Value" />
</Params>
</Loader>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>


Example Partial View

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:Container
ID="Container1"
runat="server"
IDMode="Static"
StyleSpec="background-color: yellow;"
Html='<%# DateTime.Now.Second %>'
AutoDataBind="true" />


Example Controller Action

public Ext.Net.MVC.PartialViewResult PartialView1(string containerId)
{
Ext.Net.MVC.PartialViewResult r = new Ext.Net.MVC.PartialViewResult();
r.ContainerId = containerId;
r.RenderMode = RenderMode.AddTo;
r.SingleControl = true;
return r;
}


Just a note.



Viewport has no "center region" term by iteself. BorderLayout has regions. You can set up BorderLayout for any Ext.NET container, not just for Viewport.


Thanks. I will try this approach.

Daniil
Jun 18, 2012, 8:47 PM
Thank you very much for your information. I am currently trying to achieve it by call below javascript code:




Ext.Ajax.request({
params: {
containerId: 'MainContentPanel'
},
url: requestUrl,
success: function (response) {
eval(response.responseText);
}
});



The only problem I am facing is that loaded content doesn't take up its parent's whole width. I prefer doing this way because I can easily route a mvc url to its corresponding user control view.

So, could you please let me know how I can stick on my current way and get rid of the layout problem. Tons of thanks.

Please look at the example for MVC.

Example View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Panel
runat="server"
Height="200"
Width="500"
Layout="FitLayout"
Title="Load Partial View">
<Loader
runat="server"
Url="/Test/LoadPartialView"
Mode="Component"
RemoveAll="true">
<LoadMask ShowMask="true" />
</Loader>
<Buttons>
<ext:Button runat="server" Text="Reload" Icon="PluginGo">
<Listeners>
<Click Handler="this.up('panel').load();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Panel>
</body>
</html>


Example Partial View

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<ext:Container
ID="Container1"
runat="server"
IDMode="Static"
StyleSpec="background-color: yellow;"
Html='<%# DateTime.Now.Second %>'
AutoDataBind="true" />


Example Controller Action

public ContentResult LoadPartialView()
{
return Content(ComponentLoader.ToConfig("~/Views/Test/PartialView1.ascx"));
}