Razor页面中无法访问已声明变量的问题咨询

首先看你这段关键代码：

@foreach (UserViewModel user in @Model)
{
    @{
        var currentLocalModel = user.moneyStats;
        var one = "weekly price:";
        string two = "saved from last week:";
        string three = "yearly Spending:";
    };
    <div class="row">
        <!-- 省略其他代码 -->
        <span class="label label-default">@one </span>
        <!-- 省略其他代码 -->
    </div>
}

你遇到的IDE无法识别one变量的问题，核心原因是Razor代码块的作用域限制：

在Razor中，@{ ... }是一个独立的局部代码块，这个块内部声明的变量（比如one、two）的作用域只限于该代码块内部。一旦跳出这个@{ ... }块，外部的HTML模板或者其他代码就无法访问这些变量了——这就像在C#的方法里，你在一个{ ... }代码块里声明的变量，出了这个块就用不了是一个道理。

解决办法 #

有两种简单的方式可以解决这个问题：

1. 移除多余的局部代码块，直接在foreach作用域内声明变量

这是最推荐的写法，可读性也最好：

@foreach (UserViewModel user in Model)
{
    // 直接在foreach循环的作用域内声明变量，整个循环内都能访问
    var currentLocalModel = user.moneyStats;
    var one = "weekly price:";
    string two = "saved from last week:";
    string three = "yearly Spending:";

    <div class="row">
        <div class="col-sm-3">
            <div class="well red">
                <p>@user.UserName </p>
            </div>
        </div>
        <div class="col-sm-9">
            <div class="well neutral">
                <p> @user.status</p>
                <div class="bottom-left-text">
                    <span class="label label-default">@one </span>
                    <span class="label label-primary">Total KWH: 200</span>
                    <span class="label label-success">Labels</span>
                </div>
            </div>
        </div>
    </div>
}

这样变量one属于foreach循环的作用域，循环内的所有代码（包括HTML部分）都能正常访问它。

2. 将HTML内容并入局部代码块（不推荐，可读性较差）

如果你一定要保留局部代码块的结构，可以把后续的HTML内容也放到同一个代码块里，用<text>标签包裹HTML内容（或者用@:输出单行内容）：

@foreach (UserViewModel user in Model)
{
    @{
        var currentLocalModel = user.moneyStats;
        var one = "weekly price:";
        string two = "saved from last week:";
        string three = "yearly Spending:";

        <text>
        <div class="row">
            <div class="col-sm-3">
                <div class="well red">
                    <p>@user.UserName </p>
                </div>
            </div>
            <div class="col-sm-9">
                <div class="well neutral">
                    <p> @user.status</p>
                    <div class="bottom-left-text">
                        <span class="label label-default">@one </span>
                        <span class="label label-primary">Total KWH: 200</span>
                        <span class="label label-success">Labels</span>
                    </div>
                </div>
            </div>
        </div>
        </text>
    }
}

另外提个小建议：你的代码里重复引用了bootstrap.min.css，可以删掉其中一个，避免不必要的资源重复加载。

内容的提问来源于stack exchange，提问作者Grazosi