Tooltip with passing object to Controller action

[Atul]

Hi All

How to pass object to controller action through LoadContentFrom method or is there any alternative option to pass object to controller action.

Right now I am able to pass the string value to controller action but I want to pass the @model.ClientInfo object to  action from controller.

So please help me how do I achieve this scenario. Here is my all code.
 

@model ViewModel

<div class="f-group">

    <div>
        <ul id="Section">
            <li><a class="Tooltip" href="#" data-id="Client1">@Model.Client1.Name</a></li>
            <li><a class="Tooltip" href="#" data-id="Client2">@Model.Client2.Name</a></li>
            <li><a class="Tooltip" href="#" data-id="Client4">@Model.Client3.Name</a></li>
            <li><a class="Tooltip" href="#" data-id="Client4">@Model.Client4.Name</a></li>
        </ul>
    </div>

    @(
         Html.Tooltip()
        .For("#Section")
        .Filter("a")
        .LoadContentFrom("LoadPopup", "Client")
        .Position(TooltipPosition.Bottom)
        .Width(250)
        .Events(events => events.RequestStart("requestStart").Show("showTooltip"))
     )

function requestStart(e) {
    e.options.data = {
        baseModel: e.target.data("id")
    };
}

function showTooltip() {
    this.refresh();
}
</div>

  public ActionResult LoadPopup(ClientInfo baseModel)
        {
            return this.PartialView("_ClientPopup", baseModel);
        }

[Daniel]

Hello,

Should the same object be sent for each target? If yes, then you could pass it as route value:

.LoadContentFrom("LoadPopup", "Client", Model.ClientInfo)

Otherwise, you should use the same approach and add the other needed values to the elements so that they can be retrieved in the requestStart handler and added to the data.

Regards,
Daniel
Telerik

[Atul]

Hi Daniel,

Thanks for your reply

Should the same object be sent for each target? No , I want to pass the different Object for each target.

Can you help how to pass other needed values to the element and how to add to the Data.



Thanks-
Atul

[Daniel]

Hello again,

The principal is the same e.g.

<li><a class="Tooltip" href="#" data-id="Client1" data-name="@Model.Client1.Name" data-otherfield="@Model.Client1.OtherField">@Model.Client1.Name</a></li>

function requestStart(e) {
    e.options.data = {
        id: e.target.data("id"),
        name: e.target.data("name"),
        otherfield: e.target.data("otherfield")
    };
}

Regards,
Daniel
Telerik

[Atul]

Hi Daniel,

I have around 20 field in the ClientInfo object,  I think this is not good solution to pass all field like this.

So is it possible to pass the entire object in the field

data-clientInfo="@Model.Client1"

I tried but I am getting null in the Action.

So can you suggest some good approach to implement this.

Thanks-
Atul

[Daniel]

Hello,

It is possible to pass the entire object by serializing it to JSON e.g.

<li><a class="Tooltip" href="#" data-clientinfo='@(Html.Raw(Json.Encode(Model.Client1)))'>@Model.Client1.Name</a></li>

e.options.data = e.target.data("clientinfo");

By default the object ToString method will be called so the data will not be available.

Regards,
Daniel
Telerik

[Atul]

Hi Daniel,

Now I have added anchor tag in template for List View and tried same thing , but I am getting object value like data-clientinfo=[object object]

Here is Kendo template code

<script type="text/x-kendo-tmpl" id="template">
<div class="product">
     <a class="Tooltip" href="///#" data-clientinfo='@(Html.Raw(Json.Encode("#:ClientInfo")))'>#: Name</a>
</div>
</script>

List View code:
@(Html.Kendo().ListView<ContactInfo>(Model)
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.BindTo(Model.ContactInfos)
)

Please let me know if I am doing anything wrong.

Thanks-
Atul

[Daniel]

Hello Atul,

The method should be used only for data that should be rendered on the server. The listview template is rendered on the client and you should convert the data to JSON via JavaScript in a template expression instead of the server-side Encode method:

data-clientinfo='#=kendo.stringify(ClientInfo)#'>

When using a listview you could also get the needed values from the listview item model.

Regards,
Daniel
Telerik