asp.net mvc ajax发布返回404找不到

Question

I'm trying to do an ajax request using jquery ajax function. I have a very strange behaviour. My folder structure ist like this:

My client-side ajax call (in UserManagement/Index.cshtml) looks like the following:

var rolename = viewModel.roleName();
$.ajax({
     type: "POST",
     url: '@Url.Action("AddRole", "UserManagement")',
     contentType: "application/json; charset=utf-8",
     data: { rolename: rolename },
     success: function(data) {
         var role = new Role(rolename);
         model.addRole(role);
         model.appendItem("#accordion", role.getItem());
         viewModel.roleName("");            
     }
});

In my UserManagementController.cs I have the following actions:

    // GET: /UserManagement/
    public ActionResult Index()
    {
        var serializer = new JavaScriptSerializer();
        var context = new ApplicationDbContext();
        var users = context.Users.ToList();
        var roles = context.Roles.ToList();


        ViewBag.Users = users;
        ViewBag.Roles = roles;
        return View();
    }

    //
    // POST: /UserManagement/AddRole
    [HttpPost]
    public string AddRole(string rolename)
    {

        Response.StatusCode = 200;
        return "gsfgdg";
    }

I already tried to use a GET instead of POST or to change AddRole to void type and anything other but I can't get this to work. I always receive a "404 not found". Can anybody help?

Thanks in advance!

Answer 1

Your case will work if you remove Content-Type.

Case 1: If we use Content-Type: "application/json"

When you request with a Content-Type of application/json, in server side ScriptServices expects data as JSON serialized string.

However, we can see "Invalid JSON primitive ***" is usually the result in response.

Here we should understand to pass the jQuery's "data" option as "{'param':'value'}", not {'param':'value'}.

So in your case, to achieve the solution: we need to supply data as below

var rolename = viewModel.roleName();
$.ajax({
     type: "POST",
     url: '@Url.Action("AddRole", "UserManagement")',
     contentType: "application/json; charset=utf-8",
     data: "{ 'rolename':'" + rolename +"' }",
     success: function(data) {
         var role = new Role(rolename);
         model.addRole(role);
         model.appendItem("#accordion", role.getItem());
         viewModel.roleName("");            
     }
});

Case 2: If we skip Content-Type: "application/json"

We should supply jQuery's "data" option as JSON object {'param':'value'} or {param:'value'}. (as you did)

Hope it helps :)