PDA

View Full Version : [CLOSED] Loading a PartialView into a TabPanel via JavaScript



leonardm
Jan 30, 2014, 3:18 AM
Hi,

How do you dynamically load a PartialView into a new tab in a TabPanel from JavaScript with EXT?

Here's the PartialView code in the Controller:



public ActionResult Index(string containerId)
{
try
{
var result = new PartialViewResult
{
ViewName = "~/Areas/App/Views/Films/Grid.cshtml",
ContainerId = containerId,
RenderMode = RenderMode.AddTo,
WrapByScriptTag = false,
};

return result;
}
catch (Exception ex)
{
Logger.Error(ex.Message, ex);

return new DirectResult { ErrorMessage = ex.Message };
}
}


I tried the Component loader with no success with render set to 'frame', 'data' and 'component'.

Thanks in advance,
Leo

Daniil
Jan 30, 2014, 4:41 AM
Hi @leonardm,

Here is an example.
http://mvc.ext.net/#/Dynamic_Partial_Rendering/Add_Tab/

It demonstrates how to render a partial view via a DirectEvent.

You can use a DirectMethod instead of a DirectEvent to call a controller's action from JavaScript. This example demonstrates how to use DirectMethods:
http://mvc.ext.net/#/Events/DirectMethod/

leonardm
Jan 30, 2014, 6:03 PM
Hi @leonardm,

Here is an example.
http://mvc.ext.net/#/Dynamic_Partial_Rendering/Add_Tab/

It demonstrates how to render a partial view via a DirectEvent.

You can use a DirectMethod instead of a DirectEvent to call a controller's action from JavaScript. This example demonstrates how to use DirectMethods:
http://mvc.ext.net/#/Events/DirectMethod/

Hi Daniil,

So let me expand on my original question...

I have modeled the addTab portion of my app after the Ext.NET MVC Examples (in main.js) with some modifications because I couldn't get the component loader to work.

Here's my code in JS for adding a Tab: (modified slightly but originally from the Example code)



tabAdd: function (id, url, title, record) {

var tab,
hostName,
contentName,
tabTip;

if (id === "-") {
id = Ext.id(undefined, "sparta");
lookup[url] = id;
}

tabTip = url.replace(/^\//g, "");
tabTip = tabTip.replace(/\/$/g, "");
tabTip = tabTip.replace(/\//g, " > ");
tabTip = tabTip.replace(/_/g, " ");

hostName = window.location.protocol + "//" + window.location.host;
contentName = hostName + url;

var iconClass = Ext.util.Format.lowercase(title) + '-icon';

tab = App.MainTabPanel.add(new Ext.panel.Panel({

id: id,
title: title,
tabTip: tabTip,
iconCls: iconClass,
hideMode: "offsets",
layout: 'fit',
closable: true,
data: contentName,
renderTo: 'MainTabPanel',

listeners: {
afterRender: function () {
Ext.net.DirectMethod.request({
url: url,
params: {
containerId: id,
},
success: function(result) {

},
failure: function (errorMessage) {
SPARTA.Utils.showError('Error', errorMessage);
},
});
},
},

}).show());

// activate the tab
setTimeout(function () {
App.MainTabPanel.setActiveTab(tab);
}, 250);
},


As you can see, I'm using Ext.net.DirectMethod.request here and it works fine and it's displays the view defined in the PartialView.

If I try with the loader, I just get what looks like some JSON representation of the component coming back.

Do I need to do anything special to get the View to load in the tab with the Loader (as it is in the Ext.NET example)?
I think I'm very close, but something is missing.

Thanks,
Leo

Daniil
Jan 31, 2014, 6:31 AM
Ok, please provide a full, but simplified and runnable sample to reproduce the problem with a Loader. We will be happy to investigate.

leonardm
Feb 11, 2014, 7:03 PM
Ok, please provide a full, but simplified and runnable sample to reproduce the problem with a Loader. We will be happy to investigate.

I'm using a different approach now so please go ahead and close this.

Thanks for your help,
Leo