<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$('#<%= txtNoOfInstallment.ClientID%>').live("keyup", function (event) {
if (event.keyCode == 13) {
event.preventDefault();
} else {
var noOfInstallments = $('#<%= txtNoOfInstallment.ClientID%>').val();
var req = $.ajax({
type: "POST",
url: "CS.aspx/txtNoOfInstallment_OnTextChanged",
data: "{noOfInstallments: '" + noOfInstallments + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$('#divInstallmentDetails').html(data.d)
},
error: function (response) { debugger; alert("Error"); },
failure: function (response) {
alert(response.d);
}
})
}
});
</script>
</head>
<body>
<form id="form1" runat = "server">
<asp:TextBox ID="txtNoOfInstallment" runat="server"></asp:TextBox>
<div id = "divInstallmentDetails"></div>
</form>
</body>
</html>
Code:
[WebMethod]
public static string txtNoOfInstallment_OnTextChanged(int noOfInstallments)
{
Table tab = new Table();
for (int i = 1; i <= noOfInstallments; i++)
{
TableRow tr = new TableRow();
TableCell td1 = new TableCell();
TableCell td2 = new TableCell();
TableCell td3 = new TableCell();
TableCell td4 = new TableCell();
Label lblAmt = new Label();
lblAmt.Text = "Installment" + " " + i;
TextBox txtAmount = new TextBox();
txtAmount.ID = "txtAmount" + i;
Label lblDate = new Label();
lblDate.Text = "Due date";
td1.Controls.Add(lblAmt);
td2.Controls.Add(txtAmount);
td3.Controls.Add(lblDate);
tr.Cells.Add(td1);
tr.Cells.Add(td2);
tr.Cells.Add(td3);
tr.Cells.Add(td4);
tab.Rows.Add(tr);
}
System.Text.StringBuilder sb = new System.Text.StringBuilder();
System.IO.StringWriter tw = new System.IO.StringWriter(sb);
HtmlTextWriter hw = new HtmlTextWriter(tw);
tab.RenderControl(hw);
return sb.ToString();
}