locked
Return to current page without returning model data RRS feed

  • Question

  • User1750806012 posted

    I have created a shoppingcard dropdown menu and I would like to create a delete button

    I have tried doing:

      @foreach (var product in ProductInShoppingcard)
                    {
                       <tr>
                          <td>
                              @product.ProductTitle
                          </td>
                           <td>
                               @product.Amount
                           </td>
                           <td style="width:20%;">
                               @{var price = product.ProductPrice * product.Amount; }
                             $@price
                           </td>
                         <td>
                               <form asp-controller="Home" asp-action="Removeproduct" asp-route-ProductId="@product.Id" method="post">
                                   <button type="submit" name="DeleteProduct">Delete</button>
                               </form>
                           </td>
                       </tr>
                    }

    it is about this part:

    form asp-controller="Home" asp-action="Removeproduct" asp-route-ProductId="@product.Id" method="post">
                                   <button type="submit" name="DeleteProduct">Delete</button>
                               </form>

    and in controller:

    		public async Task<IActionResult> Removeproduct(Guid? ProductId)
    		{
    			if (ProductId == null)
    			{
    				return NotFound();
    			}
    			var removedproduct = await _context.shoppingCard.FirstOrDefaultAsync(x => x.Id == ProductId);
    			_context.shoppingCard.Remove(removedproduct);
    			await _context.SaveChangesAsync();
    			return View();
    		}

    after the button is pressed it should remove the product in the shoppingcard without redirection to any page
    if i use return View() it will ask for all the necessary data for the page to work wich would be impossible to figure out
    because the delete button in the shoppincard dropdown(in the header) is on every single page

    What would be the best possible way to deal with this?

    Thursday, April 22, 2021 3:57 PM

Answers

  • User-474980206 posted

    please learn how the web works. the browser requests and displays responses. that is, a link or form post is just a request, and the browsers display the response. there is nothing to "return" to. the browser is expecting a new html page (the fact that its the same page to the server is immaterial).

    your delete logic must rebuild the page from scratch. the best approach is GET/POST/REDIRECT. a post should redirect to a display page. if you do not have a standard display cart page, then the view to display can be part of the delete action.

    it sounds like you did not design your user action flows very well. 

    note: if you do not want to reload the page, then you must use javascript and ajax to do the delete. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 22, 2021 5:27 PM

All replies

  • User-474980206 posted

    please learn how the web works. the browser requests and displays responses. that is, a link or form post is just a request, and the browsers display the response. there is nothing to "return" to. the browser is expecting a new html page (the fact that its the same page to the server is immaterial).

    your delete logic must rebuild the page from scratch. the best approach is GET/POST/REDIRECT. a post should redirect to a display page. if you do not have a standard display cart page, then the view to display can be part of the delete action.

    it sounds like you did not design your user action flows very well. 

    note: if you do not want to reload the page, then you must use javascript and ajax to do the delete. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, April 22, 2021 5:27 PM
  • User1750806012 posted

    If I understand you correctly adjusting/deleting data from a database is unpossible without reloading and referring to a particular url in ASP NET CORE

    I do have a shoppingcard page but I dont want it redirect to a other page I want the user to remain on the same page
    whatever that page might be. So I guess the only option is to use javascript and ajax to deal with this situation.
    Do you maybe know a usefull link that can help me learning about this?

    Thursday, April 22, 2021 6:03 PM
  • User1686398519 posted

    Hi osyris, 

    According to your needs, I wrote an example, you can refer to it.

    • You can bind the click event to the Delete button, and then use ajax to request the action.

    Controller

            public DailyCoreMVCDemoContext db;
            public AutocompleteController(DailyCoreMVCDemoContext _db)
            {
                db = _db;
            }
            public IActionResult Index()
            {
                return View(db.shoppingCard.ToList());
            }
            public async Task<IActionResult> deletedata(Guid? id)
            {
                var flag = false;
                if (id != null)
                {
                    var removedproduct = await db.shoppingCard.FirstOrDefaultAsync(x => x.Id==id);
                    db.shoppingCard.Remove(removedproduct);
                    await db.SaveChangesAsync();
                    flag = true;
                }
                return Json(flag);
            }

    View

    @model IEnumerable<DailyCoreMVCDemo.Models.ProductTest>
    <table id="testtable" class="table">
        <tr>
            <td>
                ProductTitle
            </td>
            <td>
                Action
            </td>
        </tr>
        @for(int i=0;i<Model.ToList().Count;i++)
        {
            <tr>
                <td>
                    @Model.ToList()[i].ProductTitle
                </td>
                <td>
                    <input asp-for="@Model.ToList()[i].Id" hidden/>
                    <button class="DeleteProduct">Delete</button>
                </td>
            </tr>
        }
    </table>
    @section scripts{ 
        <script>
            $("table#testtable").on("click", "button.DeleteProduct", function () {
                var productid = $(this).closest("td").find("input[name*='Id']").val();
                console.log(productid)
                $.ajax({
                    url: "@Url.Action("deletedata")",
                    type: "GET",
                    data: { id: productid},
                    success: function (data) {
                        if (data) {
                            location.reload();
                        }
                    }
                });
            });
        </script>
    }

    Here is the result. 

    Best Regards,

    YihuiSun

    Friday, April 23, 2021 8:23 AM
  • User-474980206 posted

    Not a particularly good use of Ajax. It does not save any network requests, or server processing. If the delete was still a link, the delete action could just redirect to index. While reload, request the same page, the page name could passed to the delete action.

    Friday, April 23, 2021 2:27 PM
  • User1750806012 posted

    I will start to learn more about Ajax so im able to achive this. thanks for the advise and thanks for the example

    Friday, April 23, 2021 8:25 PM