Bài này mình sẽ hướng dẫn các bạn Lập trình với Form nhập liệu kiểu hóa đơn bán hàng. Với việc ứng dụng hàm đọc số thành chữ bằng javascript.
Khi nhập mỗi số ở cột Số lượng cột thành tiền và tổng số sẽ được cập nhật luôn.
Để thực hiện được bạn cần các
hàm đọc số thành chữ Và các hàm
FormatNumber Giả sử dữ liệu của bạn có các trường MaSP, TenSP, DonGa và bạn cần lập Form nhập liệu
Bạn cần thực hiện như sau:
1. Trang aspx: Bạn cần convert các trường sang dạng ItemTemplate và trong javascrip bạn cần viết hàm để tính toán số liệu như sau:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>hmweb.com.vn</title>
<%--Create by hungbv@hmweb.com.vn--%>
<script language="javascript" src="JScript.js"></script>
<script language="javascript">
function TinhTong(mObject)
{
var object_ = mObject.id;
// Khai báo và gán giá trị các cột dữ liệu
var m2= object_.replace('txtSoLuong','txtThanhTien');
var m3 = object_.replace('txtSoLuong','txtDonGia');
var mNhap = object_.replace('txtSoLuong','txtNhap');
var lblTT = object_.replace('txtSoLuong','lblThanhTien');
var m4 = document.getElementById(m2);
var m5 = document.getElementById(m3.replace(/\$|\,/g,''));
var SoLuong;
if(mObject.value.length>0)
{
SoLuong = mObject.value.replace(/\$|\,/g,'');
}
var DonGia =m5.value.replace(/\$|\,/g,'');
// Tính ThanhTien =DonGia*SoLuong
var ThanhTien= parseFloat(SoLuong)* parseFloat(DonGia);
document.getElementById(lblTT).innerHTML=ThanhTien;
if(isNaN(m3))
{
document.getElementById(m2).value =formatCurrency(ThanhTien);
}
// Tính tổng số tiền
var test="";
var tongtien =0;
var z="";
for(x=2;x<20;x++)
{
if(x<10)
{
test ="grvSanPham_ctl0"+x+"_lblThanhTien";
if(document.getElementById(test) !=null)
{
z = document.getElementById(test).innerHTML.toString().replace(/\$|\,/g,'');
if(isNaN(z) || z ==''){z = '0';}
tongtien =tongtien+ parseFloat(z);
}
}
else
{
test ="grvSanPham_ctl"+x+"_lblThanhTien";
if(document.getElementById(test) !=null)
{
z = document.getElementById(test).innerHTML.toString().replace(/\$|\,/g,'');
if(isNaN(z) || z ==''){z = '0';}
z = '0';
tongtien =tongtien+ parseFloat(z);
}
}
}
document.getElementById('lblTong').innerHTML =formatCurrency(tongtien);
document.getElementById('lblDocSo').innerHTML = DocTienBangChu(tongtien);
}
</script>
</head>
<body onload= "document.getElementById('grvSanPham_ctl02_txtSoLuong').focus();">
<form id="form1" runat="server">
<div>
<asp:GridView ID="grvSanPham" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" Width="600px" OnRowDataBound="grvSanPham_RowDataBound">
<RowStyle BackColor="White" ForeColor="#330099" />
<Columns>
<asp:TemplateField HeaderText="Tên sản phẩm" SortExpression="TenSanPham">
<ItemTemplate>
<asp:Label ID="lblTenSanPham" runat="server" Text='<%# Bind("TenSanPham") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Số lượng">
<ItemTemplate>
<asp:TextBox ID="txtSoLuong" onkeyup="FormatNumber(this);" TabIndex='<%# j=j+1 %>' onblur="TinhTong(this);" runat="server" Width="100px" style="text-align: right" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Đơn giá">
<ItemTemplate>
<asp:TextBox ID="txtDonGia" ReadOnly="true" runat="server" Text='<%# Bind("DonGia") %>' style="text-align: right" BorderWidth="0px" />
</ItemTemplate>
<ItemStyle HorizontalAlign="Right" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Thành tiền">
<ItemTemplate>
<asp:TextBox ID="txtThanhTien" runat="server" style="text-align: right" BorderWidth="0px" />
<asp:Label ID="lblThanhTien" runat="server" style="display: none"></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Right" />
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
</asp:GridView>
<br />
<asp:Label ID="Label1" runat="server" Text="Tổng thành tiền:" Font-Bold="True"></asp:Label>
<asp:Label ID="lblTong" runat="server" Font-Bold="True"></asp:Label>
<br />
<asp:Label ID="Label2" runat="server" Text="Bằng chữ:" Font-Bold="True"></asp:Label>
<asp:Label ID="lblDocSo" runat="server" Font-Bold="True" Font-Italic="True"></asp:Label><br />
<asp:Button ID="Button1" runat="server" Text="Lưu số liệu" /></div>
</form>
</body>
</html>
2. Trong code bạn cần connect và bind dữ liệu vào grid như sau (Ở đây mình minh họa bằng dữ liệu trong Asscess)
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.OleDb;
public partial class _Default : System.Web.UI.Page
{
public int j = 0;
//Create by hungbv@hmweb.com.vn ĐT: 0986470067
protected void Page_Load(object sender, EventArgs e)
{
ConnectToAccess();
}
public void ConnectToAccess()
{
OleDbConnection conn = new OleDbConnection();
OleDbDataReader reader = null;
conn.ConnectionString = @"Provider=Microsoft.Jet.OLEDB.4.0;" +
@"Data source= " + Server.MapPath("SP.mdb");
try
{
conn.Open();
OleDbCommand cmd =
new OleDbCommand("Select * FROM TB_SanPham", conn);
reader = cmd.ExecuteReader();
grvSanPham.DataSource = reader;
grvSanPham.DataBind();
}
catch (Exception ex)
{
Response.Write("Lỗi kết nối");
}
finally
{
conn.Close();
}
}
protected void grvSanPham_RowDataBound(object sender, GridViewRowEventArgs e)
{
try
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
((TextBox)e.Row.FindControl("txtDonGia")).Text = int.Parse("0" + ((TextBox)e.Row.FindControl("txtDonGia")).Text).ToString("#,###");
}
}
catch { }
}
}
Chú ý bạn cần grvSanPham_RowDataBound để format number trong cột đơn giá
Sau khi có dữ liệu của Form nhập bạn thực hiện lưu dữ liệu theo luồng dữ liệu đã phân tích của bạn.
Bạn có thể down mã nguồn về tham khảo