asp.net mvc视图中的C#复选框事件不在表单内

Posted 2023-02-26

【中文标题】asp.net mvc视图中的C#复选框事件不在表单内

【英文标题】：C# checkbox event in asp.net mvc view not inside form

【发布时间】：2015-12-11 13:22:01

【问题描述】：

所以我有一个项目要使用数据库在用户之间建立一个在线商店（发布产品、购买等），但我被困在购物车视图中：到目前为止，我设法显示所有选择的（购买) 购物车中的产品，每个产品旁边都有一个选中的复选框 - 取消选中该复选框意味着用户不想购买该产品，这会将其从购物车中删除并返回首页（所有产品等待出售的是）。

产品型号：

public class Product

    public int ProductID  get; set; 

    public int OwnerID  get; set;  //the guy who posted the product

    public int? UserID  get; set;  //if someone added the product to his cart, and if the checkbox is unchecked it will be null again and removed from cart

    [Required]
    [Display(Name = "Title")]
    public string Title  get; set;  //name of product

    [Display(Name = "Short Description")]
    public string ShortDescription  get; set; 

    [DataType(DataType.MultilineText)]
    [Display(Name = "Long Description")]
    public string LongDescription  get; set; 

    public DateTime UploadDate  get; set; 

    [DataType(DataType.Currency)]
    [Required]
    [Display(Name = "Price")]
    public decimal Price  get; set; 

    public int State  get; set;  //if the item was bought

购物车视图：

@model IEnumerable<MyFirstProject.Models.Product>

@
    ViewBag.Title = "ShoppingCart";
    Layout = "~/Views/Shared/_Layout.cshtml";


<h2>Your Shopping Cart</h2>

@if (Model == null)

    <div style="float:left">Your cart is empty.</div>
    <div>
        Total payment: 0
    </div>

else

    decimal tPrice = 0;
    <table style="float:left">
        @foreach (var product in Model)
        
            tPrice = tPrice + product.Price;                
            @Html.Partial("ProductLine", product)            
        
    </table>
    <div>
        Total payment: @tPrice
    </div>

购物车中线路的部分视图：

@model MyFirstProject.Models.Product

<tr>
    <td>        
        <input checked="checked" data-val="true" data-val-number="@Model.UserID" @*failed attempt to understand it*@
               id="UserID" name="UserID" type="checkbox" value="true"> @Model.Title        
    </td>        
    <td>           
         @Model.Price.ToString()
    </td>    
</tr>

我的控制器（相关代码）：

using MyFirstProject.Models;
using MyFirstProject.ViewModels;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyFirstProject.Controllers

    public class ShoppingController : Controller
    
        private ShopContext db = new ShopContext();

        // GET: User
        public ActionResult Index(Product product=null)
        
            List<Product> tempList = new List<Product>();
            if (product != null)
            
                foreach (var p in db.Products.ToList())
                
                    if (p.ProductID == product.ProductID)
                    
                        p.UserID = 0;
                        db.SaveChanges();
                        break;
                    
                
            
            foreach(var p in db.Products.ToList())
            
                if (p.UserID == null || p.State == 1)
                
                    tempList.Add(p);
                
            
            return View(tempList.ToList());
        


        public ActionResult ShoppingCart()
        
            List<Product> toCart = new List<Product>();
            foreach (var product in db.Products.ToList())
            
                if (product.UserID == 0)
                
                    toCart.Add(product);
                
            
            return View(toCart.ToList());
                
    

长话短说 - 如何使复选框事件不在将更改数据库中的参数的表单内？

【问题讨论】：

你的问题是什么？

【参考方案1】：

您需要在复选框的数据属性中保留的唯一内容是产品 ID（或特定产品的唯一 ID + 尺寸 +颜色组合）

<td>        
   <input checked="checked" class="cartItem" data-productId="@Model.ProductID "
                                  type="checkbox" value="true" > 
   @Model.Title        
</td>  

现在在 javascript 中，我们将侦听复选框的 change 事件，并向服务器发出 ajax 调用以将其删除。我们将使用 jQuery 来执行此操作。

$(function()
  $(".cartItem).change(function(e)
     var _this=$(this);
     var productId=_this.data("productId");
     $.post("@Url.Action("RemoveItem","Cart")?productId="+productId,function(re)

         //redirect now
         window.location.href="@Url.Action("Index","Cart")";
     );
  );

);

假设您在 CartController 中有一个名为 RemoveItem 的操作方法，它接受 productId 并从购物车中删除产品。

[HttpPost]
public ActionResult RemoveItem(int productId)

  // to do :Remove from cart
  return Json(new  status="success");