는 ASP.NET MVC에서 사용 아약스와 JsonResult 내가 아약스와 액션으로 문자열 배열 또는 목록을 얻을 필요가 3

Question

이 내 구현입니다

<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

내가 크롬으로 페이지를로드 할 때 콘솔 창에 오류가 :

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

당신은 어떤 JSON에를 전송되지 않습니다 http://MyProject/GlobalAccess/AccessMenu/@Url.Action(%22RoleDropDownChanged%22) 404 (Not Found) jquery-1.7.1.js:8102

Answer 1

이 설정을 제거가 서버.

당신은 당신이 당신의 서버에 유효한 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); 
} 

---

,536,913,632 10

업데이트 :

사용자 의견에 따르면 서버 측 헬퍼를 별도의 자바 스크립트에서 사용할 수없는 것처럼 보입니다. 여기 내가 너에게 제안 할 것이있다. 별도의 자바 스크립트 파일에 다음

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

과 : 당신의 드롭 다운 생성 할 때 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 매개 변수를 추가 : 예상대로이 작동합니다

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

.