我可以在局部視圖中使用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);