RE: [CLOSED] MVC PartialExtView
Hi Timothy,
I think it is incorrect to use AutoLoad (or load method) and AddTo mode because load method updates body. Load method can be used with RenderTo mode only
- AddTo: just use button with direct event
Code:
<ext:Button ID="Button1" runat="server" Text="Load">
<DirectEvents>
<Click Url="/Test/Example/" />
</DirectEvents>
</ext:Button>
- RenderTo: you can use load, just pass body.id as container
Code:
<Click Handler="#{Panel1}.load( { scripts: true, params: {ct:#{Panel1}.body.id}, url: '/Test/Example' } );" />
Code:
public ActionResult Example(string ct)
{
var result = this.PartialExtView();
result.ContainerId = ct;
result.RenderMode = RenderMode.RenderTo;
return result;
}
I know I promised examples for you. I hope that I'll make it soon
RE: [CLOSED] MVC PartialExtView
Hello vladimir,
Thanks for clarifying glad to see it was just an understanding problem on my part, I'll work with your suggestions. I wouldn't stress too much about the examples for my benefit. Would be useful for in the future for other visitors to the forum.
Cheers,
Timothy
RE: [CLOSED] MVC PartialExtView
vladimir,
Quick question, how would I call the partial view if I was using the RenderMode AddTo without the autoLoad or load and no DirectEvents.
Cheers,
Timothy
RE: [CLOSED] MVC PartialExtView
Can you provide more details? In what scenario you need to call partial view?
RE: [CLOSED] MVC PartialExtView
For example:
ExampleController.cs:
Code:
public ActionResult Index()
{
return View();
}
public ActionResult Example(string containerId)
{
var result = PartialExtView();
result.ContainerId = containerId;
result.RenderMode = RenderMode.AddTo;
return result;
}
Index.aspx:
Code:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!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 id="Head1" runat="server">
<title>Example</title>
<script type="text/javascript">
function LoadContent()
{
Ext.Ajax.request( {
scripts: true,
params: {
containerId: 'Panel1'
},
url: '/Example/Example'
} );
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Panel ID="Panel1" runat="server"
Height="250"
Layout="Fit"
Title="Example"
Width="500">
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Load">
<Listeners>
<Click Fn="LoadContent" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Clear">
<Listeners>
<Click Handler="#{Panel1}.removeAll();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Panel>
</body>
</html>
This is a simplified example, in my actual project the JavaScript for LoadContent is in a script file and is reused for numerous controls. I don't want to have to define DirectEvents for my buttons.
I know the Ext.Ajax.request() is not going to evaluate the response, but it at least gives an example of how I would like to handle calling the server from the client.
Hope that makes sense? Got any suggestions?
Cheers,
Timothy
RE: [CLOSED] MVC PartialExtView
Well, just set for PartialExtView instance
Code:
result.WrapByScriptTag = false;
and success handler for Ext.Ajax.request
Code:
function LoadContent()
{
Ext.Ajax.request( {
params: {
containerId: 'Panel1'
},
url: '/Example/Example',
success : function(response){
eval(response.responseText);
}
} );
}
RE: [CLOSED] MVC PartialExtView
Thanks vladimir, one more thing I noticed. If you use the RenderMode.RenderTo the following will not allow fit layout I guess the big difference between RenderMode.AddTo and RenderMode.RenderTo ?
ExampleController.cs:
Code:
public ActionResult Index()
{
return View();
}
public ActionResult Example(string containerId)
{
var result = PartialExtView();
result.ContainerId = containerId;
result.RenderMode = RenderMode.RenderTo;
return result;
}
Index.aspx:
Code:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!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 id="Head1" runat="server">
<title>Example</title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Panel ID="Panel1" runat="server"
Height="250"
Layout="Fit"
Title="Example"
Width="500">
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Load">
<Listeners>
<Click Handler="#{Panel1}.load( { scripts: true, params: { containerId: #{Panel1}.body.id }, url: '/Example/Example' } );" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Clear">
<Listeners>
<Click Handler="#{Panel1}.removeAll();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Panel>
</body>
</html>
Example.ascx:
Code:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<ext:FitLayout runat="server">
<Items>
<ext:Panel ID="Panel123" runat="server">
<Content>
This is an example
</Content>
</ext:Panel>
</Items>
</ext:FitLayout>
Cheers,
Timothy
RE: [CLOSED] MVC PartialExtView
vladimir,
Found another problem when you have a Store inside of a Html.RenderExtPartial() partial view:
ExampleController.cs:
Code:
public ActionResult Index()
{
return View();
}
public ActionResult Example(string containerId)
{
var result = PartialExtView();
result.ContainerId = containerId;
result.RenderMode = RenderMode.AddTo;
result.WrapByScriptTag = false;
return result;
}
Index.aspx:
Code:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!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 id="Head1" runat="server">
<title>Example</title>
<script type="text/javascript">
function LoadContent() {
Ext.Ajax.request( {
params: {
containerId: 'Panel1'
},
scripts: true,
success: function(r) {
eval(r.responseText);
},
url: '/Example/Example'
} );
}
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Panel ID="Panel1" runat="server"
Height="250"
Layout="Fit"
Title="Example"
Width="500">
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Load">
<Listeners>
<Click Fn="LoadContent" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Clear">
<Listeners>
<Click Handler="#{Panel1}.removeAll();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Panel>
</body>
</html>
Example.ascx:
Code:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<%@ Import Namespace="Suite.Web" %>
<ext:FitLayout runat="server">
<Items>
<ext:Panel ID="Panel1" runat="server">
<Content>
<%= Html.RenderExtPartial("Child") %>
</Content>
</ext:Panel>
</Items>
</ext:FitLayout>
Child.ascx:
Code:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<ext:Panel ID="PanelChild1" runat="server">
<Content>
Panel Child 1
</Content>
</ext:Panel>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Name" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
Replication steps:
1. Load page
2. Click Load button
3. Click Clear button
4. Click Load button (notice nothing loads? Ext.ux.data error)
Cheers,
Timothy
RE: [CLOSED] MVC PartialExtView
Hi Timothy,
Thank you for your example. I'll investigate it. The problem occurs under MVC only (under WebForm application the resources can register automatically)
Use the following code as workaround (add it to the Index.aspx)
Code:
<% ResourceManager.RegisterControlResources<Store>(); %>
P.S. If you use the RenderMode.RenderTo the following will not allow fit layout I guess the big difference between RenderMode.AddTo and RenderMode.RenderTo ?
Yes, RenderTo mode renders a control as independent (control doesn't particapate in layout logic of the own container)
RE: [CLOSED] MVC PartialExtView
Thanks vladimir,
When I noticed the error I figured it had something to do with registering the resource.
Cheers,
Timothy