我如何用稍后使用 html and/or css 计算的值替换现有的 html val？

Question

我正在创建 html 以从 REST 方法传回，例如：

StringBuilder builder = new StringBuilder();
builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-6\">");
builder.Append("<div class=\"bottomleft\">");
// TODO: Replace the hardcoded val (",814.81") with the actual val
builder.Append("<h2 class=\"sectiontext\">Forecasted Spend - ,814.81</h2>");

（在此之前添加了初步的html）。之后我像这样添加实时数据：

builder.Append("<table>");
builder.Append("<tr>");
builder.Append("<th>Item Code</th>");
builder.Append("<th class=\"rightjustifytext\">Last Week's Usage</th>");
builder.Append("<th class=\"rightjustifytext\">This Week's Price</th>");
builder.Append("<th class=\"rightjustifytext\">Forecasted Spend</th>");
builder.Append("</tr>");

decimal forecastedSpend;
int lastWeeksUsage;
int loopCount = 0;
int totalUsage = 0;
decimal totalForecastedSpend = 0.0M;
foreach (DataRow dr in dtViewPriceMatrixVarianceResults.Rows)
{
    builder.Append("<tr>");
    builder.Append(String.Format("<td>{0}</td>", dr["ItemCode"]));
    lastWeeksUsage = ProActWebReportsConstsAndUtils.RandomNumber(1, 1000);
    totalUsage = totalUsage + lastWeeksUsage;
    builder.Append(String.Format("<td class=\"rightjustifytext\">{0}</td>", ProActWebReportsConstsAndUtils.AddThousandsSeparator(lastWeeksUsage, false)));
    builder.Append(String.Format("<td class=\"rightjustifytext\">{0}</td>", ProActWebReportsConstsAndUtils.MoneyFormat(Convert.ToDecimal(dr["Price"]), true)));
    decimal currentPrice = Convert.ToDecimal(dr["Price"]);
    forecastedSpend = lastWeeksUsage * currentPrice;
    totalForecastedSpend = totalForecastedSpend + forecastedSpend;
    builder.Append(String.Format("<td class=\"rightjustifytext\">{0}</td>", ProActWebReportsConstsAndUtils.MoneyFormat(Convert.ToDecimal(forecastedSpend), true)));
    builder.Append("</tr>");
    loopCount++;
    if (loopCount >= 9) break;
}

（在此之后我将总值添加到总行中）。最后，我关闭元素并传回 StringBuilder 的内容：

builder.Append("</table>");
builder.Append("</div>");
builder.Append("</div>");
return builder.ToString();

问题是在填充 html table table rows.tabledata。我可以先执行循环，然后将值保存在通用列表中以供在循环中使用，但是如果有一种方法可以在我到达该值时用真实值替换该值，我会 wondering/hoping 使用html and/or css 来完成它。这可能吗？如果可能的话，怎么做？或者 "go back to" 会被认为是有害的吗？

REST 方法是：

[Route("{unit}/{begdate}/{enddate}")]
public HttpResponseMessage GetQuadrantData(string unit, string begdate, string enddate)
{
    _unit = unit;
    _beginDate = begdate;
    _endDate = enddate;
    string beginningHtml = GetBeginningHTML();
    string top10ItemsPurchasedHtml = GetTop10ItemsPurchasedHTML();
    string pricingExceptionsHtml = GetPricingExceptionsHTML();
    string forecastedSpendHtml = GetForecastedSpendHTML();
    string deliveryPerformanceHtml = GetDeliveryPerformanceHTML();
    string endingHtml = GetEndingHTML();
    String HtmlToDisplay = string.Format("{0}{1}{2}{3}{4}{5}",
        beginningHtml,
        top10ItemsPurchasedHtml,
        pricingExceptionsHtml,
        forecastedSpendHtml,
        deliveryPerformanceHtml,
        endingHtml);

    return new HttpResponseMessage()
    {
        Content = new StringContent(
            HtmlToDisplay,
            Encoding.UTF8,
            "text/html"
        )
    };
}

此 post 顶部的 html 生成代码来自 GetForecastedSpendHTML() 辅助方法。

有没有什么技巧可以用后来分配给 totalForecastedSpend 的值替换“$9,814.81”，或者我是否被迫寻求其他选择？

注意：尝试添加 javascript/jQuery 失败（如果有兴趣，请参阅）所以我不知道 javascript 解决方案是否对我有帮助。

UDPATE

这没有回答我的问题，但我的想法确实有效，循环并进行计算并首先将 vals 保存到通用列表，然后使用它：

