Razor输入框逗号分隔转换
Posted
技术标签:
【中文标题】Razor输入框逗号分隔转换【英文标题】：comma separate conversion in the input box Razor 【发布时间】：2020-12-09 11:24:47 【问题描述】：我有一个输入框（使用 C# razor），用户可以输入一个字符串。我使用 ToString("#,#0.00") 格式化为数值，因为用户将在输入框中输入数值。当用户按下回车键时，它会自动计算例如“平均值”并生成一个有效的百分比。它将更新单元格。问题是我希望输入框在输入框中接受逗号分隔（例如 2,000 或 30,000）。但是，当我尝试使用逗号分隔符输入数值进行一些测试时，2,000 将变为 2.00。我试图弄清楚，但我做不到，我被卡住了。你能帮我么。谢谢。
这是我的 html 剃须刀代码（我已经发布了它的部分代码，因为太久了）：
<table>
<tr class="header expand">
<th class="dcf-left-column-border-table"><span class="sign"></span>Revenue</th>
<td class="dcf-middle-column-border-table"></td>
<td class="dcf-middle-column-border-table"></td>
<td class="dcf-middle-column-border-table"></td>
<td class="dcf-middle-column-bg-border-table">@Html.TextBoxFor(x => x.objIncAppr.HistoricalFinancialYears[0].Sales, Model.objIncAppr.HistoricalFinancialYears[0].Sales.ToString(), new @class = "dcf-input-box" )</td>
<td class="dcf-middle-column-bg-border-table">@Html.TextBoxFor(x => x.objIncAppr.HistoricalFinancialYears[1].Sales, Model.objIncAppr.HistoricalFinancialYears[1].Sales.ToString("#,#0.00"), new @class = "dcf-input-box" )</td>
<td class="dcf-middle-column-bg-border-table">@Html.TextBoxFor(x => x.objIncAppr.HistoricalFinancialYears[2].Sales, Model.objIncAppr.HistoricalFinancialYears[2].Sales.ToString("#,#0.00"), new @class = "dcf-input-box" )</td>
<td class="dcf-middle-column-bg-border-table">@Html.TextBoxFor(x => x.objIncAppr.ProjectedFinancialYears[0].Sales, Model.objIncAppr.ProjectedFinancialYears[0].Sales.ToString("#,#0.00"), new @class = "dcf-input-box" )</td>
<td class="dcf-middle-column-bg-border-table">@Html.TextBoxFor(x => x.objIncAppr.ProjectedFinancialYears[1].Sales, Model.objIncAppr.ProjectedFinancialYears[1].Sales.ToString("#,#0.00"), new @class = "dcf-input-box" )</td>
<td class="dcf-middle-column-bg-border-table">@Html.TextBoxFor(x => x.objIncAppr.ProjectedFinancialYears[2].Sales, Model.objIncAppr.ProjectedFinancialYears[2].Sales.ToString("#,#0.00"), new @class = "dcf-input-box" )</td>
<td class="dcf-middle-column-bg-border-table">@Html.TextBoxFor(x => x.objIncAppr.ProjectedFinancialYears[3].Sales, Model.objIncAppr.ProjectedFinancialYears[3].Sales.ToString("#,#0.00"), new @class = "dcf-input-box" )</td>
<td class="dcf-right-column-bg-border-table">@Html.TextBoxFor(x => x.objIncAppr.ProjectedFinancialYears[4].Sales, Model.objIncAppr.ProjectedFinancialYears[4].Sales.ToString("#,#0.00"), new @class = "dcf-input-box" )</td>
</tr>
<tr style="table-layout:auto">
<th class="dcf-average-title-table">Average</th>
<td class="dcf-average-values-table">@Html.TextBoxFor(x => x.objIncAppr.ProjectedAverageGrowthRate, Model.objIncAppr.ProjectedAverageGrowthRate.ToString("P", CultureInfo.InvariantCulture), new @class = "dcf-average-input-box" )</td>
<td class="dcf-ratio-title-table">Growth Rate</td>
<td id="dcf-ratio-values-table">
<input type="text" placeholder="Input" list="growthrate" />
<datalist id="growthrate">
<option>BDO Benchmark</option>
<option>Historical Benchmark</option>
</datalist>
</td>
</table>
这是我的脚本：
<script>
//#region Updated version for auto calculation Projection
//hook the change event to the update method
$(document).ready(function ()
$('.dcf-input-box').on('change', function ()
$(this).UpdateGUI('green', true);
);
$('.dcf-ratio-input-box').on('change', function ()
$(this).UpdateGUI('green', true);
);
);
//RF: update a cell with new value and refresh the remaining cells in the same column
//Note: the list of Account Names and list of element IDs have to be in the same order
function updateCellWithNewValue(currAccount, newValue, listOfAccountNames, listOfElementIDs)
for (i = 0; i < listOfAccountNames.length; i++)
if (listOfAccountNames[i] === currAccount)
//RF: update the current cell
result = parseFloat(newValue).toFixed(2);
$(listOfElementIDs[i]).val(result);
//RF: refresh cells beneath the current cell
for (j = i + 1; j < listOfAccountNames.length; j++)
updateCellByRefresh(listOfAccountNames[j], listOfAccountNames, listOfElementIDs)
break;
//RF: refresh a particular cell
function updateCellByRefresh(currAccount, listOfAccountNames, listOfElementIDs)
switch (currAccount) // i.e. Sales
case "Gross Income":
iSales = listOfAccountNames.indexOf("Sales");
iCOGS = listOfAccountNames.indexOf("COGS");
iGI = listOfAccountNames.indexOf("Gross Income");
//RF: get curr Sales and COGS, then convert them to float datatype
var dblCurrSales = parseFloat($(listOfElementIDs[iSales]).val()) || 0;
var dblCurrCOGS = parseFloat($(listOfElementIDs[iCOGS]).val()) || 0;
//RF: calcuate the new gross income based on user changed sales and same curr COGS
var dblNewGI = dblCurrSales - dblCurrCOGS;
//EC: update the new gross income
result = parseFloat(dblNewGI).toFixed(2);
$(listOfElementIDs[iGI]).val(result);
break;
case "Gross Income Margin":
iSales = listOfAccountNames.indexOf("Sales");
iGI = listOfAccountNames.indexOf("Gross Income");
iGIMargin = listOfAccountNames.indexOf("Gross Income Margin");
var dblCurrSales = parseFloat($(listOfElementIDs[iSales]).val()) || 0;
var dblCurrGI = parseFloat($(listOfElementIDs[iGI]).val()) || 0;
var dblNewGIMargin = (dblCurrGI / dblCurrSales) * 100;
result = parseFloat(dblNewGIMargin).toFixed(2) + " %";
$(listOfElementIDs[iGIMargin]).val(result);
break;
case "EBITDA":
iGI = listOfAccountNames.indexOf("Gross Income");
iSGAExp = listOfAccountNames.indexOf("SGAExp");
iEBITDA = listOfAccountNames.indexOf("EBITDA");
var dblCurrGI = parseFloat($(listOfElementIDs[iGI]).val()) || 0;
var dblCurrSGAExp = parseFloat($(listOfElementIDs[iSGAExp]).val()) || 0;
var dblNewEBITDA = dblCurrGI - dblCurrSGAExp;
result = parseFloat(dblNewEBITDA).toFixed(2);
$(listOfElementIDs[iEBITDA]).val(result);
break;
case "EBITDA Margin":
iSales = listOfAccountNames.indexOf("Sales");
iEBITDA = listOfAccountNames.indexOf("EBITDA");
iEBITDAMargin = listOfAccountNames.indexOf("EBITDA Margin");
var dblCurrSales = parseFloat($(listOfElementIDs[iSales]).val()) || 0;
var dblCurrEBITDA = parseFloat($(listOfElementIDs[iEBITDA]).val()) || 0;
var dblNewEBITDAMargin = (dblCurrEBITDA / dblCurrSales) * 100;
result = parseFloat(dblNewEBITDAMargin).toFixed(2) + " %";
$(listOfElementIDs[iEBITDAMargin]).val(result);
break;
case "EBIT":
iEBITDA = listOfAccountNames.indexOf("EBITDA");
iDeprAmort = listOfAccountNames.indexOf("DeprAmort");
iEBIT = listOfAccountNames.indexOf("EBIT");
var dblCurrEBITDA = parseFloat($(listOfElementIDs[iEBITDA]).val()) || 0;
var dblCurrDeprAmort = parseFloat($(listOfElementIDs[iDeprAmort]).val()) || 0;
var dblNewEBIT = dblCurrEBITDA - dblCurrDeprAmort;
result = parseFloat(dblNewEBIT).toFixed(2);
$(listOfElementIDs[iEBIT]).val(result);
break;
case "EBIT Margin":
iSales = listOfAccountNames.indexOf("Sales");
iEBIT = listOfAccountNames.indexOf("EBIT");
iEBITMargin = listOfAccountNames.indexOf("EBIT Margin");
var dblCurrSales = parseFloat($(listOfElementIDs[iSales]).val()) || 0;
var dblCurrEBIT = parseFloat($(listOfElementIDs[iEBIT]).val()) || 0;
var dblNewEBITMargin = (dblCurrEBIT / dblCurrSales) * 100;
result = parseFloat(dblNewEBITMargin).toFixed(2) + " %";
$(listOfElementIDs[iEBITMargin]).val(result);
break;
case "Tax Rate":
iEBIT = listOfAccountNames.indexOf("EBIT");
iInterest = listOfAccountNames.indexOf("Interest");
iTax = listOfAccountNames.indexOf("Tax");
iTaxRate = listOfAccountNames.indexOf("Tax Rate");
var dblCurrEBIT = parseFloat($(listOfElementIDs[iEBIT]).val()) || 0;
var dblCurrInterest = parseFloat($(listOfElementIDs[iInterest]).val()) || 0;
var dblCurrTax = parseFloat($(listOfElementIDs[iTax]).val()) || 0;
var dblNewTaxRate = (dblCurrTax / (dblCurrEBIT - dblCurrInterest)) * 100;
result = parseFloat(dblNewTaxRate).toFixed(2) + " %";
$(listOfElementIDs[iTaxRate]).val(result);
break;
case "Net Income":
iEBIT = listOfAccountNames.indexOf("EBIT");
iIntetrest = listOfAccountNames.indexOf("Interest");
iTax = listOfAccountNames.indexOf("Tax");
iNetIncome = listOfAccountNames.indexOf("Net Income");
var dblCurrEBIT = parseFloat($(listOfElementIDs[iEBIT]).val()) || 0;
var dblCurrInterest = parseFloat($(listOfElementIDs[iInterest]).val()) || 0;
var dblCurrTax = parseFloat($(listOfElementIDs[iTax]).val()) || 0;
var dblNewNetIncome = dblCurrEBIT - dblCurrInterest - dblCurrTax;
result = parseFloat(dblNewNetIncome).toFixed(2);
$(listOfElementIDs[iNetIncome]).val(result);
break;
case "Net Income Margin":
iSales = listOfAccountNames.indexOf("Sales");
iNetIncome = listOfAccountNames.indexOf("Net Income");
iNetIncomeMargin = listOfAccountNames.indexOf("Net Income Margin");
var dblCurrSales = parseFloat($(listOfElementIDs[iSales]).val()) || 0;
var dblCurrNetIncome = parseFloat($(listOfElementIDs[iNetIncome]).val()) || 0;
var dblNewNetIncomeMargin = (dblCurrNetIncome / dblCurrSales) * 100;
result = parseFloat(dblNewNetIncomeMargin).toFixed(2) + " %";
$(listOfElementIDs[iNetIncomeMargin]).val(result);
break;
case "DeprAmortFCFF":
iDeprAmort = listOfAccountNames.indexOf("DeprAmort");
iDeprAmortFCFF = listOfAccountNames.indexOf("DeprAmortFCFF");
var dblCurrDeprAmort = parseFloat($(listOfElementIDs[iDeprAmort]).val()) || 0;
var dblNewDeprAmortFCFF = dblCurrDeprAmort
result = parseFloat(dblNewDeprAmortFCFF).toFixed(2);
$(listOfElementIDs[iDeprAmortFCFF]).val(result);
break;
case "FCFF":
iNetIncome = listOfAccountNames.indexOf("Net Income");
iDeprAmortFCFF = listOfAccountNames.indexOf("DeprAmortFCFF");
iCapEx = listOfAccountNames.indexOf("CapEx");
iNWC = listOfAccountNames.indexOf("NWC");
iFCFF = listOfAccountNames.indexOf("FCFF");
var dblCurrNetIncome = parseFloat($(listOfElementIDs[iNetIncome]).val()) || 0;
var dblCurrDeprAmortFCFF = parseFloat($(listOfElementIDs[iDeprAmortFCFF]).val()) || 0;
var dblCurrCapEx = parseFloat($(listOfElementIDs[iCapEx]).val()) || 0;
var dblCurrNWC = parseFloat($(listOfElementIDs[iNWC]).val()) || 0;
var dblNewFCFF = dblCurrNetIncome + dblCurrDeprAmortFCFF - dblCurrCapEx - dblCurrNWC;
result = parseFloat(dblNewFCFF).toFixed(2);
$(listOfElementIDs[iFCFF]).val(result);
break;
case "FCFFMargin":
iSales = listOfAccountNames.indexOf("Sales");
iFCFF = listOfAccountNames.indexOf("FCFF");
iFCFFMargin = listOfAccountNames.indexOf("FCFFMargin");
var dblCurrSales = parseFloat($(listOfElementIDs[iSales]).val()) || 0;
var dblCurrFCFF = parseFloat($(listOfElementIDs[iFCFF]).val()) || 0;
var dblNewFCFFMargin = (dblCurrFCFF / dblCurrSales) * 100;
result = parseFloat(dblNewFCFFMargin).toFixed(2) + " %";
$(listOfElementIDs[iFCFFMargin]).val(result);
break;
default:
break;
//RF: updates GUI based on user's input
jQuery.fn.UpdateGUI = function ($paramColour, $paramIsBold)
return this.each(function ()
var fontWeight = ($paramIsBold === true) ? "bold" : "normal";
this.style.color = $paramColour; // colour font
$(this).css( "font-weight": fontWeight ); // bold font
var currAccount; //i.e. Sales
var currYr; //2
var intAccBeg;
var intAccEnd;
var intYrBeg;
var intYrEnd;
var refPrefix;
// get "Sales" from "objIncAppr_ProjectedFinancialYears_0__Sales" or "objIncAppr_HistoricalFinancialYears_0__Sales" of the id
intAccBeg = this.id.indexOf("__") + 2;
currAccount = this.id.substring(intAccBeg);
//RF: get currYr (i.e. "0") from "objIncAppr_ProjectedFinancialYears_0__Sales" or "objIncAppr_HistoricalFinancialYears_0__Sales" of the id
//RF: get refPrefix (i.e. "objIncAppr_ProjectedFinancialYears_") from "objIncAppr_ProjectedFinancialYears_0__Sales" of the id or "objIncAppr_HistoricalFinancialYears_" if it's a historical year)
if (this.id.indexOf("objIncAppr_ProjectedFinancialYears_") > -1)
intYrBeg = this.id.indexOf("objIncAppr_ProjectedFinancialYears_") + 35;
currYr = this.id.substring(intYrBeg);
intYrEnd = currYr.indexOf("__");
currYr = currYr.substring(0, intYrEnd);
refPrefix = "#objIncAppr_ProjectedFinancialYears_";
else
intYrBeg = this.id.indexOf("objIncAppr_HistoricalFinancialYears_") + 36;
currYr = this.id.substring(intYrBeg);
intYrEnd = currYr.indexOf("__");
currYr = currYr.substring(0, intYrEnd);
refPrefix = "#objIncAppr_HistoricalFinancialYears_";
// get references (i.e. IDs) of all the required cells
var refCurrSales = refPrefix + currYr + "__Sales";
var refCurrCOGS = refPrefix + currYr + "__COGS";
var refCurrGI = refPrefix + currYr + "__GrossIncome";
var refCurrGIMargin = refPrefix + currYr + "__GrossIncomeMargin";
var refCurrSGAExp = refPrefix + currYr + "__SGAExp";
var refCurrEBITDA = refPrefix + currYr + "__EBITDA";
var refCurrEBITDAMargin = refPrefix + currYr + "__EBITDAMargin";
var refCurrDeprAmort = refPrefix + currYr + "__DeprAmort";
var refCurrEBIT = refPrefix + currYr + "__EBIT";
var refCurrEBITMargin = refPrefix + currYr + "__EBITMargin";
var refCurrInterest = refPrefix + currYr + "__Interest";
var refCurrTax = refPrefix + currYr + "__Tax";
var refCurrTaxRate = refPrefix + currYr + "__TaxRate";
var refCurrNetIncome = refPrefix + currYr + "__NetIncome";
var refCurrNetIncomeMargin = refPrefix + currYr + "__NetIncomeMargin";
var refCurrDeprAmortFCFF = refPrefix + currYr + "__DeprAmortFCFF";
var refCurrCapEx = refPrefix + currYr + "__CapEx";
var refCurrNWC = refPrefix + currYr + "__NWC";
var refCurrFCFF = refPrefix + currYr + "__FCFF";
var refCurrFCFFMargin = refPrefix + currYr + "__FCFFMargin";
var refCurrDiscountYear = refPrefix + currYr + "__DiscountYear";
var refCurrYearFrac = refPrefix + currYr + "__YearFrac";
var refCurrDiscountFactor = refPrefix + currYr + "__DiscountFactor";
var refCurrNPV = refPrefix + currYr + "__NPV";
var listOfAccountNames = [
"Sales", "COGS", "Gross Income", "Gross Income Margin", "SGAExp", "EBITDA", "EBITDA Margin", "DeprAmort", "EBIT", "EBIT Margin", "Interest", "Tax", "Tax Rate", "Net Income", "Net Income Margin", "DeprAmortFCFF", "CapEx", "NWC", "FCFF", "FCFFMargin", "DiscountYear", "YearFrac", "DiscountFactor", "NPV"
];
var listOfElementIDs = [
refCurrSales, refCurrCOGS, refCurrGI, refCurrGIMargin, refCurrSGAExp, refCurrEBITDA, refCurrEBITDAMargin, refCurrDeprAmort, refCurrEBIT, refCurrEBITMargin, refCurrInterest, refCurrTax, refCurrTaxRate, refCurrNetIncome, refCurrNetIncomeMargin, refCurrDeprAmortFCFF, refCurrCapEx, refCurrNWC, refCurrFCFF, refCurrFCFFMargin, refCurrDiscountYear, refCurrYearFrac, refCurrDiscountFactor, refCurrNPV
];
var newValue = parseFloat($(this).val()) || 0;
updateCellWithNewValue(currAccount, newValue, listOfAccountNames, listOfElementIDs);
);
;
//#endregion
</script>
【问题讨论】：
【参考方案1】：好的，我把它修好了。通过使用可以格式化数字的replace(/[^\d.]/g, "")。
我修改了这行代码：
var newValue = parseFloat($(this).val().replace(/[^\d\.]/g, "")) || 0;
【讨论】：
以上是关于Razor输入框逗号分隔转换的主要内容，如果未能解决你的问题，请参考以下文章