使用Ajax和JsonResult在ASP.NET MVC 3

Question

我需要得到的字符串數組或列表使用Ajax和行動，這是我的執行情況：

這是視圖索引行動我HTML DOM中AccessMenuController：

<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行動與斷點，永遠不會運行，問題在哪裏？

UPDATE

，當我通過Chrome瀏覽器加載頁面有控制檯窗口中的錯誤： http://MyProject/GlobalAccess/AccessMenu/@Url.Action(%22RoleDropDownChanged%22) 404 (Not Found) jquery-1.7.1.js:8102

Answer 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); 
} 

---

更新：

根據您的意見，它看起來像你試圖在單獨的JavaScript中使用服務器端助手，這是不可能的。這是我會建議你的。

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

，然後在單獨的JavaScript文件：通過生成的下拉菜單時，提供的URL啓動

$(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'); 
      } 
     });   
    });  
}); 

然後當然，你可以替換當前選擇的值硬編碼的角色ID：

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

Answer 2

如果腳本駐留在.JS文件中，那麼這將不起作用，因爲它將被視爲純文本。您可以將整個腳本移動到視圖中，也可以對腳本進行重新分解，以便大部分腳本保留在.JS中，然後從視圖中傳遞相關值。

Answer 3

移動你的$(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; 
} 

如你預期這應該工作。