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

Posted 2023-03-27

【中文标题】如何将 C# 对象作为参数传递给 Javascript 函数

【英文标题】：How do I pass a C# object as the parameter to a Javascript function

【发布时间】：2021-04-15 14:00:54

【问题描述】：

所以我有这张表，它根据@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);

【问题讨论】：

<a onclick="doFunction('@number.Msisdn'); "> 然后function doFunction(Msisdn) alert(Msisdn);

【参考方案1】：

您应该使用 Newtonsoft nuget 包将数字 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>

【讨论】：

JavaScriptSerializer 似乎不允许在 .net 核心项目中使用

@RileyVarga 我已经更新了使用 Newtonsoft.Json 包的解决方案，您需要将其从 NuGet 下载到您的项目中

我也是这么做的。我一定是做错了什么，因为当我执行此功能时 doFunction(model) alert(model.Cost); 它显示了一个带有“未定义”的警报框

尝试记录你得到的模型？

哦，是cost 不是Cost。谢谢！