вызов метода AJAX из представления ASP.NET MVC 2

Question

Я хочу знать, как использовать Ajax в MVC2. Я создал пустой проект в Visual Studio и добавил домашний контроллер в Controllers / Home / HomeController.cs со следующим кодом

Как использовать AJAX для вызова метода AjaxTest на HomeController при нажатии кнопки и отображения этого текста вместо этого?

public class HomeController : Controller
{       
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult AjaxTest()
    {
        return Json("Whoever answers this rocks!");
    }
}

Я добавил представление в Views / Home / Index.cs со следующим кодом

    <script type="text/javascript">
        function sayHello() {
            alert("hello stackoverflow :)")
        }
    </script>

    <div>
        Hello
        <button onclick="sayHello();"> Click Me! </button>
    </div>

Answer 1

Это должно работать:

<script type="text/javascript">
    function sayHello() {
        $.get('/Home/AjaxTest', function(data) { alert(data) });
    }
</script>

Не забудьте включить jQuery в заголовок вашей страницы:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Вы также можете включить jQuery в папку сценариев вашего проекта. jQuery является частью файлов инфраструктуры ASP.NET MVC.

EDIT:

Измените свое действие на

public ActionResult AjaxTest()
{
    return Json("Whoever answers this rocks!", JsonRequestBehavior.AllowGet);
}

По умолчанию использование Json с получением результатов в «Этот запрос был заблокирован, поскольку конфиденциальная информация может быть раскрыта сторонним веб-сайтам, когда она используется в запросе GET. Чтобы разрешить запросы GET, установите для JsonRequestBehavior значение AllowGet». ошибка.

Answer 2

Не забывайте, что элемент <button> отправляет форму по умолчанию, что может вызвать непреднамеренные последствия для ваших вызовов AJAX. Рассмотрим <input type="button" value="Click Me" /> или возвращаем false в вашей функции sayHello().