Обновление информации таблицы с использованием jQuery и ASP.NET MVC

Question

У меня есть простая страница, которая отображает адреса электронной почты пользователя в таблице. У меня также есть текстовое поле под таблицей и кнопка «Добавить». В настоящее время я использую простую форму сообщения, которая обрабатывается контроллером, который добавит адрес электронной почты в базу данных и перезагрузит страницу. Это работает нормально, но я стремлюсь упростить процесс с помощью jQuery и AJAX, чтобы не нужно было обновлять страницу.

Какой лучший способ сделать это? Я предполагаю, что мне нужно будет настроить прослушиватель события для нажатия кнопки, выполнить AJAX-вызов на URL-адрес, такой как «Email / Add». Я заблудился, выяснив, какой тип информации следует возвращать из этого действия контроллера, и как эта информация может быть проанализирована на стороне клиента для обновления таблицы адресов электронной почты. Есть ли хорошие образцы этого?

Answer 1

Вы должны использовать XML или JSON. Я предпочитаю JSON, потому что его легко разобрать на стороне JavaScript.

В обработчике кликов для кнопки добавления выполните AJAX-вызов некоторого пути MVC, чтобы указать, какое электронное письмо было добавлено. Сделайте код для этого пути вставьте указанный адрес электронной почты. Затем просто верните результат:

{
    result: 'SUCCESS',
    description: 'Email Added.'
}

Затем в вашем обратном вызове AJAX проанализируйте результат следующим образом:

//This function abstracts away the strangeness in dealing with the eval method and returning JSON objects
//If there is a better way, let me know
function ParseJSON(jsonText) {
    var ret = null;
    eval('ret = '+jsonText);
    return ret;
}

var ret = ParseJSON(response.value);;

if(ret.result == 'SUCCESS') {
    //Add a new TR to your table here
} else {
    //Display the error message here
    // alert(ret.description);
}

Результат 'УСПЕХ' означает, что сервер уже добавил электронное письмо в базу данных. Итак, мы просто динамически добавляем строку в нашу таблицу с помощью JavaScript, и вам не нужно обновлять страницу.

Answer 2

Если вы хотите использовать jquery, вы можете вернуть частичное представление и вставить возвращаемый HTML в ваш текущий документ. div ajaxloading содержит вращающийся gif загрузки. Возвращенное значение вставляется в таблицу как последнее значение. Представление возвращает фрагмент html между тегами tr.

    $("#ajaxLoading").show();

     $.ajax({
         type: "POST",
         url: "/Hoofdgroepen/Add",
         data: "nummer=" + nummer + "&omschr=" + omschr,
         dataType: "html",
         success: function(result) {
             //alert(result);                                
             $("tr:last").after(result);
             $("#ajaxLoading").hide();
             $("#hfdgrpForm").resetForm();
         }
     });

Answer 3

Когда вы применяете anwser от EnganderedMassa, вы также можете использовать возможности на стороне клиента с помощью микро-шаблона . Это техника, используемая богом Джоном Резигом / jQuery для анализа и форматирования наборов данных, возвращаемых из поста. Ваш стол - идеальное место для достижения этой цели.

Вот два сообщения в блоге, которые используют эту технику (они основаны на .Net, но освещают сторону .Net).

Encosia - JTemplate

.Net и микро шаблон Джона Ресига