locked
ASP.NET MVC - Make a button click handle a controller method and prevent it from going to other view RRS feed

  • Question

  • User1661931750 posted

    I am trying to make a button that whenever it's clicked, it will handle a controller method. I don't want the button to redirect to a new page and not refresh the page. I don't want to use Ajax, because that is not working in this project.

    What I've tried/done so far:

    The method in the controller I want to be handled:

    public async Task<ActionResult> AddToWishList(int itm_id, int recordId)
    {
    string userId = User.FindFirstValue(ClaimTypes.NameIdentifier);
    var wishMain = _context.WishMains.Where(w => w.user_ad == userId).FirstOrDefault();

    if (wishMain != null)
    {
    recordId = wishMain.id;
    }
    else
    {
    WishMains wish = new WishMains();
    wish.user_ad = userId;
    wish.dt_created = DateTime.Now;
    _context.Add(wish);
    await _context.SaveChangesAsync();

    recordId = wish.id;
    }

    var check = (from m in _context.WishLines
    where m.itm_id == itm_id && m.Wishmain_id == recordId
    select m).FirstOrDefault();

    if (check == null)
    {
    WishLines wishline = new WishLines();
    wishline.itm_id = itm_id;
    wishline.Wishmain_id = recordId;
    wishline.dt_created = DateTime.Now;

    _context.Add(wishline);
    await _context.SaveChangesAsync();
    }

    return RedirectToAction(nameof(Index));
    }


    What I currently have:

    @Html.ActionLink("", "AddToWishList", "WishList", routeValues: new
    {
    itm_id = item.id
    },
    htmlAttributes: new { @class = "heart" })

    After clicking this ActionLink the product gets added to the wishlist and goes to the page: https://localhost:5001/WishList , and that's not what I want. I want the following:

    A button that only adds the product on the wishlist, but stays on the current view, with the follow JQuery that changes the button whenever the product has been added to the wishlist:

    <script src="~/lib/jquery/dist/jquery.min.js">
    </script>
    <script>
    jQuery(function ($) {
    $('#swapHeart').on('click', function () {
    var $el = $(this),
    textNode = this.lastChild;
    $el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
    $el.toggleClass('swap');
    });
    });
    </script>

    I hope someone can help me figure out how to do this, because I can't figure it out on my own. Thanks a lot in advance!

    Sunday, November 18, 2018 3:30 PM

All replies

  • User1724605321 posted

    Hi floorvrmt ,

    After clicking this ActionLink the product gets added to the wishlist and goes to the page: https://localhost:5001/WishList , and that's not what I want. I want the following:

    According to your code : return RedirectToAction(nameof(Index)); it will redirect to index action , refresh the WishList  , what is the reason you still need to use jquery to add the product ?

    Best Regards,

    Nan Yu

    Monday, November 19, 2018 8:44 AM