Как бы вы передавали объекты с помощью MVC и JQuery AJAX?

Question

Я наконец экспериментирую и пытаюсь выучить MVC после нескольких лет asp.net.
Я привык использовать asp.net AJAX PageMethods, где вы можете передать объект, который автоматически обрабатывается для любого типа параметра в этом методе.

Javascript:

PageMethods.AddPerson({First:"John",Last:"Doe"});

Код-Behind:

[WebMethod]
public static Result AddPerson(Person objPerson)
{
    return Person.Save();
}

Как бы это сделать, используя MVC и jQuery?
Нужно было просто отправить строки и разобрать JSON для объекта?

Answer 1

Это зависит от того, насколько сложными будут данные вашей формы. Давайте использовать пример jQuery:

$.ajax({
    url: '\Persons\AddPerson', // PersonsController, AddPerson Action
    data: { First: "John", Last: "Doe" },
    type: 'POST',
    success: function(data, status)
    {
        alert('Method called successfully!');
    }
});

Итак, мы публикуем две части данных. Если у класса Person есть два свойства: «Первый» и «Последний», то у связывателя модели ASP.NET MVC по умолчанию не должно возникнуть проблем с размещением данных формы в этих свойствах (все остальное будет по умолчанию).

Конечно, вы всегда можете сделать привязку пользовательской модели для типа Person, а затем вы можете взять любые значения формы, какие захотите, и поместить их в любое свойство вообще, или вызвать какую-то другую логику.

Answer 2

У меня есть пост, в котором рассматриваются вызовы AJAX для методов действия ASP.NET MVC. Он охватывает следующие комбинации:

• HTTP GET, POST
• jQuery методы $ .get, $ .getJSON, $ .post
• Отправка параметров в методы действия
• Возвращение параметров (строк и JSON) из методов действия
• Данные формы публикации
• Загрузка частичного представления MVC через AJAX

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

Answer 3

Думаю, я мошенник и делаю следующее:

        $("#ProgressDialog").dialog({
            autoOpen: false,
            draggable: false,
            modal: true,
            resizable: false,
            title: "Loading",
            closeOnEscape: false//,

            //  open: function () { $(".ui-dialog-titlebar-close").hide(); } // Hide close button
        });
       $("form").live("submit", function (event) {
                event.preventDefault();
                var form = $(this);
                $("#ProgressDialog").dialog("open");
                $.ajax({
                    url: form.attr('action'),
                    type: "POST",
                    data: form.serialize(),//USE THIS to autoserialize!
                    success: function (data) {
                        $("#dialog").dialog({height:0});
                    },
                    error: function (jqXhr, textStatus, errorThrown) {
                        alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
                    },
                    complete: function () {
                        $("#ProgressDialog").dialog("close");

                    }
                });
            });
        });

<div id="ProgressDialog" style="text-align: center; padding: 50px;">
    <img src="@Url.Content("~/Content/ajax-loader.gif")" width="128" height="15" alt="Loading" />
</div>

Answer 4

Вы можете сделать что-то вроде этого:

 var person = {};
 person["First"] = $("#FirstName").val();
 person["Last"] = $("#LastName").val();

 $.ajax({
      type: "POST",
      contentType: "application/json; charset=utf-8",
      url: "/Admin/AddPerson",
      data: JSON.stringify(person),
      dataType: "json",
      success: function(result) {

      },
      error: function(result) {

      }
 });

и затем на вашем административном контроллере:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddRelease(Person p)
{
    // Code to add person            

}

Метод JSON.stringify доступен из здесь . Вы также можете использовать модель, а не объект Person в качестве параметра, чтобы вы могли обрабатывать все проверки.

Answer 5

Когда вы отправляете форму через ajax в метод действия на вашем контроллере, включается архитектура ModelBinder, чтобы проанализировать опубликованные значения формы в бизнес-объекты. Вы можете использовать привязку модели несколькими различными способами.

public ActionResult MyAction(MyObject obj)
{
}

В приведенном выше примере связыватель модели неявно пытается создать MyObject из информации, полученной в запросе.

public ActionResult MyAction(FormCollection stuff)
{
   MyObject obj = new MyObject();
   TryUpdateModel(obj);
}

Здесь мы явно пытаемся привязать опубликованные данные формы к объекту, который мы создали. ModelBinder попытается сопоставить опубликованные значения со свойствами объекта.

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

Для ознакомления с привязкой модели см. Здесь .

Для расширенного связывания моделей со списками и словарями, см. Пост Фила Хаака .