This is a migrated thread and some comments may be shown as answers.

Tooltip with passing object to Controller action

7 Answers 153 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Atul
Top achievements
Rank 1
Atul asked on 02 Dec 2013, 09:58 AM
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);
        }

7 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 04 Dec 2013, 09:05 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Atul
Top achievements
Rank 1
answered on 04 Dec 2013, 09:26 AM
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
0
Daniel
Telerik team
answered on 04 Dec 2013, 12:05 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Atul
Top achievements
Rank 1
answered on 04 Dec 2013, 03:18 PM
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
0
Accepted
Daniel
Telerik team
answered on 06 Dec 2013, 11:21 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Atul
Top achievements
Rank 1
answered on 19 Jan 2014, 08:29 AM
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


0
Daniel
Telerik team
answered on 21 Jan 2014, 12:46 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ToolTip
Asked by
Atul
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Atul
Top achievements
Rank 1
Share this question
or