首先，我创建了这个 class:

public class ForecastedSpend
{
    public String ItemCode { get; set; }
    public int LastWeeksUsage { get; set; }
    public Decimal Price { get; set; }
    public Decimal ForecastedSpendCalcd { get; set; }
}

...然后将上面的代码替换为：

int loopCount = 0;
int totalUsage = 0;
decimal totalForecastedSpend = 0.0M;
List<ForecastedSpend> fsList = new List<ForecastedSpend>();
foreach (DataRow dr in dtViewPriceMatrixVarianceResults.Rows)
{
    ForecastedSpend fs = new ForecastedSpend();
    fs.ItemCode = dr["ItemCode"].ToString();
    fs.LastWeeksUsage = ProActWebReportsConstsAndUtils.RandomNumber(1, 1000);
    totalUsage = totalUsage + fs.LastWeeksUsage;
    decimal currentPrice = Convert.ToDecimal(dr["Price"]);
    fs.Price = currentPrice;
    fs.ForecastedSpendCalcd = fs.LastWeeksUsage * currentPrice;
    totalForecastedSpend = totalForecastedSpend + fs.ForecastedSpendCalcd;
    loopCount++;
    fsList.Add(fs);
    if (loopCount >= 9) break;
}

//builder.Append("<h2 class=\"sectiontext\">Forecasted Spend - ,814.81</h2>");
builder.Append(string.Format("<h2 class=\"sectiontext\">Forecasted Spend - {0}</h2>", ProActWebReportsConstsAndUtils.MoneyFormat(totalForecastedSpend, true)));
builder.Append("<table>");
builder.Append("<tr>");
builder.Append("<th>Item Code</th>");
builder.Append("<th class=\"rightjustifytext\">Last Week's Usage</th>");
builder.Append("<th class=\"rightjustifytext\">This Week's Price</th>");
builder.Append("<th class=\"rightjustifytext\">Forecasted Spend</th>");
builder.Append("</tr>");

foreach (ForecastedSpend fs in fsList)
{
    builder.Append("<tr>");
    builder.Append(String.Format("<td>{0}</td>", fs.ItemCode));
    builder.Append(String.Format("<td class=\"rightjustifytext\">{0}</td>", ProActWebReportsConstsAndUtils.AddThousandsSeparator(fs.LastWeeksUsage, false)));
    builder.Append(String.Format("<td class=\"rightjustifytext\">{0}</td>", ProActWebReportsConstsAndUtils.MoneyFormat(Convert.ToDecimal(fs.Price), true)));
    builder.Append(String.Format("<td class=\"rightjustifytext\">{0}</td>", ProActWebReportsConstsAndUtils.MoneyFormat(Convert.ToDecimal(fs.ForecastedSpendCalcd), true)));
    builder.Append("</tr>");
}

效果很好。

Answer 1

如果您要寻求一种方法来改变 css/html 中的元素顺序，对我来说这听起来像是 flexible box layout 的任务。

示例：

HTML:

<div id="mycontainer">
     <table id="mytable">
        <tr><td>row 1</td></tr>
        <tr><td>row 2</td></tr>
        <tr><td>row 3</td></tr>
        <tr><td>row 4</td></tr>
        <tr><td>row 5</td></tr>
        <tr><td>row 6</td></tr>
        <tr><td>row 7</td></tr>
    </table>
    <p id="mytotal">2000$</p>
</div>

然后，CSS:

div#mycontainer {
    display: flex;
    flex-direction: column;
}
p#mytotal {
    flex: 1;
    order: 1;
}
table#mytable {
    flex: 1;
    order: 2;
}

请注意，我已将 table 设置为出现在第二个位置，并将总计设置为出现在第一个位置（通过属性 order）。

Answer 2

另一种在生成结果后将其呈现到浏览器之前转换结果的标准方法是生成 XML 结果并让浏览器使用适当的 XSL 样式表[= =24=].

这项技术有几个优点：

它将 format 与 data 分开，这通常是一个很好的做法。

它减少了带宽，因为 XSL 仅由设备传送一次（之后，通常会在本地缓存）。

转换由浏览器本机完成，实际上这通常与直接 HTML 渲染一样快。

有助于可维护性：如果格式改变，服务端程序根本不用修改；只是 XSL 样式表。

我如何用稍后使用 html and/or css 计算的值替换现有的 html val？

How I can replace an existing html val with a value calculated later using html and/or css?

html

css

rest

html-rendering

UDPATE