can not update the actual quantity value in asp.net core 2.2

Question

I am trying to update the quantity in the index method. but the index view's input submit button cannot work for that data can not bind. still, quantity no update and I show the value of quantity which I already used. but I want to update this.

Here Is My Code

namespace Amazon.Areas.Admin.Controllers
{
    [Area("Admin")]
    public class ShopController : Controller
    {
        private ApplicationDbContext _db;
        private IHostingEnvironment _he;

        public ShopController(ApplicationDbContext db, IHostingEnvironment he) //input parameter
        {
            _db = db;
            _he = he;
        }


       
        public IActionResult Index()
        {
            return View(_db.Shop.Include(c => c.Category).Include(f => f.SubCategory).ToList());
        }

        [HttpPost]
        public async Task<IActionResult> Index(Shop shop)
        {
            _db.Shop.Update(shop);
            await _db.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }

    @using Amazon.Models
    @model IEnumerable<Shop>
    @{
        ViewData["Title"] = "Index";
    }
    
    <br /><br />
    <div class="row">
        <div class="col-6">
            <h2 class="text-info">Product List</h2>
        </div>
    
        <div class="col-6 text-right">
            <a asp-action="Create" class="btn btn-info">&nbsp;Add New Product </a>
        </div>
    
    </div>
    <form asp-action="Create" method="post" enctype="multipart/form-data">
        <div>
            <table class="table table-striped border" id="myTable">
                <thead>
                    <tr class="table-info">
                        <th>
                            @Html.DisplayNameFor(c => c.Name)
                        </th>
                        <th>
                            @Html.DisplayNameFor(c => c.Price)
                        </th>
                        <th>
                            @Html.DisplayNameFor(c => c.PreviousPrice)
                        </th>
                        <th>
                            @Html.DisplayNameFor(c => c.Quantity)
                        </th>
                        <th>
                            @Html.DisplayNameFor(c => c.Description)
                        </th>
                        <th>
                            @Html.DisplayNameFor(c => c.Size)
                        </th>
                        <th>
                            @Html.DisplayNameFor(c => c.CategoryTypeId)
                        </th>
                        <th>
                            @Html.DisplayNameFor(c => c.SubCategoryTypeId)
                        </th>
    
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr class="text-info">
    
                            <td>  @item.Name </td>
                            <td>  @item.Price </td>
                            <td>  @item.PreviousPrice </td>
                            @*<td>@item.Quantity</td>*@
    
                            <td>
                                <div class="input-group">
                                    <input type="submit" value="-" class="button-minus" data-field="quantity">
                                    <input type="submit" step="1" max="" value="@item.Quantity"  name="quantity" asp-for="@item.Quantity" class="quantity-field">
                                    <input type="submit" value="+" class="button-plus" data-field="quantity">
                                </div>
                            </td>
                            <td>  @item.Description </td>
                            <td>  @item.Size </td>
                            <td>  @item.Category.CategoryName </td>
                            <td>  @item.SubCategory.SubCategoryName </td>
                            <td>
                                <partial name="_DeletePartial" model="@item.Id" />
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </form>
    <br /> <br />
    
    @section scripts{
        <script type="text/javascript">
            $(document).ready(function () {
                $('#myTable').DataTable();
            });
        </script>
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script>
            function incrementValue(e) {
                e.preventDefault();
                var fieldName = $(e.target).data('field');
                var parent = $(e.target).closest('div');
                var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
    
                if (!isNaN(currentVal)) {
                    parent.find('input[name=' + fieldName + ']').val(currentVal + 1);
                } else {
                    parent.find('input[name=' + fieldName + ']').val(0);
                }
            }
    
            function decrementValue(e) {
                e.preventDefault();
                var fieldName = $(e.target).data('field');
                var parent = $(e.target).closest('div');
                var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
    
                if (!isNaN(currentVal) && currentVal > 0) {
                    parent.find('input[name=' + fieldName + ']').val(currentVal - 1);
                } else {
                    parent.find('input[name=' + fieldName + ']').val(0);
                }
            }
    
            $('.input-group').on('click', '.button-plus', function (e) {
                incrementValue(e);
            });
    
            $('.input-group').on('click', '.button-minus', function (e) {
                decrementValue(e);
            });
        </script>
    }

my output is

when I update quantity these using spinner then it does not update the actual value of the quantity. I am beginner, please help anyone.

Answer 1

If you want to save the value changed by your click on the button to the database, I think you can do so.

View.cshtml:

<div class="input-group">
                        <input type="submit" value="-" class="button-minus" data-field="quantity">
                        <input type="submit" step="1" max="" value="@item.Quantity" name="quantity" asp-for="@item.Quantity"class="quantity-field">
                        <input type="submit" value="+" class="button-plus" data-field="quantity">
                        <input type="hidden" name="Id" value="@item.Id" data-field="quantity"/>
                    </div>

js in view:

 $('.input-group').on('click', '.button-plus', function (e) {
            incrementValue(e);
            var fieldName = $(e.target).data('field');
            var parent = $(e.target).closest('div');
            var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
            var id = parseInt(parent.find('input[name=Id ]').val());
            $.ajax({ url: 'blogs/test', type: 'get', data: { "value": currentVal ,"id":id}, dataType: 'json', success: function (data) { console.log(data) } })
        });

        $('.input-group').on('click', '.button-minus', function (e) {
            decrementValue(e);
            var fieldName = $(e.target).data('field');
            var parent = $(e.target).closest('div');
            var currentVal = parseInt(parent.find('input[name=' + fieldName + ']').val(), 10);
            var id = parseInt(parent.find('input[name=Id ]').val());
            $.ajax({ url: 'blogs/test', type: 'get', data: { "value": currentVal, "id": id}, dataType: 'json', success: function (data) { console.log(data) } })
        });

controller:

public IActionResult  Test(int id,int value)
        {
            var blog=_context.Blogs.Find(id);
            blog.Quantity = value;
            _context.SaveChanges();
            return Json("ok");
        }
        public async Task<IActionResult> Index()
        {
           return View(await _context.Blogs.ToListAsync());
        }

result: