Exception trying to load tab from ajax request using Ext.NET

Question

I'm using asp.net mvc with ext.net and I'm trying to create a set of tabs that load information only when they are selected by the user.

I can manage to load a partial view into a tab/panel using the ContentFromAction functions:

Tab loading as a partial view

But I can't figure out how to populate a tab/panel only when a tab is selected.

I've based my project on the Ext.NET MVC Examples Explorer version 2.5 code base and this code on the TabPanel > Basic > Ajax Load example found here

I've cut down the example as far as I can to reproduce the problem:

In my view I create the tab and configure the loader (exactly the same as the example project):

Index.cshtml

    X.Panel()
        .ID("Tab3")
        .Title("Ajax Tab")
        .BodyPadding(6)
        .AutoScroll(true)
        .Loader(X.ComponentLoader()
            .Url(Url.Action("Ajax"))
            .LoadMask(m => m.ShowMask = true)
            .Params(new Parameter("containerId", "Tab3"))
            .Mode(LoadMode.Html)
        )

It correctly calls into my controller (exactly the same as the example project):

Axax_LoadController.cs

using System.Web.Mvc;    
namespace Ext.Net.MVC.Examples.Areas.TabPanel_Basic.Controllers
{
    public class Ajax_LoadController : Controller
    {
        public ActionResult Ajax(string containerId)
        {
            return View("Ajax");
        }
    }
}

Which in turn displays the appropriate view in the tab after it's been clicked on:

Ajax.cshtml (this works)

@using Ext.Net.MVC
<div>
    <p>I am content loaded via Ajax when the tab is selected</p>
</div>

The problem begins if I try to add controls in my view, as follows:

Ajax.cshtml

@using Ext.Net.MVC
@{ var X = Html.X(); }
<div>
    <p>I am content loaded via Ajax when the tab is selected</p>
    @X.TextField().Text("I am a text field")
</div>

This fails with the exception:
ItemTag validation (_tkn_1): Reference token (init_script) was not found.

If I modify the file Ext call to return Html as follows:

Ajax.cshtml

@using Ext.Net.MVC
@{ var X = Html.X(); }
<div>
    <p>I am content loaded via Ajax when the tab is selected</p>
    @X.TextField().Text("I am a text field").ToHtmlString()
</div>

It correctly renders the following text in my selected tab:

It seems to return correctly if I use .ToHtmlString()

I am content loaded via Ajax when the tab is selected <#:item ref="init_script" index="0">Ext.create("Ext.form.field.Text",{renderTo:"App.id534c5fe0f159f3fb_Container",value:"I am a text field"});</#:item><div id="App.id534c5fe0f159f3fb_Container"></div>

I believe that the ext.net code is written by @geoffrey.mcgill on stack overflow so I'm hoping he can help rescue me.

Daniil Veriga Daniil Veriga · Accepted Answer · 2014-05-21T06:13:35

You need to use a PartialViewResult. Please look at these examples.

Partial Content

Partial Items

Personally, I would recommend to follow the Partial Items example. You always can wrap any non-Ext.NET content in an Ext.NET Container. The benefit of this approach is the fact that you don't need to worry about destroying Ext.NET components if you reload the content. Though, anyway, I would recommend to set up explicit IDs for Ext.NET components in a partial view. At least, for top level components.

Exception trying to load tab from ajax request using Ext.NET

1 Answers