ASP .Net MVC, JQuery и AJAX - отсылаем данные на сервер

Задача: отослать данные на сервер, в действие (action) контроллера ASP MVC через AJAX-запрос на JavaScript. Идея тестого примера примитивна до предела - отсылаем что-то аяксом на сервер, с сервера отправляем обратно на форму и выводим в диалоговое окно.

На тестовом представлении должно быть следующее (заменить br стилями по своему вкусу):

<button id="ajaxTestButton1" type="button">Простая загрузка данных</button>
<br><br>
<input type="text" id="ajaxTesStr1" value="test2222" /> 
<button id="ajaxTestButton2" type="button">Отсылка одной строки</button>
<br><br>
<input type="text" id="ajaxTesStr3-1" value="test3-1" />
<input type="text" id="ajaxTesStr3-2" value="test3-2" />
<input type="text" id="ajaxTesStr3-3" value="test3-2" />
<input type="text" id="ajaxTesStr3-4" value="test3-2" />
<button id="ajaxTestButton3" type="button">Отсылка набора данных</button>

В контроллере следующие тестовые методы (подразумевается умолчальный контроллер Home)

        [HttpPost]
        public JsonResult AjaxTest1()
        {

            return Json("Строка возвращена с сервера");

        }

        [HttpPost]
        public JsonResult AjaxTest2(string testStr)
        {

            return Json("Сервер получил данные: " + testStr);

        }

        [HttpPost]
        public JsonResult AjaxTest3(TestData testData)
        {

            string tt = testData.TestStr1;
            return Json("Сервер получил данные со сложной структурой! Значения: " + testData.TestStr1 + ", " + testData.TestStr2 + ", " + testData.TestStr3 + ", " + testData.TestStr4);

        }

Где-то рядом

        public class TestData
        {
            public string TestStr1 {get; set; }
            public string TestStr2 { get; set; }
            public string TestStr3 { get; set; }
            public string TestStr4 { get; set; }
        }

С этого момента начинаются некоторые тонкости. DTO-обьект должен быть именно таким с get-set свойствами, если просто написать public string TestStr1 == ""; мы не увидим никаких ошибок, просто модель будет приходить пустой.

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

Ну и наконец собственно отсылка данных с JavaScript с учетомн аличия JQuery

<script type="text/javascript" src="~/Scripts/jquery-2.1.1.min.js"></script>

Скорее всего скрипт будет повешен на что-то в духе $(document).ready, но тестовом примере лишние отступы и скобки только помешают.

Само собой данные можно отсылать в разном виде - например JavaScript объекты но новичку обычно хочется не разнообразия, а чтобы хоть один метод заработал и стал отправной точкой для экспериментов. Я буду отсылать JSON.

$('#ajaxTestButton1').click(function () {
    //alert("AjaxTest");
    $.ajax({
        type: "POST",
        url: "/Home/AjaxTest1",
        data: param = "",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: successFunc,
        error: errorFunc
    });
});


$('#ajaxTestButton2').click(function () {
    //alert("AjaxTest2");

    var testData = { 'testStr': $("#ajaxTesStr1").val() };

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

$('#ajaxTestButton3').click(function () {


    var testData =
        {
            'TestStr1': $("#ajaxTesStr3-1").val(),
            'TestStr2': $("#ajaxTesStr3-2").val(),
            'TestStr3': $("#ajaxTesStr3-3").val(),
            'TestStr4': $("#ajaxTesStr3-4").val()
        };

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


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

function errorFunc(errorData) {
            alert('Ошибка' + errorData.responseText);
}

Из интересных моментов стоит отметить использование JSON.stringify (testData) - в теории оно не обязательно но без него можно получить (и я получал) совершенно невнятную ошибку Invalid JSON primitive error.

jQuery.ajax() на сайте JQuery


Комментарии

ASP .Net MVC, JQuery и AJAX - отсылаем данные на сервер — Комментарии (2)

  1. Welcome to your next beauty destination!

    Founded in 2014 by a female entrepreneur in Dubai with a strong vision that every person is unique and needs his beauty treat to fulfill his ultimate potential, an Art of Beauty Center has become a preferred style destination for both expats and residents in Dubai.
    An „Art of Beauty“ brand as first one in the UAE, that despite of the difference in cultural and linguistic barriers, as well as social norms of a new country, is offering an ultimate approach for a beauty care as an essential part of individual health care. It`s one of the selected salons, that offers a wide range of face, hair, and body treatments for all- ladies, gentlemen, and children.
    With a code of ethics, Art of Beauty eventually appeared to be to be a choice for personal care and beauty advice for many people with different background, age, nationality and workplace and interests. Over the first six months, the beauty center has shown its commitment to high professional standards and a delicate approach to individuality for everyone, who came here for an exceptional and delightful experience.
    Today, The Art of Beauty Center is a diverse range of professional`secrets and self-determination of every member of the team to perfection to create your phenomenal visual look and number one feeling.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>