在 ASP.NET MVC 3 中使用 Ajax 和 JsonResult答案

【问题标题】：Use Ajax and JsonResult in ASP.NET MVC 3在 ASP.NET MVC 3 中使用 Ajax 和 JsonResult
【发布时间】：2012-04-12 20:55:45
【问题描述】：

我需要用 ajax 和 Action 获取字符串数组或列表，这是我的实现：

这是我在 AccessMenuController 中的 Index 操作视图的 html Dom：

<div class="RoleAccess">
   <select name="RoleDropDown">
    <option value="0">Select Role</option>
    <option value="61AD3FD9-C080-4BB1-8012-2A25309B0AAF">AdminRole</option>
    <option value="8A330699-57E1-4FDB-8C8E-99FFDE299AC5">Role2</option>
    <option value="004E39C2-4FFC-4353-A06E-30AC887619EF">Role3</option>
   </select>
</div>

我的控制器：

namespace MyProject.Areas.GlobalAccess.Controllers {

public class AccessMenuController : Controller {

    public ActionResult Index() { return View();}

    [HttpPost]
    public JsonResult RoleDropDownChanged(string roleId) {

     Guid RoleId = new Guid(roleId);

    //Some implement

    List<string> actions = new List<string>();
    for(int i = 0; i <= 10; i++) 
            actions.Add(i.ToString());

return Json(actions.ToArray(), JsonRequestBehavior.AllowGet);

   }
  }
}

和脚本：

$(document).ready(function () {

//Handle Checks of Actions by RoleName Changed
$('div.RoleAccess select').change(function () {
    RoleChangeHandler();
});

function RoleChangeHandler() {

    $.ajax({
        url: '@Url.Action("RoleDropDownChanged")',
        type: 'POST',
        data: { 'roleId': '61AD3FD9-C080-4BB1-8012-2A25309B0AAF' },
        dataType: 'json',
        processData: false,
        contentType: 'application/json; charset=utf-8',
        success: function (data) { SuccessRoleChangeHandler(data); },
        error: OnFailRoleChangeHandler
    });
    return false;
}


function SuccessRoleChangeHandler(data) {

    alert("in success role change");

}

function OnFailRoleChangeHandler(result) {
    alert('in OnFailRoleChangeHandler');

}

问题在于下拉列表的所有更改只是 Onfail 函数运行并提醒我“在 OnFailRoleChangeHandler 中”，我还检查了带有断点的 RoleDropDownChanged 操作并且从未运行，问题出在哪里？

更新

当我通过 chrome 加载页面时，控制台窗口中出现错误： http://MyProject/GlobalAccess/AccessMenu/@Url.Action(%22RoleDropDownChanged%22) 404 (Not Found) jquery-1.7.1.js:8102

【问题讨论】：

调试时，你的服务器方法是否抛出异常？你试过调试 javascript 代码吗？
如果您有此 @Url.Action(%22RoleDropDownChanged%22)，则 Razor 引擎不会解析您的脚本。如果可以的话，您可以将脚本放在剃刀视图中，而不是放在单独的 .js 文件中。
@Kosta 我更新问题
如果您的脚本位于 .js 文件中，那么这将不起作用。你的脚本在哪里声明？

标签： ajax asp.net-mvc json asp.net-mvc-3 razor

【解决方案1】：

删除此设置：

contentType: 'application/json; charset=utf-8',

您没有向服务器发送任何 JSON。

如果您想保留此设置，请确保向您的服务器发送有效的 JSON：

data: JSON.stringify({ 'roleId': '61AD3FD9-C080-4BB1-8012-2A25309B0AAF' })

所以：

$.ajax({
    url: '@Url.Action("RoleDropDownChanged")',
    type: 'POST',
    data: { 'roleId': '61AD3FD9-C080-4BB1-8012-2A25309B0AAF' },
    success: SuccessRoleChangeHandler,
    error: OnFailRoleChangeHandler
});

应该通过以下操作（至少对我有用）：

[HttpPost]
public ActionResult RoleDropDownChanged(Guid roleId) 
{
    var actions = Enumerable.Range(1, 10).Select(x => x.ToString()).ToList();
    return Json(actions);
}

更新：

根据您的 cmets，您似乎正在尝试在单独的 javascript 中使用服务器端助手，这是不可能的。这就是我的建议。首先在生成下拉列表时提供 url：

<div class="RoleAccess">
    @Html.DropDownListFor(
        x => x.RoleDropDown, 
        Model.Roles, 
        "-- Select role --",
        new { 
            data_url = Url.Action("RoleDropDownChanged") 
        }
   )
</div>

然后在您单独的 javascript 文件中：

$(document).ready(function() {
    $('div.RoleAccess select').change(function () {
        var url = $(this).data('url');
        $.ajax({
            url: url,
            type: 'POST',
            data: { 'roleId': '61AD3FD9-C080-4BB1-8012-2A25309B0AAF' },
            success: function(result) {
                alert('success');
            },
            error: function() {
                alert('error');
            }
        });        
    });    
});

然后你当然可以用当前选择的值替换硬编码的roleId：

data: { 'roleId': $(this).val() }

【讨论】：

我尝试了你的两个建议，还是有同样的问题。
也尝试删除processData: false。您还看到您的 javascript 调试器中有任何错误吗？服务器对 AJAX 请求的确切响应是什么？
抱歉，我无法重现您的问题。我已经测试了我展示的代码，它对我来说效果很好。服务器对 AJAX 请求的响应是什么？看看你的js调试工具。
感谢您的回答，当我通过 chrome 加载页面时，控制台窗口出现错误：http://MyProject/GlobalAccess/AccessMenu/@Url.Action(%22RoleDropDownChanged%22) 404 (Not Found)
哦，您是否尝试在单独的 javascript 文件中使用诸如 @Url.Action 之类的服务器端助手？那是行不通的。您必须在模板中定义 url，以便您可以访问 url 助手，然后您可以在单独的 javascript 文件中使用该变量。

【解决方案2】：

将您的 $(document).ready 函数移动到您的视图中，如下所示：

<script type="text/javascript">
$(document).ready(function () {

    //Handle Checks of Actions by RoleName Changed
    $('div.RoleAccess select').change(function () {
        RoleChangeHandler('@Url.Action("RoleDropDownChanged")');
   });
});
</script>

然后在你的 JS 文件中添加 url 参数到你的函数并更改 ajax 调用：

function RoleChangeHandler(pageUrl) {

    $.ajax({
        url: pageUrl,
        type: 'POST',
        data: { 'roleId': '61AD3FD9-C080-4BB1-8012-2A25309B0AAF' },
        dataType: 'json',
        processData: false,
        contentType: 'application/json; charset=utf-8',
        success: function (data) { SuccessRoleChangeHandler(data); },
        error: OnFailRoleChangeHandler
    });
    return false;
}

这应该可以按您的预期工作。

【讨论】：

【解决方案3】：

如果您的脚本位于 .JS 文件中，那么这将不起作用，因为它将被视为纯文本。您可以将整个脚本移动到视图中，也可以重构脚本，以便大部分脚本保留在 .JS 中，然后从视图中传递相关值。

【讨论】：