Как отправить модель в jQuery $ .ajax () после запроса в метод контроллера MVC

Question

При автоматическом обновлении с использованием следующего кода я предполагал, что при публикации сообщения модель автоматически отправляется на контроллер:

$.ajax({
    url: '<%=Url.Action("ModelPage")%>',
    type: "POST",
    //data:  ??????
    success: function(result) {
        $("div#updatePane").html(result);
    },

    complete: function() {
    $('form').onsubmit({ preventDefault: function() { } });

    }
});

Каждый раз, когда появляется сообщение, мне нужно увеличить значение атрибута в модели:

public ActionResult Modelpage(MyModel model)
    {                   
        model.value = model.value + 1;

        return PartialView("ModelPartialView", this.ViewData);
    }

Но модель не передается контроллеру, когда страница публикуется с запросом jQuery AJAX. Как я могу отправить модель в запросе AJAX?

Answer 1

Простой ответ (в MVC 3 и выше, может быть, даже 2): вам не нужно делать ничего особенного.

Пока ваши параметры JSON соответствуют модели, MVC достаточно умен, чтобы создать новый объект из параметров, которые вы ему задаете. Параметры, которых там нет, просто по умолчанию.

Например, Javascript:

var values = 
{
    "Name": "Chris",
    "Color": "Green"
}

$.post("@Url.Action("Update")",values,function(data)
{
    // do stuff;
});

Модель:

public class UserModel
{
     public string Name { get;set; }
     public string Color { get;set; }
     public IEnumerable<string> Contacts { get;set; }
}

Контроллер:

public ActionResult Update(UserModel model)
{
     // do something with the model

     return Json(new { success = true });
}

Answer 2

Если вам нужно отправить полную модель на контроллер, вам сначала нужно, чтобы модель была доступна для вашего кода JavaScript.

В нашем приложении мы делаем это с помощью метода расширения:

public static class JsonExtensions
{
    public static string ToJson(this Object obj)
    {
        return new JavaScriptSerializer().Serialize(obj);
    }
}

На виде мы используем его для рендеринга модели:

<script type="javascript">
  var model = <%= Model.ToJson() %>
</script>

Затем вы можете передать переменную модели в ваш вызов $ .ajax.

Answer 3

У меня есть страница MVC, которая представляет JSON выбранных значений из группы переключателей.

Я использую:

var dataArray = $.makeArray($("input[type=radio]").serializeArray());

Составить массив из их имен и значений. Затем я конвертирую его в JSON с помощью:

var json = $.toJSON(dataArray)

, а затем отправьте его с помощью jQuery's ajax () на контроллер MVC

$.ajax({
url: "/Rounding.aspx/Round/" + $("#OfferId").val(),
type: 'POST',
dataType: 'html',
data: json, 
contentType: 'application/json; charset=utf-8',
beforeSend: doSubmitBeforeSend,
complete: doSubmitComplete,
success: doSubmitSuccess});

, который отправляет данные как собственные данные JSON.

Затем вы можете захватить поток ответов и десериализовать его в собственный объект C # / VB.net и манипулировать им в вашем контроллере.

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

Сопоставьте ваш объект JSON с вашей моделью, и связанный процесс, приведенный ниже, должен автоматически десериализовать данные в ваш контроллер. Это прекрасно работает для меня.

Статья по десериализации MVC JSON

Answer 4

Это можно сделать, создав объект javascript, соответствующий вашей модели mvc. Имена свойств javascript должны точно соответствовать модели mvc, иначе автобиндинг не будет происходить с постом. Если ваша модель находится на стороне сервера, вы можете управлять ею и сохранять данные в базе данных.

Я достигаю этого либо событием двойного щелчка по строке сетки, либо событием щелчка на какой-то кнопке.

@model TestProject.Models.TestModel

<script>

function testButton_Click(){
  var javaModel ={
  ModelId: '@Model.TestId',
  CreatedDate: '@Model.CreatedDate.ToShortDateString()',
  TestDescription: '@Model.TestDescription',
  //Here I am using a Kendo editor and I want to bind the text value to my javascript
  //object. This may be different for you depending on what controls you use.
  TestStatus: ($('#StatusTextBox'))[0].value, 
  TestType: '@Model.TestType'
  }

  //Now I did for some reason have some trouble passing the ENUM id of a Kendo ComboBox 
    //selected value. This puzzled me due to the conversion to Json object in the Ajax call. 
  //By parsing the Type to an int this worked.

  javaModel.TestType = parseInt(javaModel.TestType);

  $.ajax({
      //This is where you want to post to.
      url:'@Url.Action("TestModelUpdate","TestController")', 
      async:true,
      type:"POST",
      contentType: 'application/json',
      dataType:"json",
      data: JSON.stringify(javaModel)
  });
}
</script>


//This is your controller action on the server, and it will autobind your values 
//to the newTestModel on post.

[HttpPost]
public ActionResult TestModelUpdate(TestModel newTestModel)
{
 TestModel.UpdateTestModel(newTestModel);
 return //do some return action;
}

Answer 5

Я думаю, вам нужно явно передать атрибут данных. Один из способов сделать это - использовать data = $ ('# your-form-id'). serialize ();

Этот пост может быть полезным. Пост с JQuery и AJAX

Взгляните на документ здесь .. Ajax сериализуется

Answer 6

вы можете создать переменную и отправить в ajax.

var m = { "Value": @Model.Value }

$.ajax({
    url: '<%=Url.Action("ModelPage")%>',
    type: "POST",
    data:  m,
    success: function(result) {
        $("div#updatePane").html(result);
    },

    complete: function() {
    $('form').onsubmit({ preventDefault: function() { } });

    }
});

Все поля модели должны быть в м.

Answer 7

В упоминании вызова ajax -

data:MakeModel(),

используйте функцию ниже для привязки данных к модели

function MakeModel() {

    var MyModel = {};

    MyModel.value = $('#input element id').val() or your value;

    return JSON.stringify(MyModel);
}

Присоедините атрибут [HttpPost] к действию вашего контроллера

на POST эти данные станут доступны