网址无法在MVC中使用参数

Question

I am developing a project in MVC and it has been working all right, but I have not been able to solve an error, I try to access a url that creates from global. asax global. asax with parameters but it gives me error code 404.

routes.MapRoute(
        "Unit",
        "Home/Unit/{id}/{name}",
        new { controller = "Home", action = "Unit", id = UrlParameter.Optional }
        );

here I create the route in jquery, I add the route to a div with text

 $('#nombreUnidad').append("<a href='Unit/" + param.Unidad.Id + "/" + param.Unidad.NombreUnidad + "'>Nombre: " + param.Unidad.NombreUnidad + "</a>");

so is my actionresult from my controller

public ActionResult Unit(int id, string name)
{

    return View("~/Views/Home/Unit.cshtml");
}

I want to get to that view by clicking on a div, yes, in this case the view will have a model, it is something like profiles, that is why in jquery I create the path over the text of a div to be able to return the view with the data of the unit that I chose

Answer 1

Apply this in the div click event.

 $.ajax({
                type: "POST", //Post or Get
                url: '@Url.Action("Action","Controller")',
                data: JSON.stringify({ id:1, name: 'pp' }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function () {
                        //code to handle the response
                },
                error: function () {
                    //code to handle error
                }
            });

Answer 2

Here is a cleaner way to approach this. You can use your jquery like this:

 $('#nombreUnidad').append(function(){
        return $("<a>").attr("href", $(this).attr("data-appUrl") + ...).text("link text");
 });

This code gets your URL directly from a data-appUrl attribute in your HTML. It is much easier to pass a URL directly into razor. Something like this:

<div id="nombreUnidad" data-appUrl="@Url.Content("~/Home/Unit/")">
  <span>Here is some <b>sample text</b></span>
</div>

The code data-appUrl="@Url.Content("~/Home/Unit/")" helps you make sure that the exact URL is being used for the current page.

Here is a sample usage of the jquery: https://jsfiddle.net/xpvt214o/61226/