Question

I have an ASP.NET MVC 3 application. I am trying to implement the routing standard found at http://www.slideshare.net/calamitas/restful-best-practices. I’m using slides 15 and and 17 for reference. I understand that this slide deck is regarding RAILS. However, This syntax seems so much cleaner and more natural. That’s why I want to use it.

I have successfully implemented the Index and Show actions in my controller. However, I am having problems getting the Create and Update actions to work. At this time, when I reference either of these, I receive a 404. Currently, my controller looks like this:

public class OrdersController : Controller
{
    // GET: /Orders/
    public ActionResult Index()
    {
        var results = new[] {
            new {id=1, price=1.23, quantity=2}
        };
        return Json(results, JsonRequestBehavior.AllowGet);
    }

    //
    // GET: /Orders/{orderID}
    public ActionResult Show(int id)
    {
        string result = "order:" + id;
        return Json(result, JsonRequestBehavior.AllowGet);
    }

    //
    // POST: /Orders/{order}
    [HttpPost]
    public ActionResult Create(object order)
    {
        var message = "The order was successfully created!";
        return Json(message);
    }

    //
    // PUT: /Orders/{orderID}
    [HttpPut]
    public ActionResult Update(object orderID)
    {
        var message = "The order was successfully updated!";
        return Json(message);
    }
}

When I register my routes, I use the following:

context.MapRoute(
    "OrderList",
    "Orders",
    new { action = "Index", controller="Orders" }
);

context.MapRoute(
    "Order",
    "Orders/{id}",
    new { action = "Show", controller = "Orders", id="" }
);

context.MapRoute(
    "InsertOrder",
    "Orders",
    new { action = "Create", controller = "Orders" }
);

context.MapRoute(
    "UpdateOrder",
    "Orders/{orderID}",
    new { action = "Update", controller = "Orders", orderID = "" }
);

I’m attempting to CREATE and UPDATE via JQuery. When I’m using the following:

// Update
var order = getOrder();
$.ajax({
    url: "/orders",
    type: "put",
    data: JSON.stringify(order),
    contentType: "application/json",
    success: function (result) {
        alert(result);
    },
    error: function () {
        alert("There was a problem.");
    }
});


// Create
var order = getOrder();
$.ajax({
    url: "/orders",
    type: "post",
    data: JSON.stringify(order),
    contentType: "application/json",
    success: function (result) {
        alert(result);
    },
    error: function () {
        alert("There was a problem.");
    }
});

What am I doing wrong? Because its a 404, I tend to believe that it is an incorrect routing. I think there may be a conflict, but I don’t know how to prove or correct this. At the same time, I’m not sure that I’m setting the data property correctly in my jQuery. Thank you for any help that can be provided.

Answer 1

Your URL is missing the action for create. Change the URL to the following:

$.ajax({ 
    url: "/orders/create", 
    ....

The reason is that your routing never reach the second one defined for Orders. All url’s starting with Orders will go to the Order controller and Index action.

context.MapRoute( 
    "OrderList", 
    "Orders", 
    new { action = "Index", controller="Orders" } 
);

EDIT:

You should use a general routing in this case:

context.MapRoute( 
    "Order", 
    "Orders/{action}/{id}", 
    new { action = "Index", controller = "Orders", id="" } 
);

If the URL is ‘/Orders’ then it will go to ‘Index’, but ‘/Orders/Create’ will go to the ‘Create’ action in the controller.