Question

我无法弄清楚Razor语法以及变量范围的工作原理。我是C＃的新手，也是Razor语法的新手。这是我创建的一些代码，我想要做的事情，只是更简单。

我有一个由ViewBag.Photos表示的数组，我希望迭代以显示在我的UI代码中。但是，对于第一张照片，我需要为我的UI代码（使用jquery插件）添加一个名为active的独特辅助类，以便正确显示，因为它需要知道第一张照片是什么。

我做错了什么，最好的方法是什么？

<div class="foo">
    @{int i = 1;}
    @foreach (var photo in ViewBag.Photos) 
    {
        if (i == 1) { 
            <div class="item active">
        } 
        else {
            <div class="item">
        }
        <img src="@photo" alt="@ViewBag.SomeVar">
        <div class="bar">
            <p>Test</p>
        </div>
        </div>
        @{i++};
    }
</div>

Answer 1

你应该使用for语句，而不是foreach。

<div class="foo"> 
@for(int i = 0; i < ViewBag.Photos.Count; i++)  
{ 
    <div class="@((i == 0) ? "item active" : "item")">
        <img src="@ViewBag.Photos[i].Photo" alt="@ViewBag.Photos[i].AltText"> 
        <div class="bar"> 
            <p>Test</p> 
        </div> 
    </div> 
} 
</div>

我假设Photos是一个包含照片和alt文本的类的数组。如果没有，你会做这样的事情：

<img src="@ViewBag.Photos[i]" alt="@ViewBag.AltText[i]">

然而，您确实应该使用视图模型。您也可以使用DisplayTemplate做得更好。但这应该让你开始。

更新：我会使用条件运算符编写如上所示的代码。我认为它更容易阅读，而且不那么令人困惑。

Answer 2

<div class="foo">
    @{
          int i = 1;
          @foreach (var photo in ViewBag.Photos) 
          {
             if (i++ == 1) { 
               <div class="item active">
             } 
             else {
               < div class="item">
             }
             <img src="@photo" alt="@ViewBag.SomeVar">
             <div class="bar">
                <p>Test</p>
             </div>
             </div>

       }
    }
</div>

或

    <div class="foo">
    @{
          int i = 1;
          var className = "item";
          @foreach (var photo in ViewBag.Photos) 
          {
             className = i++ == 1 ? "item active" : "item";
             <div class="@className">
                   <img src="@photo" alt="@ViewBag.SomeVar">
                   <div class="bar">
                       <p>Test</p>
                  </div>
             </div>

       }
    }
</div>

Razor语法：麻烦搞清楚嵌套语句和变量范围

2 个答案: