Используйте Ajax и JsonResult в ASP.NET MVC 3

Мне нужно получить массив строк или список с помощью ajax и Action, это моя реализация:

Это мой html Dom вида действия Index в 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 Действие с точкой останова, которая никогда не запускается, в чем проблема?

ОБНОВИТЬ

когда я загружаю страницу хромом, в окне консоли появляется ошибка: http://MyProject/GlobalAccess/AccessMenu/@Url.Action(%22RoleDropDownChanged%22) 404 (Not Found) jquery-1.7.1.js:8102

Источник

3 ответа

Решение

Удалить эту настройку:

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, что невозможно. Вот что я бы тебе посоветовал. Начните с предоставления 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() }
Источник

Переместить ваш $(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;
}

Это должно работать, как вы ожидали.

Источник

Если ваш скрипт находится в файле.JS, то это не сработает, так как он будет рассматриваться как простой текст. Вы можете либо переместить весь сценарий в представление, либо перефакторизовать сценарий, чтобы большая часть сценария оставалась в.JS, а затем вы передавали соответствующие значения из представления.

Источник
Другие вопросы по тегам