Отправка формы как объекта через AJAX

Question

У меня есть веб-страница, которая позволяет пользователям обновлять свои рецепты. На этой странице у меня есть простая форма для пользователей, у которых нет javascript, и у меня есть функция AJAX для пользователей, у которых есть javascript. Когда я отправляю свою форму, она отлично привязывается к моей модели MVC, и все идет хорошо. Ниже приведен пример запроса вида:

Как вы можете видеть, мой Ingredients массив содержит объект, обладающий свойствами Ingredient и Optional. Все это прекрасно.

Проблема возникает, когда я пытаюсь отправить запрос AJAX, предположительно, с той же структурой, что и моя форма. Вот скриншот запроса AJAX.

Как вы можете видеть, вместо того, чтобы быть раскладывали как Ingredients[index].Ingredient это Ingredients[index][Ingredient]. Это разрушает привязку модели MVC, и я не могу получить доступ к каким-либо свойствам. Массив Steps по-прежнему связывает все, даже несмотря на отсутствие индекса.

Вот мой AJAX запрос:

$.ajax({ 
     type: "POST", 
     url: '/ajax/update_rec', 
     contentType: "application/x-www-form-urlencoded", 
     data: ajaxrecipe, 
     error: function() { 
      alert("There was an error updating your recipe, please try again"); 
     }, 
     success: function (result) { 
      alert("success"); 
     } 
    }); 

Вот структура ajaxrecipe

var ajaxrecipe = 
     { 
      RecipeId: $('input#RecipeId').val(), 
      RecipeTitle: $('.recipe-information-area > h3.title').val(), 
      Ingredients: [], 
      Steps: [] 
     }; 

ajaxrecipe.Ingredients.push({ Ingredient: ingrediento, Optional: optionalo}); 
ajaxrecipe.Steps.push(step); 

Я обыскивал Интернет для решения этого, но они все придумали бесполезно. Я пробовал JSON.stringify, datatype: "json", contenttype: "application/json charset utf-8" и traditional: true.

Если бы я мог просто отправить запрос AJAX таким же образом, как это делает форма, все должно работать нормально.

Answer 1

Предполагая, что вы хотите разместить свои элементы формы, то вы просто должны

$.ajax({ 
    type: "POST", 
    url: '@Url.Action("update_rec", "ajax")', // don't hard code your url's! 
    data: $('form').serialize(), // serialize the form 
    .... 

Если по какой-то причине вам необходимо вручную создать объект, используя массивы, то вам нужно добавить traditional: true, и stringify объект

$.ajax({ 
    type: "POST", 
    url: '@Url.Action("update_rec", "ajax")', 
    traditional: true, 
    contentType: "application/json; charset=utf-8", 
    data: JSON.stringify({ model: ajaxrecipe }), // assumes the method parameter is named 'model' 
    .... 

Answer 2

Насколько вы знакомы с привязкой к модели? Я думаю, что проблема заключается в вашей модели, которую вы забыли опубликовать.

Вполне возможно сделать модель в C#, а затем привязать ее через объект, который вы отправляете (как JSON).

Позволь мне дать вам пример:

Модели:

public class Recipe 
{ 
    public int RecipeId { get; set; } 
    public string RecipeTitle { get; set; } 
    public List<Ingredient> Ingredients { get; set; } 
    public List<string> Steps { get; set; } 
} 

public class Ingridient 
{ 
    public string Ingridient { get; set; } 
    public bool Optional { get; set; } 
} 

Вы можете сделать ваш контроллер принимает модель в качестве первого аргумента.

[HttpPost] 
[ActionName("update_rec")] 
public ActionResult UpdateRecipe(Recipe recipe) 
{ 
    // do your logic. 
} 

Тогда вам нужно только убедиться, что ваш jQuery-код разместил его правильно.

var ajaxrecipe = { 
    RecipeId: $('input#RecipeId').val(), 
    RecipeTitle: $('.recipe-information-area > h3.title').val(), 
    Ingredients: [], 
    Steps: [] 
}; 

ajaxrecipe.Ingredients.push({ Ingredient: ingrediento, Optional: optionalo}); 
ajaxrecipe.Steps.push(step); 

$.ajax({ 
    type: "POST", 
    url: '/ajax/update_rec', 
    data: { recipe: JSON.stringify(ajaxrecipe) }, 
    error: function() { 
     alert("There was an error updating your recipe, please try again"); 
    }, 
    success: function (result) { 
     alert("success"); 
    } 
}); 

Я не проверял это, но делал подобные вещи раньше. Пожалуйста, расскажите мне о ваших результатах!