如何将 C# 对象作为参数传递给 Javascript 函数

问题描述

所以我有这个表，它根据 @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>
}

正如你所看到的，我在这里有这个部分，当我点击它时会调用一个 JavaScript 函数

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

这里是 JavaScript

<script>

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

我的问题是..如何将 number 作为参数传递，以便我可以执行这样的操作

alert(number.Msisdn);

解决方法

您应该使用 Newtonsoft nuget Package

将数字 C# 对象序列化为 JSON 字符串

@using Newtonsoft.Json

然后将其传递给视图，如下所示：

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

所以最终视图将类似于以下内容：

@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>
}