在一个部分内部使用foreach或ToArray,js变量错误

时间:2014-06-18 13:06:27

标签: c# jquery asp.net-mvc-4 razor

我正在尝试在mvc 4中的foreach中进行section。我无法得到它来获取js变量的范围。所以这里发生的是它不会识别foreach内的图像。关于如何解决它的想法?

@section Scripts {
    <script type="text/javascript">
        var images = "";
        @foreach (var item in Model.Images)
        {
            //it does not know about the images varable here
            images += string.Format("[{0}/{1}],", "path", item);
        }
    </script>
}

我也在尝试这个没有成功

@section Scripts {
    <script type="text/javascript">
        //statement is not terminated
        var images = @Model.Images.ToArray()
        console.log(images);
    </script>
}

修改
我只是用控制器中的图像名称填充它并传递给视图。

public class ImageViewModel
{
    public string[] Images { get; set; }
}

1 个答案:

答案 0 :(得分:3)

你需要用@:切换回HTML(在你的情况下为JS),然后再回到剃刀

@section Scripts {
    <script type="text/javascript">
        var images = "";
        @foreach (var item in Model.Images)
        {
            //it does not know about the images varable here
            @:images += "@string.Format("[{0}/{1}],", "path", item)";
        }
    </script>
}

否则,它假设您的images是服务器端C#变量,而不是客户端内容。

要回答你的评论,你想结束这个:

    <script type="text/javascript">
        var images = "";
        images += "imagename1";
        images += "imagename2";
        images += "imagename3";
        images += "imagename4";
    </script>

因此,从此开始向后工作,这是伪脚本。

    <script type="text/javascript">
        var images = "";
        // LOOP START HERE
        images += "@SERVER VALUE HERE";
        // LOOP END HERE
    </script>

如果您在@foreach{}代码块中看到代码,它将假定它是服务器端代码。

        @foreach (var item in Model.Images)
        {
            // This "must" be a local images variable as it is in a Razor code block!
            images += @string.Format("[{0}/{1}],", "path", item);  // Wrong!
        }

@:转义序列告诉razor将以下内容视为标记而不是代码。然后@(expression)将服务器端值注入该客户端标记。客户端标记常量需要引号。

Slicker版本:

  @section Scripts {
    <script type="text/javascript">
        var images = "@string.Join(",", Model.Images)";
        console.log(images);
    </script>
  }