交互邏輯
- 用戶在文本框直接輸入數字,或點擊「+」「-」按鈕增減。
- 點擊「購買」按鈕時,後端讀取文本框值作為添加數量。
前端實現(WebForms 示例)
<asp:TextBox ID="txtQty" runat="server" Text="0" Width="50px" />
<asp:Button ID="btnPlus" runat="server" Text="+" OnClick="btnPlus_Click" />
<asp:Button ID="btnMinus" runat="server" Text="-" OnClick="btnMinus_Click" />
<asp:Button ID="btnBuy" runat="server" Text="購買" OnClick="btnBuy_Click" />
後端代碼
protected void btnPlus_Click(object sender, EventArgs e) {
int qty = int.Parse(txtQty.Text);
txtQty.Text = (qty + 1).ToString();
}
protected void btnMinus_Click(object sender, EventArgs e) {
int qty = int.Parse(txtQty.Text);
if (qty > 0) txtQty.Text = (qty - 1).ToString();
}
protected void btnBuy_Click(object sender, EventArgs e) {
int buyQty = int.Parse(txtQty.Text); // 獲取最終數量
if (buyQty > 0) {
AddToCart(ProductId, buyQty);
}
}
進階優化(AJAX 無刷新)
- 按鈕改為
<button type="button">,綁定 $.post 更新數量。
- 購物車區域用
UpdatePanel 或前端模板引擎局部渲染。
- 數量變更即時同步至 Session/Redis,避免並發超賣。