用于贷款支付计算的自定义 ASP.NET Ajax控制

分享于 

9分钟阅读

Web开发

  繁體

Screenshot - LoanPaymentCalculationControl.jpg

介绍

我对 ASP.NET 非常新兴,但这项技术似乎非常有趣,因这里我决定构建一个自定义 ASP.NET 控件。 为了使这个任务更加有趣,我尝试构建一个ajax启用的控件。 新的控制必须做一些有用的事情,所以我选择建立抵押( 贷款贷款) 支付计划。 生成的代码取决于以下假设:

  • 使用以下公式计算用于计算每月付款的贴现率: ((Math.Pow((1 + monthRate), monLength)) - 1)/(monthRate * (Math.Pow((1 + monthRate), monLength)))
  • 每月支付利息的利息分数是通过平衡( 还没有付款的抵押) 乘以每月利率来计算的。 这意味着每个月的利息部分会减少,按揭支付部分也会增加。

这些假设不应适用于实际上,但结果大致等于银行通常用于计算贷款支付。 无论如何,这个控件的目的不是在官方网站上使用,也不是完全精确,而是要了解定制ajax控件如何在实际环境中有效工作。 我可以提前说它很有用。

使用代码

任何Ajax控件都由两个主要部分组成: 服务器端 (ASP.NET) 和客户端( JavaScript )。 为了完全启用,控件通常会带来任何用户输入--产生的UI呈现,显示支付计划 table --。

为了减少带宽,控件还应该只交换JavaScript和服务器端代码之间的数据,没有标记。 这意味着UI是使用非HTML呈现的,而是使用JavaScript调用网页DOM方法。 HTML也可以由JavaScript构建,但这不是那么有趣或者有效,对吧?

服务器端

主服务器端方法是 buildScheduleForClient。 这里方法根据上述假设返回要在客户端上呈现的数据的json编码 array。 这里函数是从 ICallbackEventHandler.GetCallbackResult() 它本身是由 ASP.NET Ajax架构每次启动回调时调用的。

privatestring buildScheduleForClient(int iMonthCount, 
 double dInterestRate, double dLoanAmount)
{
 StringBuilder sb = new StringBuilder();
 sb.Append("[");
 sb.Append(String.Format("['{0}','{1}','{2}','{3}','{4}']",
 _COL_MONTH, _COL_TOTAL_PAY, _COL_INTEREST_PAY, 
 _COL_LOAN_PAY, _COL_BAL));
 double dDiscountRate = 
 LoanMath.CalculateDiscountRate(dInterestRate/1200, iMonthCount);
 double dMonthPayment = dLoanAmount/dDiscountRate;
 double dMonthPaymentRounded = Math.Round(dMonthPayment, 2);
 double balance = dLoanAmount;
 for (int i = 1; i <= iMonthCount; i++)
 {
 double dInterestPayment = (dInterestRate/1200) * balance;
 double dCreaditRepayment = (dMonthPayment - dInterestPayment);
 balance -= dCreaditRepayment;
 sb.Append(String.Format(",['{0}','{1}','{2}','{3}','{4}']", 
 i.ToString(), dMonthPaymentRounded.ToString(), 
 Math.Round(dInterestPayment, 2).ToString(), 
 Math.Round(dCreaditRepayment, 2).ToString(), 
 Math.Ceiling(balance).ToString()));
 if (i % 12 == 0)
 {
 sb.Append(String.Format(",['Year {0}, repayed {1}%']", 
 (i/12),Math.Round((100 - ((balance/dLoanAmount) * 100)),
 1)));
 }
 }
 sb.Append("]");
 return sb.ToString();
}

关于服务器端还有一个值得注意的事情是如何包括所有相关的CSS和JavaScript材料。 JavaScript包含更容易:

  • 将 *.js 文件添加到项目中
  • 将它的"生成操作"更改为embedded资源""
  • 添加具有媒体类型信息 -- 换句话说,的属性 [assembly: WebResource("LoanCalculationControl.LoanCalculation.js","application/x-javascript")] --到AssemblyInfo文件
  • 添加以下代码以重写控件的OnPreRender 方法:
    Page.ClientScript.RegisterClientScriptResource(this.GetType(), 
    "LoanCalculationControl.LoanCalculation.js");

