ASP.NET MVC - How to call controller method and don't leave the view

Question

I have looked around for a similar question, but all the answers don't work for my problem. I am creating a wishlist, and I want the link to only return some sort of confirmation, and not go to another view.

View:

...
    <div class="wishlist">
       @Html.ActionLink(" ", "AddToWishList", "Wishlist", routeValues: new
            {
               itm_id = item.id
            },
            htmlAttributes: new {@class = "heart" })
    </div>
...

Controller

 public async Task<ActionResult> AddToWishList(int itm_id, int recordId)
        {
            ...
            return RedirectToAction(nameof(Index));
        }

@Stijn I looked at that question, but that doesn't resolve my problem. When I implement the question, it returns me to an empty page. — Floor, Nov 14 '18 at 15:07
Are you sure you've correctly implemented it? I haven't verified the code from that answer but it looks correct at first sight. — user247702, Nov 14 '18 at 15:08
Yea this part should stop page refresh from happening $("#myLink").click(function(e){ e.preventDefault(); You would have to add an id to your actionLink and replace the myLink — Ryan Schlueter, Nov 14 '18 at 15:10
OK, then please edit your question to include a [mcve] with your attempt and we can get your question reopened. — user247702, Nov 15 '18 at 16:12

score 2 · Accepted Answer · answered Nov 14 '18 at 15:38

2

You want to use Ajax.ActionLink instead of Html.ActionLink. The article below should specify some of the details of the usage. Make sure you remember to include the jquery libraries or it will not generate the link type you are expecting.

https://www.c-sharpcorner.com/UploadFile/abhikumarvatsa/ajax-actionlink-and-html-actionlink-in-mvc/

Personally, I would not use the Microsoft method and write a jQuery Ajax postback myself in JavaScript.

answered Nov 14 '18 at 15:38

Brandon Barkley

720
6
21

This doesn't work for me unfortunately, it doesn't recognize Ajax – Floor Nov 15 '18 at 14:29

score 1 · Answer 2 · answered Nov 14 '18 at 16:09

1

You can achieve this simply using Jquery Get. https://api.jquery.com/jquery.get/

This is your back end side.

public async Task<JsonResult> AddToWishList(int itm_id, int recordId)
        {
// Do you data here and put it to the List<something> list
            return Json(list, JsonRequestBehavior.AllowGet);
        }

and your front end should be something like this.

<button>Click</button>

<div class="wishlist">
</div>

<script>
$("button").click(function(){
$.get( "YourControllerName/AddToWishList",{itm_id: yourItemId, recordId: yourRecordId} function( data ) {
  $( ".wishlist" ).html( data );
  alert( "Load was performed." );
});
});
</script>

answered Nov 14 '18 at 16:09

Mehmet Taha Meral

3,315
28
30

This doesn't work for me unfortunately, it doesn't recognize JsonRequestBehavior.AllowGet – Floor Nov 15 '18 at 14:29
How do you mean? JsonRequestBehavior is an enum under System.Web.Mvc https://imgur.com/a/b6xK3Rm – Mehmet Taha Meral Nov 15 '18 at 15:40
I only get these options when typing Json.. https://imgur.com/a/bmZ4V66 – Floor Nov 18 '18 at 15:36
I tried to do it this way: `return Json(itm_id);` but it still doesn't work for me.. – Floor Nov 18 '18 at 15:44

ASP.NET MVC - How to call controller method and don't leave the view

2 Answers2