How to setup a wildcard route in MVC

Question

The URL for any product details page on our site is like this:
http://example.com/Product/Index/pid219

Where:

Product - is the name of the controller
Index - is the name of the method and
pid219 - ID of the product

I would like this page to be accessible as
http://example.com/Product/pid219
OR
http://example.com/Product/name-of-the-product/pid219

So, I modified the RouteConfig.cs to this:

public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

    routes.MapRoute(
        name: "ProductRoute1",
        url: "{controller}/{id}",
        defaults: new { controller = "Product", action = "Index", id = "" }
    );
    routes.MapRoute(
       name: "ProductRoute2",
       url: "{controller}/{ignore}/{id}",
       defaults: new { controller = "Product", action = "Index", id = "" }
   );
    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
    );            
}

The page is now accessible as desired, however, there is a problem in all other pages which make Ajax call on button clicks. For e.g: The SignIn button click isn't working.

The controller name is SignIn and there are two methods - Index(which loads the page), SignInUser(which is triggered on ajax request)

When I click on the Sign In button, the Index method is hit now instead of the SignInUser method.

function SignInUser() {    
    $.ajax({
        type: "POST",
        url: '@Url.Action("SignInUser", "SignIn")',            
        data: '',
        contentType: "application/json; charset=utf-8",
        dataType: "json",            
        success: function (response) {                               
        }
    });        
}

If we set a new route, should the url in ajax call also needs to be changed. Please help me, how I can achieve my goal here. Also specify, if the new routes have to be declared before or after the default one.

It could be because the first route is matched first, unconditionally. You should consider using `constraints` together with `defaults` to make sure you control which particular requests go through this additional route. — Wiktor Zychla, Sep 21 '18 at 07:46
You need to make the first route `url: "Product/{id}",`. For the 2nd also change `{controller}` to `Product`. And to generate a slug route, refer [how to implement url rewriting similar to SO](https://stackoverflow.com/questions/30349412/how-to-implement-url-rewriting-similar-to-so/30363600#30363600) — , Sep 21 '18 at 08:28

score 3 · Accepted Answer · answered Sep 21 '18 at 11:16

I would like this page to be accessible as http://example.com/Product/pid219 OR http://example.com/Product/name-of-the-product/pid219 For you :

routes.MapRoute(
        name: "ProductRoute1",
        url: "Product/{id}",
        defaults: new {controller = "Product", action = "Index", id = "" }
    );

http://example.com/Product/name-of-the-product/pid219

routes.MapRoute(
        name: "ProductRoute1",
        url: "Product/{*action}/{id}",
        defaults: new { controller = "Product", action = "Index", id = "" }
    );

score 1 · Answer 2 · answered Sep 21 '18 at 11:08

Issue is coming because in the routes whatever route matches first will be used. Sililar to switch statement. In your case it matched with

routes.MapRoute(
        name: "ProductRoute1",
        url: "{controller}/{id}",
        defaults: new { controller = "Product", action = "Index", id = "" }
    );

If the new functionality is needed only in one controller then its better to add the route directly for this. Something like below

routes.MapRoute(
        name: "ProductRoute1",
        url: "Product/{id}",
        defaults: new { controller = "Product", action = "Index", id = "" }
    );

How to setup a wildcard route in MVC

2 Answers2