PDA

View Full Version : ExtJS + ASP.NET MVC + UserControls



25 May 2009, 7:16 AM
Hi,

I am trying to integrate ExtJS with ASP.NET MVC and server side UserControls.
Up to now I have created a MVC Master Page and built that page entirely with ExtJS using embedded js. I'm using the 'border' layout as follows.
West = layout: 'accordion' where one of the accordians contains a TreePanel.
North = Standard basic panel.
South = Standard basic panel.
Center = TabPanel.

I have a listener registered on the TreePanel that executes the following function:


function activateTab(p_node) {
var ctl = Ext.getCmp('tabContent');
var tab = Ext.getCmp('tab_' + p_node.id);

if (typeof tab != 'undefined') {
tab.show();
} else {
ctl.add({
title: p_node.attributes.text,
id: 'tab_' + p_node.id,
autoLoad: '/SiteManager/Cell',
scripts: true,
closable: true
}).show();
}
};


This creates a tab in the TabPanel and executes an action in a controller on the server side which eventually returns a System.Web.Mvc.ActionResult.
The Cell action that is called is below:


public ActionResult Cell()
{
return View("~/Views/SiteManager/CellControl.ascx");
}

A slimmed down version of the CellControl.ascx UserControl is as follows:


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

<div id='CellControl'>
</div>

<script type="text/javascript">
eval(function() {
var topSitePanel = new Ext.Panel({
title: 'Site Top',
id: 'topSitePanel',
autoScroll: true,
html: '&lt;empty panel&gt;',
scripts: true
});

var accordianPanel = new Ext.Panel({
applyTo: 'CellControl',
id: 'SiteAccordian',
collapsible: false,
autoWidth: true,
autoHeight: true,
layout: 'accordion',
items: [topSitePanel],
scripts: true
});

accordianPanel.show();
});
</script>


Unfortunately, I'm not getting any content displayed in the newly created tab. I can see (using FireBug)that the <div id='CellControl'> is rendered. Also the javascript block defined in the UserControl is returned to the client. I have also tried the above without the eval() statement.

I'm just wondering what is the best way to render .ascx (and also .aspx pages if possible) to dynamic tabs when using ExtJs with ASP.NET MVC?
Any help on this would be greatly appreciated.

Thanks in advance,
Brian.

666ragez666
25 May 2009, 11:15 PM
first remark eval is taking a string as parameter so should be something like
eval('alert("foobar");');.

also I find kind of weird you are declaring an nameless function


eval(function(){}), I don't think the code would be actually get executed ...

don't know if it is really related ...

moonlit_ghd
24 Jan 2010, 11:58 PM
hi , can i use js grid in asp.net user control , i add column in run time ?