添加CSS稍微复杂一点。 OnPreRender 方法中的代码应该不同,你应该检查控件的其他实例是否已经向该页添加了一个CSS引用:

// add css referencestring cssUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(), 
 "LoanCalculationControl.LoanCalculation.css");
LoanHtmlLink cssLink = new LoanHtmlLink();
cssLink.Href = cssUrl;
cssLink.Attributes.Add("rel", "stylesheet");
cssLink.Attributes.Add("type", "text/css");bool cssAdded = false;foreach(Control control inthis.Page.Header.Controls)
{
 if (control.Equals(cssLink))
 {
 cssAdded = true;
 break;
 }
 }if(!cssAdded)
 this.Page.Header.Controls.Add(cssLink);

LoanHtmlLink 只是从 HtmlLink 继承并重写 Equals 方法的类。

客户端

Ajax非常常见,客户端的( 还有挑战性) 更有趣。 客户端首先包含一个与按钮的onClick 事件对应的处理程序。 ASP.NET 提供了一种方便的方法,用于为回调调用输出适当的JavaScript:

Page.ClientScript.GetCallbackEventReference(this, null, 
"LoanCalculation.UpdateUI", String.Format("'{0}'", 
 this.UniqueID),"LoanCalculation.CallbackError", true)

对于方法参数,我们列出了一个JavaScript函数来处理回调结果,上下文--是一个控件 Id,它是所有用户界面元素 Id,以及用来处理UI错误的JavaScript函数,用于处理UI中的服务器错误。

我已经了解到,从客户端获得正确的回调是不够的。 我只是无法得到表单数据与回调一起传送。 也就是说,来自输入控件的数据存在,但它是空的。 浏览 ASP.NET Ajax基础设施支持 JavaScript,我了解到我们还需要调用函数 WebForm_InitCallback,它使用所有必要的输入数据填充 __theFormPostData 变量。

因此,所有必要的回调初始化都被引入 inside 一个函数,LoanCalculation.InitRequest:

InitRequest: function(context)
{
 __theFormPostData = '';
 WebForm_InitCallback();
 var divContents = document.getElementById(context+'_results');
 var oldtable = document.getElementById(context+'_results_table');
 if(oldtable!=null)
 divContents.removeChild(oldtable);
 divContents.innerHTML = "Requesting data...";
}

客户端的主要功能是 LoanCalculation.UpdateUI:

UpdateUI: function(strData, context)
{
 var divContents = document.getElementById(context+'_results');
 var tbl = document.createElement('table');
 tbl.className = 'LoanCalculationTable';
 tbl.id = context+'_results_table';
 var arData = eval(strData);
 var cell;
 var row;
 var normalCellCount = 0;
 for(var i=0;i<arData.length;i++)
 { 
 row = tbl.insertRow(i);
 if(i==0)
 normalCellCount = arData[i].length;
 for(var m=0;m<arData[i].length;m++)
 {
 cell = row.insertCell(m);
 if(i==0)
 cell.className = 'LoanCalculationTDFirst';
 else cell.className = 'LoanCalculationTD'; 
 var textNode = document.createTextNode(arData[i][m]);
 cell.appendChild(textNode);
 }
 if(m<normalCellCount)
 {
 cell.colSpan = (normalCellCount-m+1);
 cell.className = 'LoanCalculationTDFirst';
 }
 }
 divContents.innerHTML = "";
 divContents.appendChild(tbl);
}

这个函数计算接收字符串,该字符串构建了 JavaScript。 解析 array,并使用数据动态生成调度表。

另一个有趣的事情是,使用 ASP.NET Ajax,实际上不需要捕捉服务器端的所有异常。 异常可以在UI中处理。 如果输入数据超出允许的边界,这里控件甚至会显式引发异常。 以下是向用户显示服务器错误的JavaScript函数:

CallbackError: function(error,context)
{
 var divContents = document.getElementById(context+'_results');
 if(divContents!=null)
 divContents.innerHTML = ""+error+"";
}

Points of Interest

生成的控件没有显示正确的结果--实际公式可能会更加复杂,但是它提供了一个 Ajax Ajax概念is以及它对的作用的例子。

历史记录

  • 16 2007年08月 --原始版本已经发布

控制  asp  asp-net  CAL  支付