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

发布时间：2020-12-16 07:23:35 所属栏目：asp.Net 来源：网络整理

导读：我需要使用ajax和Action获取字符串数组或列表,这是我的实现：这是我在AccessMenuController中对Index动作的html Dom视图： div class="RoleAccess" select name="RoleDropDown" option value="0"Select Role/option option value="61AD3FD9-C080-4BB1-8012-

我需要使用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 Action并且从不运行,问题出在哪里？

UPDATE

当我通过chrome加载页面时,控制台窗口中出现错误：
http：//MyProject/GlobalAccess/AccessMenu/@Url.Action(”ColientDropDownChanged“)404(未找到)jquery-1.7.1.js：8102

解决方法

删除此设置：

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

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

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

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

所以：

$.ajax({
    url: '@Url.Action("RoleDropDownChanged")',success: SuccessRoleChangeHandler,error: OnFailRoleChangeHandler
});

应该工作(至少它对我来说)有以下行动：

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

更新：

根据您的评论,您似乎试图在单独的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,success: function(result) {
                alert('success');
            },error: function() {
                alert('error');
            }
        });        
    });    
});

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!