Hide URL from browser address bar

Question

I am using .NET MVC 5 to develop a web application. I have a controller with a method that takes a single parameter.

public class ProductController : Controller
{
    [HttpGet]
    public ActionResult Index(string ProductCode)
    {
        // Retrieve product details from database based on product code.
        ....
    }
}

In my source Home.cshtml file, I have this link:

<a href="/Product/Index?ProductCode=123456">

When the user clicks on the link, the ProductController will be called, and the product details are then presented in the product view.

So far everything works fine.

The only issue I have is that when the user clicks on the link, the URL "http://..../Product?Index=ProductCode=123456" will be showing in the browser's address bar. How do I prevent the URL showing up in the address bar?

I'm guessing that I need to change the [HttpGet] attribute in ProductController.Index() to [HttpPost]. Then in the Home.cshtml file, how do I modify it to make an HTTP POST call instead of GET? I suppose I need to modify the to add an "onClick" to call a JavaScript or jQuery function.

Why do you want to hide it (which you cant)?. How would you expect the user to navigate to to that method? — , Jan 25 '18 at 07:33
Are you need to show `/Product/Index/123456` instead? If yes, just configure custom route to include parameter `ProductCode` (that's known as URL rewriting). — Tetsuya Yamamoto, Jan 25 '18 at 07:33
What is the end goal you are trying to achieve? To hide the code `123456`from the user? If so, you can use a [data-driven custom RouteBase](https://stackoverflow.com/a/31958586/181087) to make the URL not include the primary key of the product. — NightOwl888, Jan 25 '18 at 07:34

score 0 · Answer 1 · answered Jan 25 '18 at 11:12

Just Use jquery and add the parameter as data attribute with the anchor tag.

    $("a").click(function(){  
        window.location.href= $(this).attr("href") +"?ProductCode=" +$(this).data("productcode")
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<a href="/Product/Index" data-ProductCode="123456" >Click Me</a>

Hide URL from browser address bar

1 Answers1