突出显示表中的更改 (ASP/MVC5)

Question

我正在开发一个用于显示股票报价的 Web 小型应用程序。

为此，我创建了一个控制器 (TradingController)，旨在从我的服务层检索所有报价。

public class TradingController : Controller
{
    private readonly IQuoteService _service;
    private readonly IQuoteMapper _mapper;

    // GET: TradingPlace
    public TradingController(IQuoteService service, IQuoteMapper mapper)
    {
        _service = service;
        _mapper = mapper;
    }

    public ActionResult Index()
    {
        return View(_mapper.MapToViewModel(_service.GetRealtimeQuotes()));
    }

    [OutputCache(NoStore = true, Duration = 0)]
    public ActionResult AutoRefresh()
    {
        return PartialView("_Quotes", _mapper.MapToViewModel(_service.GetRealtimeQuotes()));
    }
}

最后一个方法（AutoRefresh）直接从视图中调用，以“实时”信息自动刷新表格。

<div id="quotes">
    @Html.Partial("_Quotes", Model)
</div>

<script>
    function Refresh() { $('#quotes').load('@Url.Action("AutoRefresh",   "Trading")'); }
    setInterval(Refresh, 2500);
</script>

我试图找到一种方法来突出显示变化的值。我的最终目标是显示趋势（值正在增加/减少......）。

有没有简单的方法来实现这一点？

谢谢，

Seb.

Answer 1

为了突出显示更改，至少您需要能够识别“更改”。这将涉及拥有以前数据的副本、新数据的副本以及检查它们的方法。

这可以在服务器端完成吗？

也就是说，_service.GetRealtimeQuotes() 中的实现能否“知道”某事何时“改变”？也许通过该记录上的“最后更新”时间戳，或通过其他方式？如果是这样，那么可以将其包含在模型中，并且视图可以简单地响应该属性。所以模型可能有这样的东西：

public bool Changed
{
    get
    {
        // return true of some timestamp is less than a minute old?
        // or less than 30 seconds old?
        // or by some other comparison logic?
    }
}

然后显示这些项目的视图可以绑定到它。假设在视图中有一个这些对象的列表被迭代，它可能看起来像这样：

<span class="@(item.Changed ? "changed" : "normal")">@item.CurrentValue</span>

这将修改“已更改”元素的 CSS 类。

如果这个不能在服务器端完成，那么客户端可能需要更多的工作。这里的徒手概念证明有点大，但基本思想是：

• 更改 AJAX 以返回数据而不是视图，并在客户端代码中从该数据重新填充 DOM。
• 将数据数组存储在客户端代码中。
• 当您从 AJAX 获取新的数据数组时，循环遍历它并将记录与当前数据进行比较。
• 对于每个“更改”的记录，在数据对象中将其标记为这样。
• 从数据中重新填充 DOM，类似地根据标志修改 CSS 类。