我可以在局部视图中使用Javascript（带有@语法）吗？

Question

抱歉，如果我使用了错误的术语，那么我对这项技术还是陌生的。

我有一个称为MainView.cshtml的视图：

<div>
  @RenderPartial("_Partial");
</div>

<script type="text/javascript">
 $(document).ready(function() {
    someFunctionDefinedIn_Partial();
 }
</script>

_Partial视图具有定义函数的javascript（在本例中为someFunctionDefinedIn_Partial 。

function someFunctionDefinedIn_Partial()
{
  // This uses the "@" syntax to access C# variables, which can be done in .cshtml
  alert("Hello. This variable is from C#: @ClassInCSharp.Variable");
}

当我运行上面的代码时，我在chrome控制台中被告知该函数someFunctionDefinedIn_Partial不存在。 我猜这是因为部分Javascript无法将其导出到容器中。

我四处张望，发现可以将javascript提取到其自己的.js文件中，并引用此SO文章中所示的内容： 如何从局部视图将JavaScript渲染到MasterLayout部分中？

但是，以上文章建议将javascript提取到其自己的单独文件.js中。 如果执行此操作，则说明我使用的是“原始” JavaScript，因此无法使用@表示法引用C＃中的变量。

是否可以以某种方式在我的MainView.cshtml中包含javascript，它也可以访问@语法，所以我可以使用C＃方法/变量？ 如果没有，是否可以创建一个外部javascript文件，但是它是否为.cshtml文件，因此我可以使用“ @”语法？

Answer 1

我可以在局部视图中使用Javascript（带有@语法）吗？

是的，但是javascript操作的顺序非常重要。 严格来说，以下javascript代码应该会出错：

console.log(myvariable);
var myvariable = "hello world!";

我正在使用一个变量，然后再定义它。 那就是您遇到的类似问题。

我是否建议直接在视图内使用Javascript？

绝对几乎绝对不会 。 当今大多数javascript / css / html的编写方式都紧密结合在一起。 在C＃中添加耦合似乎是一种巨大的代码味道 。 我个人的喜好是将数据添加到html元素，并将javascript仅耦合到我的html。 所以代替：

<script>
var myIds = [@(string.Join(Model.People.Select(p => Id.ToString().ToArray(), ",")];
</script>

这真是丑陋且难以调试，我将我的值应用于代表我的对象的html演示文稿：

<div data-id="@model.Id" class="person">
  Person Name: @Html.DisplayFor(m => m.name)
</div>

<script>
var myIds = [];
$('.person').each((i,p) => myIds.push($(p).data("Id"));
</script>

现在，对于确保数组中的ID与页面上的ID相同，所有内容都封装在一起，我真的不会犯错。

另一个代码气味是在逻辑视图中使用@()方法。 例如，我看到很多：

@foreach(var person in Model.persons) 
{
  if (person.Age >= 21)
  {
    <div>Adult</div>
  }
  else
  {
    <div>Child</div>
  }
}

在我看来，这是逻辑。 我对ViewModel的定义是一个表示所有必要数据点（甚至是从逻辑派生的数据点）的模型。 所以我会做类似的事情：

public class PersonVM
{
  public DateTime BornOn { get; set; }
  public bool IsAdult { get { return /*BornOnLogic*/; } ]
}

因此，在我看来，我不明白为什么有人需要直接在Javascript中使用任何C＃。

我还建议您阅读Philip Walton的（Google工程师）-分离HTML，CSS和JavaScript 。

Answer 2

我不建议您在局部视图中包含JS，因为它可以在给定视图中多次添加。 看一下链接

我建议您将局部JS移至主视图。

UPDATE

如果您没有其他选择，请考虑不能在普通JS中使用Razor： 链接

您可以做的是提取JS中所需的C＃值，并在调用JS时将其发送。 因此，您可以：

function someFunctionDefinedIn_Partial(variableValue)
{
  // This uses the "@" syntax to access C# variables, which can be done in .cshtml
  alert("Hello. This variable is from C#: " + variableValue);
}

并从局部视图调用它：

someFunctionDefinedIn_Partial(@ClassInCSharp.Variable);