Выполнение простого вызова Ajax для контроллера в asp.net mvc


109

Я пытаюсь начать работу с вызовами ASP.NET MVC Ajax.

контроллер:

public class AjaxTestController : Controller
{
    //
    // GET: /AjaxTest/
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }   
}

Посмотреть:

<head runat="server">
    <title>FirstAjax</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var serviceURL = '/AjaxTest/FirstAjax';

            $.ajax({
                type: "POST",
                url: serviceURL,
                data: param = "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: successFunc,
                error: errorFunc
            });

            function successFunc(data, status) {     
                alert(data);
            }

            function errorFunc() {
                alert('error');
            }
        });
    </script>
</head>

Мне просто нужно распечатать предупреждение с методом контроллера, возвращающим данные. На мой взгляд, над кодом просто напечатайте «чамара». Предупреждение не срабатывает.

ОБНОВИТЬ

Я изменил свой контроллер, как показано ниже, и он начал работать. У меня нет четкого представления, почему это сейчас работает. Кто-нибудь, пожалуйста, объясните. Параметр "a" не имеет отношения, я добавил его, потому что я не могу добавить два метода с одинаковым именем и параметрами метода. Я думаю, что это может быть не решение, а его работа

public class AjaxTestController : Controller
    {
        //
        // GET: /AjaxTest/
        [HttpGet]
        public ActionResult FirstAjax()
        {
            return View();
        }

        [HttpPost]
        public ActionResult FirstAjax(string a)
        {
            return Json("chamara", JsonRequestBehavior.AllowGet);
        }
    }

вернуть строку в формате json {"name":"chamara"}. тогда попробуйте прочитать какdata['name']
Raab

1
Удалите из представления вторую библиотеку jQuery. Ваш код должен работать как есть. Я думаю, что может произойти ошибка сценария, из-за которой предупреждение не появится.
Теренс

Ответы:


23

После того, как вы сделали обновление,

  1. его первый вызов действия FirstAjax с запросом HttpGet по умолчанию и визуализация пустого представления Html. (Раньше у вас этого не было)
  2. позже при загрузке элементов DOM этого представления ваш вызов Ajax запускается и отображает предупреждение.

Раньше вы возвращали в браузер только JSON без рендеринга HTML. Теперь у него есть HTML-представление, в котором можно получить ваши данные JSON.

Вы не можете напрямую отображать JSON его простые данные, а не HTML.


52

Удалите атрибут данных, поскольку вы POSTINGничего не значите для сервера (ваш контроллер не ожидает никаких параметров).

И в вашем методе AJAX вы можете использовать Razorи использовать @Url.Actionвместо статической строки:

$.ajax({
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: successFunc,
    error: errorFunc
});

Из вашего обновления:

$.ajax({
    type: "POST",
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    data: { a: "testing" },
    dataType: "json",
    success: function() { alert('Success'); },
    error: errorFunc
});

3
@chamara - извините, удалите HttpPost (вы ничего не отправляете на сервер, поэтому это будет избыточный атрибут), и контроллер не будет поражен. Также удалите "type: POST" в функции AJAX, как я вам уже говорил.
Даррен

18

Используйте Razor для динамического изменения URL-адреса, вызывая свое действие следующим образом:

$.ajax({
    type: "POST",
    url: '@Url.Action("ActionName", "ControllerName")',
    contentType: "application/json; charset=utf-8",
    data: { data: "yourdata" },
    dataType: "json",
    success: function(recData) { alert('Success'); },
    error: function() { alert('A error'); }
});

Параметры для Url.Action в этом ответе указаны наоборот, это Url.Action (actionName, controllerName)
xd6_

1
Не фанат этого, это поощряет объединение представления и javascript, но, мм, имя пользователя проверяется?
Halter

@Halter UX значительно улучшается, если вы не заставляете пользователя перенаправлять каждое действие. И на стороне клиента происходит много вещей, о которых серверная сторона не должна заботиться.
Каньон Колоб

@KolobCanyon, ты на 100% прав. Мой комментарий больше относится к рендерингу URL-адреса с помощью бритвы в javascript, это тесно связывает ваш javascript с представлением (cshtml). Это хороший ответ, но для устранения тесной связи вы могли бы выгрузить URL-адрес в атрибут данных в chstml и прочитать его в javascript. Извините за путаницу!
Halter

5

Во-первых, нет необходимости иметь две разные версии библиотек jquery на одной странице, для работы вызовов ajax достаточно "1.9.1" или "2.0.0".

Вот код вашего контроллера:

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

    public ActionResult FirstAjax(string a)
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }   

Вот как должно выглядеть ваше представление:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    var a = "Test";
    $.ajax({
        url: "../../Home/FirstAjax",
        type: "GET",
        data: { a : a },
        success: function (response) {
            alert(response);
        },
        error: function (response) {
            alert(response);
        }
    });
});
</script>

5

Если вам просто нужно нажать C # Method в своем вызове Ajax, вам просто нужно передать два типа вопроса и URL-адрес, если ваш запрос получен, тогда вам просто нужно указать только URL-адрес. пожалуйста, следуйте приведенному ниже коду, он работает нормально.

Код C #:

    [HttpGet]
    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }   

Код Java Script при получении запроса

    $.ajax({
        url: 'home/FirstAjax',
        success: function(responce){ alert(responce.data)},
        error: function(responce){ alert(responce.data)}
    });

Код Java Script при отправке запроса, а также [HttpGet] в [HttpPost]

        $.ajax({
            url: 'home/FirstAjax',
            type:'POST',
            success: function(responce){ alert(responce)},
            error: function(responce){ alert(responce)}
        });

Примечание. Если вы используете FirstAjax в том же контроллере, в котором находится ваш контроллер представления, то имя контроллера в URL-адресе не требуется. лайкurl: 'FirstAjax',


4

Это для вашего вопроса ОБНОВЛЕНИЕ.

Поскольку у вас не может быть двух методов с одинаковым именем и подписью, вы должны использовать атрибут ActionName:

ОБНОВИТЬ:

[HttpGet]
public ActionResult FirstAjax()
{
    Some Code--Some Code---Some Code
    return View();
}

[HttpPost]
[ActionName("FirstAjax")]
public ActionResult FirstAjaxPost()
{
    Some Code--Some Code---Some Code
    return View();
}

И перейдите по этой ссылке, чтобы узнать, как метод становится действием. Хотя очень хорошая ссылка.


1

Посмотреть;

 $.ajax({
        type: 'GET',
        cache: false,
        url: '/Login/Method',
        dataType: 'json',
        data: {  },
        error: function () {
        },
        success: function (result) {
            alert("success")
        }
    });

Метод контроллера;

 public JsonResult Method()
 {
   return Json(new JsonResult()
      {
         Data = "Result"
      }, JsonRequestBehavior.AllowGet);
 }

0

вместо url: serviceURL, использования

url: '<%= serviceURL%>',

и вы передаете 2 параметра в successFunc?

function successFunc(data)
 {
   alert(data);
 }

0

Добавьте "JsonValueProviderFactory" в global.asax:

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}

что такое JsonValueProviderFactory?
Kiquenet
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.