Search code examples
asp.net-mvcroutesurl-routingasp.net-mvc-routing

ASP.NET MVC 5 routing, hide data in URL


I have two types of functionality for a action with a bool variable.

[HttpGet]
public ActionResult action(bool data = false)
{
   if(data == false)
   {
      return View("view1");
   }
   else
   {
      return View("view2");
   }
}

It is a [httpGet] method. some link has data bool value as true and some has false.
The url has the attribute like http://localhost:58241/action?data=False
I want to hide the ?data=False or ?data=Truefrom URL and should possess all the same functionality like before.

I want the URL like http://localhost:58241/action

Thanks in advance.


Solution

  • Routing has absolutely nothing at all to do with query string parameters. And in any case, you still need to transfer the data parameter to the server for the action method to receive it. There are 3 ways to do this:

    1. Pass it in the URL using HTTP GET (as a route value or query string value)
    2. Pass it in the form body using HTTP POST
    3. Pass it in a model (using HTTP POST and model binding)

    The simplest option is #1, however since you mentioned this isn't acceptable to pass the data through the URL, your only choice is to use HTTP post. So, the rest of this answer uses #2.

    First, the default route does not cover your choice of URL (/action), so you need to insert a custom route for this.

    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
    
            // Add route to handle /action
            routes.MapRoute(
                name: "Action",
                url: "action",
                defaults: new { controller = "Data", action = "Action" }
            );
    
            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
    

    Next, you need a controller to handle both the GET and POST from the browser.

    public class DataController : Controller
    {
        public ActionResult Action()
        {
            return View();
        }
    
        [HttpPost]
        public ActionResult Action(bool data = false)
        {
            if (data)
            {
                return View("view2");
            }
    
            return View("view1");
        }
    }
    

    The data is sent back to the server in the POST, so it is not required to pass it in the URL.

    Finally, you have the view (named Action.cshtml) that is returned from the Action action method. It has 2 different form tags that submit a different value for data depending on the button clicked.

    @{
        ViewBag.Title = "Action";
    }
    
    <h2>Choose an Option</h2>
    
    @using (Html.BeginForm("action", "Data")) {
    
        <input type="hidden" name="data" value="true" />
        <input type="submit" value="With Data" />
    }
    
    @using (Html.BeginForm("action", "Data")) {
    
        <input type="hidden" name="data" value="false" />
        <input type="submit" value="Without Data" />
    }
    

    Note that you could do this step entirely in JavaScript (AJAX POST) if you please, which would enable you to use a hyperlink instead of a button or you could just style the button using CSS to look like a hyperlink.