MVC 5 Html.Actionlink redirects me to another page even when i try to prevent it with script

Question

User899363531 posted

<table class="table table-dark">

    <thead>

        <tr>

            <th scope="col">ID</th>

            <th scope="col">Name</th>

            <th scope="col">Price</th>

            <th scope="col">Image</th>

            <th scope="col">Remove</th>

            <th scope="col">Add</th>

        </tr>

    </thead>

    <tbody>

        @foreach (var item in Model)

        {

            if (item != null)

            {

                <tr>

                    @using (Html.BeginForm("Cart", "Login", FormMethod.Post))

                    {

                        <th scope="row">@item.ID</th>

                        <td>@item.Name</td>

                        <td>$@item.Price</td>

                        <td><img class="ImageItemSize" src="data:image/*;base64,@Convert.ToBase64String(item.Pic)" /></td>

                        <td>@Html.ActionLink("Remove", "CartRemove","Login", new { id = item.ID, Class = "NoRedirect" }, null)</td>

                        <td>@Html.ActionLink("Add", "CartAdd", null, new { id = item.ID, Class = "NoRedirect" }, null)</td>

                    }

 

                </tr>

            }

        }

 

 

    </tbody>

</table>

 

<script>

    $("#NoRedirect").click(function (evt) {

        var href = $(this).attr('href');

        window.location = href;

        evt.preventDefault();

    });

</script>

//Controller

List<int> list = new List<int>();// glabal list

public void CartRemove(int id) // just want to do something without changing page
        {
           
            PicID = id;
            
            list.Remove(id);
            
        }
        
        public void CartAdd(int id) // just want to do something without changing page
        {
            
            PicID = id;
            list.Add(id);
           
        }
    }

Answer 1

User1686398519 posted

Hi Spiritt, 

If the href attribute specifies a link, then the URL of the page that will be redirected to.

• So after you click it, you will still be redirected to the specified url address.

For example:

@Html.ActionLink("Remove", "CartRemove", "Login", new { id = 1, Class = "NoRedirect" }, null)

Rendered html

<a href="/Login/CartRemove?id=1&amp;Class=NoRedirect">Remove</a>

You can use ajax to send the request.

• The following is the modified code, you can refer to it.
• Just a friendly reminder, you can use {;} to insert the code to make it look clearer.

<table class="table table-dark">
    <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Name</th>
            <th scope="col">Price</th>
            <th scope="col">Image</th>
            <th scope="col">Remove</th>
            <th scope="col">Add</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            if (item != null)
            {
                <tr>
                    @using (Html.BeginForm("Cart", "Login", FormMethod.Post))
                    {
                        <th scope="row">@item.ID</th>
                        <td>@item.Name</td>
                        <td>$@item.Price</td>
                        <td><img class="ImageItemSize" src="data:image/*;base64,@Convert.ToBase64String(item.Pic)" /></td>
                        <td>
                            <button type="button" class="btn btn-danger btnaction" id="CartRemove">Remove</button>
                        </td>
                        <td>
                            <button type="button" class="btn btn-success btnaction" id="CartAdd">CartAdd</button>
                        </td>
                    }
                </tr>

            }
        }
    </tbody>
</table>
@section scripts{
    <script>
        $("table").on("click", ".btnaction", function () {
            var action = $(this).attr("id");
            var id = $(this).closest("tr").find("th").first().text();
            $.ajax({
                url: "/TestLink/" + action,
                type: "get",
                data: { id: id },
                success: function () {
                    console.log("success")
                    location.reload();
                }
            });
        });
    </script>
}

Here is the result. 

Best Regards,

YihuiSun

Answer 2

User899363531 posted

Thanks mate, this helped alot