TabStrip - how to pass model to partial views using LoadContentFrom

[Laurie]

I'm trying to pass the model from my parent view through to the partial views that are being loaded in the tabstrip. At this point, what seems to be passed is a List<string> containing the type of the model rather than the model itself, which is a List<string> containing the words "Hello" and "Goodbye". Here's some sample code that demonstrates the issue.

The controller:

public ActionResult TabStrip()
{
    ViewBag.Message = "TabStrip Test";
    List<string> details = new List<string>();
    details.Add("Hello");
    details.Add("Goodbye");
    return View(details);
}

public ActionResult TabA(List<string> details)
{
    return PartialView(details);
}
public ActionResult TabB(List<string> details)
{
    return PartialView(details);
}

The main View:

@model List<string>
@{
    ViewBag.Title = "TabStrip";
}

<h2>TabStrip</h2>
@Model[0], @Model[1]

@(Html.Kendo().TabStrip()
            .Name("tabstrip")
            .Items(tabstrip =>
            {
                tabstrip.Add().Text("Tab A")
                    .Selected(true)
                    .LoadContentFrom("TabA", "Home", new { details = Model });

                tabstrip.Add().Text("Tab B")
                    .Selected(true)
                    .LoadContentFrom("TabB", "Home", new { details = Model });

            }))

The Partial Views:

Tab A:

@model List<string>
           <p>Welcome to TabA!</p>
@Model[0]

Tab B:

@model List<string>
           <p>Welcome to TabB!</p>
@Model[1] -- causes error

The result upon first loading the page is attached. The first item in the list shows up in the partial view as "System.Collections.Generic.List`1[System.String]" rather than "Hello." Upon clicking Tab B, an exception is thrown because there is no second item in the list.

So clearly the model is not being passed correctly to the partial views. Any ideas on this?

Thanks!

Laurie

 

 

public ActionResult TabStrip()

{

    ViewBag.Message = "TabStrip Test";

    List<string> details = new List<string>();

    details.Add("Hello");

    details.Add("Goodbye");

    return View(details);

}

public ActionResult TabA(List<string> details)

{

    return PartialView(details);

}

public ActionResult TabB(List<string> details)

{

    return PartialView(details);

}

[Peter Milchev]

Hello Laurie,

LoadContentFrom executes a GET request and the data passed to the controller is encoded as query string parameters.

One option to achieve the desired functionality is to create the collection on the server before calling the PartialView() method instead of passing the collection through the .LoadContentFrom() method. 

Another option is to serialize the Model in the view and deserialize it in the controller as suggested in this forum thread.

Regards,

Peter Milchev
Telerik by Progress

[Mike]

Hi,

we want to use the Tabstrip as well in combination with partial views.

we pass the viewmodel (contained in Model) like so:

        items.Add().Text("Particular")
            .LoadContentFrom("Particular", "PartnerOther", new {vm = Model});

 

but - as described and as far i understood, its not possible because there is no support passing objects through the LoadContentFrom Method (sad).

can you give us an example here ?

and how was this meant Peter:

"One option to achieve the desired functionality is to create the
collection on the server before calling the PartialView() method instead
of passing the collection through the .LoadContentFrom() method."

i cant use Partial overload / helper on the tabstript control

 

thanks for help

[Mike]

found this at Stackoverflow - but no where in the docs.

hope it will help somebody:

items.Add().Text("Particular")
    .Content(@<text>@Html.Action("Particular", "PartnerOther", new {vm = Model})</text>);

 

[Kiran]

Hi Peter,

I am using TabStrip control and trying to load partial views in different tabs with JavaScript, but that different Partial views are having same control ( i means same Control Names and IDs), so I am getting rendering issue. Is there a way to solve this issue.

[Kiran]

Hi Peter,

I am using TabStrip control, and trying to load different partial views in different Tabs, Partial views are having the JavaScript but both the partial views are have same control names and Ids, so getting rendering issue on loading, the values are sharing between two different views due to same names and IDs. so, is there any solution to use same control name in different partial views???