Question

我目前正在问自己，我的剃刀视图中是否使用了太多逻辑。

我学会了分离逻辑和标记，但是剃刀为我们提供了很好的工作机会。我非常希望有机会给出“动态”css类，就像我的下面的例子一样。

我确信我所做的并不是最佳做法，但如何才能正确完成？

@using AtheleteManager.Helpers
@using AtheleteManager.Models
@using Microsoft.Ajax.Utilities
@model AtheleteManager.Models.Athlete

<div class="container col-lg-9 col-md-9 hidden-sm hidden-xs panel panel-primary topten padding-leftright-thirty">
   <div class="panel-heading negative-margin-leftright-thirty">
      <h1 id="">Timeline</h1>
   </div>
   <div id="timeline">
      <div class="row timeline-movement timeline-movement-top">
         <div class="timeline-badge timeline-future-movement">
            <a href="#">
               <span class="glyphicon glyphicon-plus"></span>
            </a>
         </div>
      </div>
      <div class="row timeline-movement">

         @foreach (var trainingPost in Model.TrainingPosts)
         {
            string className;
            string offSet;
            string debitsOrCredits;
            var dateHelper = new DateHelper();
            <div class="timeline-badge">
               <span class="timeline-balloon-date-day">@trainingPost.Date.Day</span><br />
               <span class="timeline-balloon-date-month">@dateHelper.ToShortMonthName(trainingPost.Date)</span>
            </div>
            if (trainingPost.Id % 2 != 0)
            {
               className = "col-sm-6 timeline-item";
               offSet = "col-sm-11";
               debitsOrCredits = "credits";
            }
            else
            {
               className = "col-sm-offset-6 col-sm-6 timeline-item";
               offSet = "col-sm-offset-1 col-sm-11";
               debitsOrCredits = "debits";
            }
            foreach (var executedWorkouts in trainingPost.ExecutedWorkouts)
            {
               <div class="@className">
                  <div class="row">
                     <div class="@offSet">
                        <div class="timeline-panel @debitsOrCredits">
                           <ul class="timeline-panel-ul">
                              <li>
                                 <p>
                                    <small class="text-muted"><i class="glyphicon glyphicon-time"></i> @trainingPost.Date.ToShortDateString()</small>
                                 </p>
                              </li>
                              <li><span class="importo">Workout</span></li>
                              <li>
                                 <h3>@executedWorkouts.Workout.Name</h3>
                              </li>
                              <li><span class="causale">      <b>@executedWorkouts.Workout.Rounds</b></span> </li>
                           </ul>
                        </div>
                     </div>
                  </div>
               </div>
            }
         }
      </div>
   </div>
</div>

Answer 1

就你在标记中添加的逻辑与视图相关，你很好。

我个人不喜欢我的视图中的C#代码块，因此我会用条件运算符替换你的if语句。

这样的事情：

<div class="@(trainingPost.Id % 2 != 0 ? "col-sm-11" : "col-sm-offset-1 col-sm-11")">

这有助于让您更加简洁，更具可读性。

最后考虑一下与IT相关的许多问题，我认为没有正确的答案，只有不同的方法。

Answer 2

这是你做的最好的方式。另外，我这样做是为了尽可能地使用Razor的优势。

只有在更新模型时才会更新视图。

您可以通过在BundelConfig

中制作css文件来增强它

Answer 3

我个人不喜欢在View中放置太多业务逻辑。

主要原因是 单元测试视图 与动作方法相比并不容易。您必须使用 Razor Generator 或实施 集成测试 。无论哪种方式都需要大量的初始设置，它们往往容易破碎。

因此，我将这些作为TrainingPost类中的属性，并在Controller中设置这些值。然后，当您编写单元测试时，您可以断言这些值。

public class TrainingPost 
{
   ...
   public string ClassName { get; set; }
   public string OffSet { get; set; }
   public string DebitsOrCredits { get; set; }
}

在Asp.Net Mvc的剃刀视图中有多少逻辑有意义？

3 个答案: