通过 AJAX 发送类似对象的表单

Question

我有一个网页，允许用户更新他们的食谱。在此页面上，我为没有 javascript 的用户提供了一个简单的表单，并且为拥有 javascript 的用户提供了 AJAX 功能。当我提交我的表单时，它完美地绑定到我的 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

假设您想要post您的表单控件，那么您只需要

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

如果出于某种原因您需要使用数组手动构造对象，则需要添加 traditional: true, 并将对象字符串化

$.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

您对模型绑定有多熟悉？我认为问题在于您的模型本身，您忘记了 post.

完全可以在 C# 中创建一个模型，然后通过您 post（如 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-代码 post 正确无误。

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");
    }
});

我没有测试过这个，但以前做过类似的事情。请告诉我你的结果！

通过 AJAX 发送类似对象的表单

Sending form like object through AJAX

ajax

asp.net-mvc

jquery

json

model-binding