PDA

View Full Version : [CLOSED] Loading Partial View under a formpanel



Daly_AF
Jul 25, 2012, 10:22 AM
Hi,
I implemented a FormPanel I would like to load a partial view under the form, when I click on button the partial view doesn't appear
This is the code below:
Controller Code :


public ActionResult Test()
{
return View();
}

public Ext.Net.MVC.PartialViewResult GetSearchGrid()
{
Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult();
return pr;
}


FormPanel ASPX Code:


<%@ 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 id="Head1" runat="server">
<script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var onClick = function () {
$('#partial_div').load('/Test/GetSearchGrid', null,
function (success, error) {
});
};
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<form id="_formGridSearch" runat="server">
</form>
<ext:Panel ID="_pnlCptySearchView" runat="server" Border="false" Header="false" AutoWidth="true">
<Items>
<ext:FormPanel runat="server" ID="_searchFormPnl" Border="false" Header="false">
<Items>
<ext:FieldSet runat="server" ID="_fieldSet">
<Items>
<ext:TextField FieldLabel="Test" runat="server" ID="_txt">
</ext:TextField>
</Items>
</ext:FieldSet>
<ext:Button runat="server" ID="_btn" Text="Search">
<Listeners>
<Click Handler="onClick()">
</Click>
</Listeners>
</ext:Button>
</Items>
</ext:FormPanel>
</Items>
<Content>
<div id="partial_div">
</div>
</Content>
</ext:Panel>
</body>
</html>


Partial View ASCX Code :


<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:Panel ID="_gridPnlCpty" Border="false" Header="false" runat="server" AutoHeight="true"
Layout="FitLayout">
<Content>
<h1>
Partial View</h1>
</Content>
</ext:Panel>

Daniil
Jul 25, 2012, 11:54 AM
Hi,

Do you really need to use JQuery to make an AJAX request? In this case you will need to parse a response manually.

I would recommend to use DirectEvent or DirectMethod to avoid manual parsing of a response.

PartialViewResult requires a container id where a partial view should be rendered. It is rendered to <body> by default and it is no that you need.

Regarding your partial view.


AutoHeight="true"
and

Layout="FitLayout"
сontradicts each other and should not be used together.

Also any Layout can't deal with raw HTML. So, please remove:

Layout="FitLayout"

Generally, I would recommend to use Loader.
http://forums.ext.net/showthread.php?19603&p=84459&viewfull=1#post84459

Daly_AF
Jul 25, 2012, 2:00 PM
Hi,
I implemented ext js load method, I had this error:
this.getLoader() is null
This is the code below :


public ActionResult Test()
{
return View();
}

public Ext.Net.MVC.PartialViewResult GetSearchGrid(String containerID)
{
Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult(containerID);
pr.SingleControl = true;
pr.RenderMode = Ext.Net.RenderMode.AddTo;
return pr;
}



<%@ 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 id="Head1" runat="server">
<script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var onClick = function () {
App._pnlPartial.load(
{
url: "/Test/GetSearchGrid",
params:
{
'containerID': '_pnlPartial'
},
scripts: true
});
};
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<form id="_formGridSearch" runat="server">
</form>
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel ID="_pnlCptySearchView" runat="server" Border="false" Header="false" AutoWidth="true"
Region="North">
<Items>
<ext:FormPanel runat="server" ID="_searchFormPnl" Border="false" Header="false">
<Items>
<ext:FieldSet runat="server" ID="_fieldSet">
<Items>
<ext:TextField FieldLabel="Test" runat="server" ID="_txt">
</ext:TextField>
</Items>
</ext:FieldSet>
<ext:Button runat="server" ID="_btn" Text="Search">
<Listeners>
<Click Handler="onClick()">
</Click>
</Listeners>
</ext:Button>
</Items>
</ext:FormPanel>
</Items>
</ext:Panel>
<ext:Panel ID="_pnlPartial" runat="server" Border="false" Header="false" AutoWidth="true"
Region="Center">
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>




<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<ext:Panel ID="_gridPnlCpty" Border="false" Header="false" runat="server">
<Content>
<h1>
Partial View</h1>
</Content>
</ext:Panel>

Daniil
Jul 25, 2012, 2:18 PM
Good choice.

Please set up

<Loader
runat="server"
AutoLoad="false"
Mode="Component"
RemoveAll="true" />
for the "_pnlPartial" Panel.

And use the following controller action:

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

Daly_AF
Jul 25, 2012, 2:26 PM
Good choice.

Please set up

<Loader
runat="server"
AutoLoad="false"
Mode="Component"
RemoveAll="true" />
for the "_pnlPartial" Panel.

And use the following controller action:

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

It works thank you