[Solved] Dynamic content creation in MEF project

[Jon Baron]

So

I've used the tab strip previously in the following way:

@{ Html.Telerik().TabStrip()
        .Name("TabStrip")
        .Items(tabstrip =>
        {
            tabstrip.Add()
                .Text("1")
                .ImageUrl("~/Content/Images/1.png")
                .Content(() =>
                    {
                        @Html.RenderPartial("1/2");
                    });

And that worked great, but now I'm using an MEF project, where child projects are loading it via an MEF framework. This all works fine displaying the first tab, as a boot strap. and even the other tabs dynamically.

But the problem is, the tabs aren't hooked up to an action or controller this way. So we change

@using Framework.Web;
@using Telerik.Web.Mvc;

@{ Html.Telerik().TabStrip()
        .Name("TabStrip")

        .BindTo(MEFControllerFactory.GetTabVerbsForCategory("1"), (tab, verb) =>
            {
                tab.Text = verb.Name;
                tab.ImageUrl = verb.Image;
                if (verb.Name != "1")


                    tab.Content = () => Html.RenderPartial(verb.View, new ViewDataDictionary());

                }
                else
                {
                    tab.Content = () => Html.RenderPartial(verb.View);
                }
            })
        .SelectedIndex(1)
        .Render();
}

TO

@using Framework.Web;
@using Telerik.Web.Mvc;

@{ Html.Telerik().TabStrip()
        .Name("TabStrip")

        .BindTo(MEFControllerFactory.GetTabVerbsForCategory("1"), (tab, verb) =>
            {
                tab.Text = verb.Name;
                tab.ImageUrl = verb.Image;
                if (verb.Name != "1")
                {
                    tab.ActionName = verb.Action;
                    tab.ControllerName = verb.Controller;

                    tab.Content = () => Html.RenderPartial(verb.View, new ViewDataDictionary());

                    @*
                    tab.ContentUrl = Url.Action(verb.Action, verb.Controller, verb.View);
                    *@
                }
                else
                {
                    tab.Content = () => Html.RenderPartial(verb.View);
                }
            })
        .SelectedIndex(1)
        .Render();
}

This is great, our action is called. But, the problem is, this action is of return type void. because we don't want to redirect to the view, this would prove the tab strip useless.

But when

tab.ActionName = verb.Action;

tab.ControllerName = verb.Controller;

are added, that's what it does. It no longer renders the content in the tab, rather it attempts to redirect to that view. Doesn't throw a 404, it finds the view but no data, and it's totally outside of the app now.

I tried Partial, with and without .ToHtmlString(), to no success. Using Partial, it does indeed render within the tab strip but not to the correct destination. Changing the value of verb.View has no effect. It either throws an error that the view could not be found or a host of other issues.

So in short, the question is. How do I implement the above?

PS. ContentUrl(verb.Action, verb.Controller) doesn't work either ;)

Thanks!

[Jon Baron]

Update - changing the return type of the action for this tab strip content to PartalView does indeed load the content, with data. but it's outside of the tab strip, it's loaded it's own window.

help please!

[Jon Baron]

Update # 2. Changing the above BindTo to this:

@{ Html.Telerik().TabStrip()
        .Name("TabStrip")

        .Items(tabstrip =>
        {
            foreach (var verb in MEFControllerFactory.GetTabVerbsForCategory("1"))
            {
                var name = verb.Name;
                var image = verb.Image;
                var action = verb.Action;
                var controller = verb.Controller;
                var view = verb.View;

                tabstrip.Add()
                    .Text(name)
                    .ImageUrl(image)
                    .LoadContentFrom(action, controller);
            }
        })

 Works. but requires me to hardcore the partial view path, including .cshml into the return PartialView line of the linked action.

Is there anyway to make this work in the first example?

Thanks!

[Petur Subev]

Hello Jon,

Basically the TabStrip will load with Ajax the content of the from the URL i.e.

tab.ContentUrl = Url.Action(verb.Action, verb.Controller, verb.View);

If there is not any content inside the tab content. 

For example you set the Content like this:

tab.Content = () => Html.RenderPartial(verb.View, new ViewDataDictionary());

and thus the TabStrip does not perform an Ajax request.

Also if you want to refresh (reload) a tab item you can use the reload method provided by the client API of the TabStrip. Here is a link to the documentation which contains some examples.
If this does not help please give examples what exactly you are trying to achieve.


Regards,
Petur Subev
the Telerik team