MVC视图加载时，根据[日期]值设置变量类？

Question

在我的MVC5 web应用程序中，我使用GridMVC在我的一个网格列中显示一个按钮（样式化超链接）作为资产验证按钮。基本上，单击该按钮时，它会根据其ID来搜索DB，并将[verified_date]设置为DateTime.Now。下面是我的脚本一起有问题的列来更新相应的记录verification_date值的代码：

@Html.Grid(Model).Columns(columns => 
    { 
     // Other Columns 
     columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o => @<a href="#" class="btn btn-default btn-sm noDecoration" onclick="verifyAsset(@o.Id)"><span class="glyphicon glyphicon-ok"></span> @*View*@</a>).SetWidth(15); 
     // Other Columns 
}).WithPaging(10).Sortable().Filterable().WithMultipleFilters(); 

SCRIPT：

<script type="text/javascript"> 
    function verifyAsset(assetID) { 
     var data = { asset_ID: assetID }; 
     $.ajax({ 
      type: "POST", 
      dataType: "JSON", 
      url: '@Url.Action("verifyAsset", "INV_Assets")', 
      data: data, 
      success: function (resp) { 
       alert("Success! Asset " + resp.ID + " successfully verified on " + resp.VDate); 
       location.reload(true); 
      }, 
      error: function (resp) { 
       alert("There was an error verifying this Asset..."); 
      } 
     }); 
    } 
</script> 

我想什么就做的视图（加载过程中）为：根据呈现为（例如2/24/2015 1:37:51 PM）的每个记录[verified_date]字段的日期值设置类（上面的[btn-default]）。如果[verified_date]的值比当前日期早3个月，我希望按钮（样式超链接）具有btn-default类，否则btn-success类。

然后，当我点击验证按钮后，我还想更新[verification_date]值后，将该特定记录的验证按钮的类别从btn-default更改为btn-success。

有没有人有如何去做这个想法？

---

编辑：

试图Jason的想法，我在与获取个人[verified_date]值与截止比较的问题。这是我目前有（中评结果）：

$(document).ready(function() { 

     var cutoff = threeMonthsBack(); 

     $(".verifyBtn").each(function (index) { 
      var date = new Date($(this).data("verified_date")); 
      alert("Date: " + date + " || Cutoff: " + cutoff); 
      // Date: Invalid Date || Cutoff: Tue Nov 25 2014 08:42:54 GMT-0600 (Central Standard Time) 

      if (date < cutoff) { 
       $(this).removeClass("btn-success").addClass("btn-default"); 
      } 
      else { 
       $(this).removeClass("btn-default").addClass("btn-success"); 
      } 
     }); 

     $("a.btn-default").on("click", function (e) { 
      e.preventDefault(); 
      $(this).removeClass("btn-default").addClass("btn-success"); 
     }); 

     function threeMonthsBack() { 
      var _date = new Date(); 
      _date.setMonth(_date.getMonth() - 3); 
      return _date; 
     } 
    }); 
    } 
</script> 

，我需要做的是设置date变量是[verified_date]我的每个网格的记录，然后比较它是大于或小于3几个月从今天的当前日期。

我创建了一个我的记录，其中有一个[verified_date]/11/24/2014。这是呈现HTML：

<td class="grid-cell" data-name> 
    <a href="#" class="btn btn-sm noDecoration verifyBtn btn-success" onclick="verifyAsset(8)"> 
     <span class="glyphicon glyphicon-ok">...</span> 
    </a> 
</td> 

我如何设置date变量包含在我的每一行的[verified_date]值：

<td class="grid-cell" data-name="verified_date">11/24/2014 12:00:00 PM</td> 

这是对HTML verifyBtn同一记录的？如果我的理解有些不正确，我的脚本中的date var的上述代码当前正在寻求一个data的值为verified_date，但verifyBtn本身没有此属性？

Answer 1

你可以用jQuery的。就绪（），。每个（），.addClass（），并.removeClass（）做到这一点。这里的基本思想是：

我不知道你的HTML标记是什么样子，但是让我们假设：

<a href="#" data-date="2/24/2015 1:37:51 PM" class="btn btn-default">A</a> 
<a href="#" data-date="1/24/2015 1:37:51 PM" class="btn btn-default">B</a> 
<a href="#" data-date="5/24/2015 1:37:51 PM" class="btn btn-default">C</a> 

现在我们用.ready()的文件加载事件。

$(document).ready(function() { 
    // use a more discriminating selector than "a" 
    $("a").each(function(index) { 
     var date = new Date($(this).data("date")); 
     var cutoff = threeMonthsBack(); 
     if (date < cutoff) { 
      $(this).removeClass("btn-success").addClass("btn-default"); 
     } 
     else { 
      $(this).removeClass("btn-default").addClass("btn-success"); 
     } 
    }); 

    $("a.btn-default").on("click", function(e) { 
     e.preventDefault(); 
     $(this).removeClass("btn-default").addClass("btn-success"); 
    }); 
}); 

这只有在您的网格通过标准页面加载加载时才有效。如果您通过AJAX加载，您需要将其添加到AJAX成功处理程序。

如果您想等待来自服务器的验证，请将该点击处理程序移入您的验证成功处理程序。

success: function(resp) { 
    ... 
    // you'll need to id or pass through verifyAsset() 
    $(assetID).removeClass("btn-default").addClass("btn-success"); 
} 

编辑：

有了您的编辑，我们假设HTML被设置成你的按钮和数据都在同一行的独立单元。

<tr> 
    <td class="grid-cell" data-name="verified_date">11/24/2014 12:00:00 PM</td> 
    <td class="grid-cell" data-name> 
     <a href="#" class="btn btn-sm noDecoration verifyBtn btn-success" onclick="verifyAsset(8)"> 
      <span class="glyphicon glyphicon-ok">...</span> 
     </a> 
    </td> 
</tr> 

这是jQuery的traversal functions变得得心应手。由于我们假设按钮和网格在同一行上，我们发现按钮然后遍历DOM树以找到其父亲<tr>，然后通过tr的孩子搜索兄弟数据单元。

$(".verifyBtn").each(function (index) { 
    var me = $(this); // the button 
    var parent = me.closest("tr"); 
    var sibling = parent.find("td[data-name='verified_date']:first"); 
    var datestr = sibling.html(); 
    // or just chain it all 
    // var datestr = $(this).closest("tr").find("td[data-name='verified_date']:first").html(); 
    var date = new Date(datestr); 
    var cutoff = threeMonthsBack(); 
    if (date < cutoff) { 
     $(this).removeClass("btn-success").addClass("btn-default"); 
    } 
    else { 
     $(this).removeClass("btn-default").addClass("btn-success"); 
    } 
}); 

这里的一个简单的例子http://jsfiddle.net/1b50zx0t/2/