on clicking the link current page url is also added to the upcoming page on redirection

i'm trying to redirect to new page on clicking the link, but it redirect to new page it also add previous page url in the address bar. Kindly have a look at my code. How do i remove current page url on the upcoming page or next page.

This my HTML.

@{
    ViewData["Title"] = "ProductList";
}
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<h2>Product List</h2>
<div  id="im" >

</div>

Here is my Script.

  <script>
        $(document).ready(function () {
            var loc = window.location.href;
            var dat = loc.substring(loc.lastIndexOf('/') + 1);
            $.ajax({
                url:'api-url'
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ "ProjectId": "1", "CategoryId": dat }),
                success: function (data)
                {
                    console.log(data);
                    $.each(data.ProductList, function () {
                        var list = "<a href='Product/ProductDetail/" + this.Id + "'><img src=" + this.ImageLink + " height=400 width=400> " + this.Name + "</a>&nbsp; &nbsp; $" + this.Price + " </img> ";
                        $("#im").append(list);
                    })
                }
            });
        });
    </script>

On Redirection the next page url becomes like this.

http://localhost:36547/Product/ProductList/Product/ProductDetail/102

Rather it should be

http://localhost:36547/Product/ProductDetail/102