JQuery Ajax Post不能按预期工作

Question

我正在构建一个MVC 5 Web应用程序，它具有包含在布局模板中的下拉列表。我按照上计算器这个答案，它工作得很好MVC 3 Layout Page, Razor Template, and DropdownList

我需要的是为用户从下拉列表中选择一个项目（人名），以做出一个jQuery调用，然后将选择的将列表ID下拉到Controller中的一个方法中。

我有一个下拉列表中声明这样

@Html.DropDownListFor(x => x.SelectedUserID, Model.UserList, "Select", new { @class = "form-control" }) 

当选择项目时，下面的JQuery代码被称为

$(document).ready(function() { 

$("#SelectedUserID").change(ChangeEventOfDDL); 

function ChangeEventOfDDL() { 

    alert("test val" + $(this).val()); 

    $.ajax({ 
     type: "POST", 
     url: '/Dashboard/Index/' + $(this).val(), 
     data: { id: $(this).val() }, 
     dataType: "json", 
     error: function() { 
      alert("An error occurred."); 
     }, 
     success: function (data) { 

     } 

    }); 
} 

}); 

这然后将选定的ID传递给索引方法在我的控制器

public ActionResult Index(int? id) 
    { 
     DashboardViewModel model = new DashboardViewModel(); 

     if(id == null || id == 0) 
     { 
      User user = _userService.GetUserByID(Convert.ToInt32(User.Identity.GetUserId())); 
      model.SelectedUser = user; 
     } 
     else 
     { 
      model.SelectedUser = _userService.GetUserByID(id.Value); 
     } 

     return View(model); 
    } 

这一切似乎工作正常。当我通过我的代码进行调试时，我可以看到选定的下拉列表ID正在按照预期一直传递到我的控制器中的Index方法。问题是，当我完成遍历代码并返回到用户界面时，出现JQuery错误，提示“发生错误”。这是我在我的JQuery函数中设置的默认错误消息。

因为发生此错误，我的代码无法正常工作。

我不知道为什么会发生这种情况，任何人都可以请帮忙吗？

谢谢。

UPDATE

使用我用下面的代码ChangeEventOfDLL功能内的Ajax调用之前，但是，它从来没有真正打在仪表板的指数方法。

$.post('@Url.Action("Dashboard", "Index")', { id: $(this).val() }, function (result) { 
}); 

UPDATE

我改变我的JQuery这

$(document).ready(function() { 

$("#SelectedUserID").change(ChangeEventOfDDL); 

function ChangeEventOfDDL() { 

    alert("test val" + $(this).val()); 

    $.post('@Url.Action("Index", "Dashboard")', { id: $(this).val() }, function (result) { 
    }); 
} 

}); 

但仍Index方法不会被调用的控制器。

接下来我jQuery代码更新到这个

$(document).ready(function() { 

$("#SelectedUserID").change(ChangeEventOfDDL); 

function ChangeEventOfDDL() { 

    alert("test val" + $(this).val()); 

    $.ajax({ 
     type: "POST", 
     url: '@Url.Action("Index","Dashboard")', 
     data: { id: $(this).val() }, 
     error: function() { 
      alert("An error occurred."); 
     }, 
     success: function (data) { 

     } 

    }); 

} 

}); 

但仍Index方法未在控制器打来电话，我仍然得到错误提示。

Answer 1

你逝去的datatype:json，而你正在返回从动作来看，和另一个错误是你逝去的ID在数据属性，以及在网址为好，这也是错误的： 这应该是：

$.ajax({ 
    type: "POST", 
    url: '/Dashboard/Index/' + $(this).val(), 
    data: { id: $(this).val() }, 
    dataType: "json", 
    error: function() { 
     alert("An error occurred."); 
    }, 
    success: function (data) { 

    } 

}); 

这样的：

var id = $(this).val(); 
$.ajax({ 
    type: "POST", 
    url: '@Url.Action("Index","Dashboard")', 
    data: { id: id }, 
    error: function() { 
     alert("An error occurred."); 
    }, 
    success: function (data) { 

    } 

}); 

注：始终使用Url.Action帮助您创建动作URL，这样就不会创建实时部署问题。

public ActionResult Index(int? id) 
    { 
     DashboardViewModel model = new DashboardViewModel(); 

     if(id == null || id == 0) 
     { 
      User user = _userService.GetUserByID(Convert.ToInt32(User.Identity.GetUserId())); 
      model.SelectedUser = user; 
     } 
     else 
     { 
      model.SelectedUser = _userService.GetUserByID(id.Value); 
     } 

     return JsonResult(model,JsonRequestBehavior.AllowGet); 
    } 

，然后你必须把数据类型：：“JSON”在Ajax调用，如果你只想返回对象无法查看再做这样

。

更新：

制作DDL事件是这样的：

$("#SelectedUserID").change(function(){ 

ChangeEventOfDDL($(this).val()); 

}); 

你的函数：

function ChangeEventOfDDL(id) 
{ 
$.ajax({ 
     type: "POST", 
     url: '@Url.Action("Index","Dashboard")', 
     data: { id: id }, 
     error: function() { 
      alert("An error occurred."); 
     }, 
     success: function (data) { 

     } 

    }); 
} 

Answer 2

，因为您所指定的数据类型，因为它是去到误差函数JSON 因此dataType: 'json'但是您不会将JSON返回给您的函数重新返回一个视图，这就是为什么错误被抛出。将您的Action Result更改为Json结果并执行此操作。

public JsonResult(int? id) 
{ 
     // blah blah blah 
     return Json(model.SelectedUser, JsonRequestBehavior.AllowGet); 

} 

Answer 3

然后删除dataType:"json"从你的AJAX设立

而在你的行动使用的return PartialView("ViewName",model)代替​​

如果您返回局部视图否则返回视图（）

Answer 4

*>只在你的Mvc控制器中写入这条线的功能

Configuration.ProxyCreationEnabled = fals *

e;