Passing an object from cshtml view to JQuery

Question

I am trying to pass an object from a cshtml view to JQuery, cshtml code:

 foreach (var item in Model)
            {               
                    <tr class="link" data-graduate="@item" data-url="@Url.Action("PopulateModal","CMIPGraduate")">
                        <td>@Html.DisplayFor(display => item.State)</td>
                        <td>@Html.DisplayFor(display => item.Name)</td>                           
                    </tr>               
            }

JQuery code:

$(document).ready(function () {    
    $(".link").click(function () {
        alert($(".link").data("graduate"))
        $.ajax({
            type: "get",
            url: $(".link").data("url"),               
            data:{graduate:$(".link").data("graduate")}
        })
        $("#myModal").modal("show");
    })
})

The object is always null when it arrives to the Controller, I am trying to display it with an alert in my JQuery code as you see but all I am getting is something like this: MyProject.Viewmodels.MyClassVM, I've been trying to use alert(JSON.stringify($(".link").data("graduate"))) but I am getting the same results. I know that in my cshtml view I could do something like this:

 <tr class="link" data-graduate="@item.Name" data-url="@Url.Action("PopulateModal","CMIPGraduate")">

and I will get the name easily on my JQuery function, but I don't want to create a data- attribute in my cshtml view by field, what if I have 500 fielsd? I would prefer to get the whole object and send it to my controller action. Just in case this is my Controller action:

  public ActionResult PopulateModal(MyClassVM graduate)
        {
            return PartialView(graduate);
        }

score 1 · Answer 1 · edited May 23 '17 at 12:09

1

Well, this was helpful: ASP.NET MVC: How to convert View Model into Json object But what really did the trick was to modify this code in my view(added @Json.Encode(item)):

      <tr class="link" data-graduate="@Json.Encode(item)" data-url="@Url.Action("PopulateModal","CMIPGraduate")">

edited May 23 '17 at 12:09

Community

1
1

answered Mar 09 '17 at 16:11

AlexGH

2,735
5
43
76

To be correct it should be `@Html.Raw(Json.Encode(item))`. But why would you degrade performance by generating all that extra html and sending it back again unchanged. Just include the `ID` of the item and post that pack (and get the object from the repository based on the `ID`) – Mar 09 '17 at 21:59
@StephenMuecke I am using a modal, and when a row is clicked( `$(".link").click`) I want to display the modal with some fields of the object of that row specifically, do you think is better for performance to just post the id to the controller and make a search on the collection? That would be better than post the complete object directly to the controller and then not make a search? – AlexGH Mar 09 '17 at 22:21
There are a couple of this to consider here. First you have said _what if I have 500 fielsd_ (sic) If your displaying say 20 rows with that many fields (or even 50 fields) your users with slow connections are going to be comming after you with baseball bats :) – Mar 09 '17 at 22:27
Second, if you are including all the data in the html as a `data-*` attribute, why would you even need to make an ajax call to get the same data again - you already have it it the view (you can just read the values from the `data-graduate` object and update the appropriate form controls in your modal and then show it.) – Mar 09 '17 at 22:29

Passing an object from cshtml view to JQuery

1 Answers1