如何使用Ajax提交选定的值?

时间:2018-12-04 13:02:46

标签: c# asp.net ajax asp.net-mvc

嗨,我有一个在线商店的asp.net mvc应用程序。

我的数据库包含2个表:类别和产品

类别表:

.CategoriesID

.CategoriesName

产品表:

。产品ID

.ProducName

.ProductPrice

.ProductPicture

.Category_ID

.CategoryNname

MyViewModel类包含2个表的列表和一个变量。

  public class MyViewModel
    {
      public List<Category> CategoriesV { get; set; }
      public List<Product> ProductsV { get; set; }
      public int SumVM { get; set; }

    }
 }

我的索引视图具有所有类别的部分视图,以及每个类别的乘积。

_类别局部视图

@model OnlineShopping.MyViewModel


@using (Ajax.BeginForm("GetCatItems", "Home", new AjaxOptions()))
{
    foreach (Category item in Model.CategoriesV)
    {
        <div id="CategoryId">
        <input type="submit" class="btn btn-secondary" 
        value="@item.CategoriesName" name="CategName"  />
        </div>
      }
    }

_Categories控制器

  public ActionResult _Categories()
     {
        var viewModel = new MyViewModel
        {
            ProductsV = DB.Products.ToList()
        };

        return View(viewModel);
    }

GetCatItems获取每个类别的产品。

_GetCatItems PartialView

  @model OnlineShopping.MyViewModel 
   @foreach (Product item in Model.ProductsV)
    {

        if (item.Category_Name ==Session["id"].ToString())
        {
            <tr>
                <td scope="row"><img src="@Url.Content(@item.ProductImage)" width="150" height="200" /></td>
                <td>
                    @item.ProductName
                    <br />Price : @item.ProductPrice $<br /> @item.ProductDetails
                </td>

                <input  type="submit" value="@item.ProductPrice"  name="ProductPrice" onclick="location.href='@Url.Action("AddtoCart", 
   "Home")'">Add to cart </input>

            </tr>
    }}

_GetCatItems控制器

     public ActionResult GetCatItems(string CategName)
     {

        Session["id"] = CategName;
        var viewM = new MyViewModel()
        {
            ProductsV = DB.Products.ToList()
        };           
        return View(viewM);
     }

最后我有一个DIV,我想在其中添加所选商品的总价

<div id="element"
<div class="alert alert-primary" role="alert">
Added to Cart<br />
Total : @Model.SumVM.ToString()  <text>$</text>
</div>
 </div>

AddtoCart控制器从GetCatItems中的输入标签获取值

AddtoCart控制器

   public ActionResult AddtoCart(int ProductPrice)

        {

            var viewModel = new MyViewModel
            {
                SumVM = ProductName 
            };

            return View(viewModel);
         }

我试图将输入元素包装在AjaxBegin表单内

 @using (Ajax.BeginForm("AddtoCart", "Home", new AjaxOptions() { UpdateTargetId = "element", InsertionMode = InsertionMode.Replace }))
  {

  <input  type="submit" value="100" class="btn-outline- 
 primary" name="Value" onclick="location.href='@Url.Action("AddtoCart", 
   "Home")'">Add to cart </input>
  }

但是它没有用,但是当尝试做的时候是用

更改AjaxBegin Form。
  Html.beginform("AddtoCart", "Home",FormMethod.Post)

它起作用了,但是它在新页面中显示了添加到购物车div的内容(我希望它在同一页面中)。

很抱歉,很长的帖子,在此先感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

    public ActionResult AddtoCart(int Value)

    {

        Session["items"]= Convert.ToInt32(Session["items"]) + 1;
        Session["sum"] = Convert.ToInt32(Session["sum"]) + Value;

        var viewModel = new MyViewModel
        {
            itemsNumbers= Convert.ToInt32(Session["items"]),
            SumVM = Convert.ToInt32(Session["sum"])
        };

        return View(viewModel);
    }

GetCatItems局部视图:

  @model OnlineShopping.MyViewModel

      @using (Ajax.BeginForm("AddtoCart", "Home", new AjaxOptions() { UpdateTargetId 
     = "element", InsertionMode = InsertionMode.Replace }))
     {
<table class="table table-bordered">
    <thead>
        <tr>
            <th>Product Image</th>
            <th>Products Details</th>
            <th>Add To Cart</th>
        </tr>
    </thead>
    <tbody>

        @foreach (Product item in Model.ProductsV)
        {

            if (item.Category_Name == Session["id"].ToString())
            {
                <tr>
                    <td scope="row"><img src="@Url.Content(@item.ProductImage)" 
       width="150" height="200" /></td>
                    <td>
                        @item.ProductName
                        <br />Price : @item.ProductPrice $<br /> @item.ProductDetails
                    </td>
                    <td>
                        <input type="submit" value="@item.ProductPrice" name="Value" />
                    </td>
                </tr>
            }
        }
    </tbody>
</table>
 }