C# checkbox event in asp.net mvc view не внутри формы

Question

Итак, у меня есть проект, чтобы сделать интернет-магазин между пользователями (отправить товар, купить и т. Д.), Используя базу данных, и я застрял в представлении корзины покупок : пока мне удалось показать все выбранные (чтобы купить) продукты в корзине с отмеченным флажком рядом с каждым из них - снятие флажка означает, что пользователь не хочет покупать этот продукт, и он удалит его из тележку и обратно на главную страницу (где все продукты, ожидающие продажи).

Модель продукта:

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()); 
     }   
    } 
} 

Краткая история коротких сообщений - как сделать флажок событий не внутри формы, которая изменит параметры в базе данных?

Answer 1

Единственное, что вам нужно держать в атрибуте данных в CheckBox является идентификатор продукта (или уникальный идентификатор для конкретного продукта + размер + цветовое сочетание)

<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")"; 
    }); 
    }); 

}); 

Если у вас есть метод действия под названием RemoveItem в CartController и принимает productId и удалить Prouduct из корзины.

[HttpPost] 
public ActionResult RemoveItem(int productId) 
{ 
    // to do :Remove from cart 
    return Json(new { status="success"}); 
}