是否可以通过 HTML 从 jQuery 中的 C#/Razor 获取数据？答案

【问题标题】：Is it possible to get data from C#/Razor in jQuery by way of HTML?是否可以通过 HTML 从 jQuery 中的 C#/Razor 获取数据？
【发布时间】：2013-08-16 18:58:04
【问题描述】：

我想从 C# 函数中获取数据，将其存储在隐藏的 HTML 字段中，然后在 jQuery 中访问它。

这就是我的想法：

C#：

public static string getDuckbillDepts()
{
    List<string> duckbillDptsStr = new List<string>();
    for (int i = 2; i < 100; i++)
    {
        duckbillDptsStr.Add(i);
    }
    return string.Join(",", duckbillDptsStr); // <-- will this work?
}

剃须刀：

// I first wanted to use List<int> but then realized HTML would probably mutiny if I tried to give it that data type
@{string duckbillDeptsCSV = CCRReporterUtils.getDuckbillDepts()}

HTML：

<input type="hidden" name="AllDepts" id="hiddenAllDepts" value="@duckbillDeptsCSV" />

jQuery:

var deptsArray = $('hiddenAllDepts').val();

...但是 HTML 中的“duckbillDeptsCSV”是红色的，表明（对吗？）它使编译器感到困惑。我做错了吗？

【问题讨论】：

可能。 Visual Studio 可能会在视图中出现错误问题。当您将鼠标悬停在错误上时它会说什么？或者当你运行它时会发生什么？通常视图是在运行时编译的，您可以毫无问题地编译和运行它。
您是否尝试过加载页面并查看实际的错误消息是什么？这可能对告诉您您的问题大有帮助。不过，我的第一个标志是你没有终止你的赋值语句。这是一个问题。其次，你不需要使用隐藏字段来做你正在谈论的事情。您可以将数据传递（请不要从视图中的 utils 检索）到视图，然后使用 Razor 混合的 javascript 创建变量并设置它们的初始值。
@Steven V：上面写着“无法解析符号”
@BrianWarshaw：“剃刀混合的 javascript”？ JS 对 Razor 一无所知，是吗？ IOW，这对双胞胎永远不会相遇？
您正在使用 Razor/ASP.NET MVC 来编写 HTML 文档，就像您手动编写的一样，或者使用 PHP 或其他任何确定发送到浏览器。因此，如果您在“Razor”中有它，您可以在您的 javascript 标签中输出它，作为您在其中的任何其他内容的一部分。 JS 对 PHP、键盘或其他任何东西一无所知。一个文档被发送到浏览器——Razor 只是帮助你形成那个文档。

标签： c# javascript jquery asp.net-mvc razor

【解决方案1】：

你可以用Html.Hidden替换你的<input type="hidden"...：

@Html.Hidden("AllDepts", duckbillDeptsCSV, new { id = "hiddenAllDepts" })

并更新您的 jQuery 以使用 # 告诉它查找该 id（实际上，它正在查找 <hiddenAllDepts> 标记）

var deptsArray = $('#hiddenAllDepts').val();

【讨论】：

【解决方案2】：

如果您不反对在 MVC 视图中包含一些 JavaScript，那么您可以直接将代码添加到 JavaScript 中。例如

<script>
    var deptsArray = '@CCRReporterUtils.getDuckbillDepts()';
</script>

这只是其他答案的替代方法。

要将其转换为数组，您应该能够执行以下操作；

var deptsArray = ('@CCRReporterUtils.getDuckbillDepts()').split(',');

【讨论】：

谢谢；一旦我克服了这种奇怪的行为，我会很高兴尝试这个：stackoverflow.com/questions/18282029/…

【解决方案3】：

您可以在 javascript 中实例化一个变量，将 C# 值传递给它，然后在 jquery 中检索它。使用Html.Raw 和Json.Encode 方法

在 C# 中返回数组而不是加入它：

public static List<string> getDuckbillDepts()
{
    List<string> duckbillDptsStr = new List<string>();
    for (int i = 2; i < 100; i++)
    {
        duckbillDptsStr.Add(i.ToString());
    }
    return duckbillDptsStr;
}

在你看来，你会得到类似的东西：

<script type="text/javascript">
   var deptsArray = @Html.Raw(Json.Encode(CCRReporterUtils.getDuckbillDepts()));
</script>

然后在 jquery 中你只需对它做一些事情，因为你会有一个字符串数组：

<script type="text/javascript">
   $.each(deptsArray, function (i,e) {
      // Do something with each value
   });
</script>

【讨论】：

【解决方案4】：

尝试使用正确的 # 过滤器和 jquery 来通过 id 获取元素，例如：

var deptsArray = $('#hiddenAllDepts').val(); // get a string

如果你想要一个数组，你必须使用javascript的.split()方法并以数组的形式获取值，例如：

var deptsArray = $('#hiddenAllDepts').val().split(','); //get a array of strings

【讨论】：