2017-10-06 25 views
0

我现在问自己,如果我在剃刀视图中使用了太多的逻辑。在Asp.Net Mvc的剃须刀视图中有多少逻辑是合理的?

我学会了分离逻辑和标记,但剃刀给了我们很好的工作机会。我非常喜欢有机会在下面的例子中给出“动态”的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> 

回答

0

至于逻辑你把你的标记是视图相关的你是不错的。

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

事情是这样的:

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

这将有助于让你查看更简洁,更具可读性。

最后想想尽可能多的IT相关的问题,我认为没有一个正确的答案,但只是不同的方法。

0

这是你所做的最好的方式。 另外,为了尽可能地使用剃须刀的优点,我也做了同样的事情。

仅在更新模型时更新视图。

可以提高,随着BundelConfig

0

个人不喜欢把太多的业务逻辑里面查看使css文件。

主要原因是与单元测试视图相比,不太容易。您必须使用剃刀发生器或执行器集成测试。无论哪种方式都需要很多初始设置,并且它们容易破裂。

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

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