How do I pass a C# object as the parameter to a Javascript function

Question

So I have this table which generates it's data based on a collection inside the @Model

@foreach (var number in Model.Numbers)
{
    <tr class="tb-tnx-item">
        <td class="tb-tnx-id">
            <div class="">
                <span>@number.Msisdn</span>
            </div>
        </td>
        <td class="tb-tnx-id">
            <span>@number.Country</span>
        </td>
        <td class="tb-tnx-info">
            <div class="">
                <span class="title">Mobile</span>
            </div>
        </td>
        <td class="tb-tnx-amount">
            <div class="tb-tnx-total">
                <span class="amount"><em class="icon ni ni-coins align-middle"></em>@number.Cost</span>

            </div>
            <div class="tb-tnx-status">
                <span title="@number.Features" class="">@number.Features[0] / @number.Features[1]</span>
            </div>
        </td>

        <td class="text-center">
            <div class="tb-tnx-status">
                <a class="btn btn-primary" onclick="doFunction(); ">Default S2</a>
            </div>
        </td>


    </tr>
}

And as you can see I have this part right here which calls upon a JavaScript function when I click on it

<a class="btn btn-primary" onclick="doFunction(); ">Default S2</a>

And here is the JavaScript

<script>

    function doFunction() {
        alert("Test");
    }
</script>

My question is.. How do I pass number as a parameter so that I can do something like this

alert(number.Msisdn);

<a onclick="doFunction('@number.Msisdn'); "> and then function doFunction(Msisdn) { alert(Msisdn); } — VDWWD
– VDWWD, Commented Jan 10, 2021 at 12:14

Ahmed Yousif · Accepted Answer · 2021-01-14 07:01:32Z

3

You should serialize number C# object into a JSON string using Newtonsoft nuget Package

@using Newtonsoft.Json

then pass it to the view as following:

<a class="btn btn-primary" onclick="doFunction(@(JsonConvert.SerializeObject(number)));">Default S2</a>

so final view it will be something like the following:

@using Newtonsoft.Json


@foreach (var number in Model.Numbers)
{
    <tr class="tb-tnx-item">
        <td class="tb-tnx-id">
            <div class="">
                <span>@number.Msisdn</span>
            </div>
        </td>
        <td class="tb-tnx-id">
            <span>@number.Country</span>
        </td>
        <td class="tb-tnx-info">
            <div class="">
                <span class="title">Mobile</span>
            </div>
        </td>
        <td class="tb-tnx-amount">
            <div class="tb-tnx-total">
                <span class="amount"><em class="icon ni ni-coins align-middle"></em>@number.Cost</span>

            </div>
            <div class="tb-tnx-status">
                <span title="@number.Features" class="">@number.Features[0] / @number.Features[1]</span>
            </div>
        </td>

        <td class="text-center">
            <div class="tb-tnx-status">
                <a class="btn btn-primary" onclick="doFunction(@(JsonConvert.SerializeObject(number))); ">Default S2</a>
            </div>
        </td>


    </tr>
}

edited Jan 14, 2021 at 7:01

answered Jan 10, 2021 at 12:20

Ahmed Yousif

2,3481 gold badge13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Riley Varga Over a year ago

JavaScriptSerializer doesnt seem to be allowed in .net core projects

Ahmed Yousif Over a year ago

@RileyVarga I have updated the solution to use Newtonsoft.Json package you need to download it from NuGet to your project

Riley Varga Over a year ago

That's what I did too. I must be doing something wrong because when I do this function doFunction(model) { alert(model.Cost); } it shows an alertbox with "undefined"

Ahmed Yousif Over a year ago

try to log model what you get?

Riley Varga Over a year ago

Oh, it's cost not Cost. Thank you!

Collectives™ on Stack Overflow

How do I pass a C# object as the parameter to a Javascript function

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related