AJAX 将模型视图发布到我的控制器答案

【问题标题】：AJAX post a modelview to my controllerAJAX 将模型视图发布到我的控制器
【发布时间】：2018-04-17 13:34:58
【问题描述】：

我正在制作一个网站，版主可以在其中访问某个 pc 部分。这只是我网站上的一个表格。我希望表单通过 AJAX 发布，以便在添加部分后不会刷新。我正在使用 ASP.net Core 2.0 制作应用程序

这是我的看法：

    @model PcBuildAddViewModel
@{
    ViewData["Title"] = "Add";
}
<div class="form-container">
    <form id="AddPcForm" class="form-wrapper" method="post">
        <p>Name:</p>
        <input asp-for="@Model.PcPart._Name" type="text" class="form-control"/>
        <br/>
        <p >Type:</p>
        <div class="form-select">
            <select asp-for="@Model.PcPart._Type" asp-items="@Model.AllTypes">
            </select>
        </div>
        <br/>
        <p>Info:</p>
        <input asp-for="@Model.PcPart.Information" type="text" class="form-control"/>
        <br/>
        <p>Properties:</p>
        <div class="form-select">
            <select asp-for="@Model.Properties" asp-items="@Model.AllProperties" multiple="multiple">
            </select>
        </div>
        <br/>
        <p>Image:</p>
        <input asp-for="@Model.Image" type="file" class="inputfile inputfile-1"/>
        <label asp-for="@Model.Image">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
            </svg> <span>Choose a file&hellip;</span>
        </label>
        <br/>
        <button class="btn btn-1 btn-1e" type="submit">
            <span>Add</span>
        </button>
    </form>
</div>

我想通过 AJAX 发布的视图模型：

public class PcBuildAddViewModel
{
    public List<SelectListItem> AllProperties { get; } = new List<SelectListItem>();
    public List<SelectListItem> AllTypes { get; } = new List<SelectListItem>();
    public IFormFile Image { get; set; }
    public PcPart PcPart { get; set; }
    public List<int> Properties { get; set; }

    public PcBuildAddViewModel()
    {
    }

    public PcBuildAddViewModel(List<Propertie> allProperties, List<string> allTypes)
    {            
        foreach (string type in allTypes)
        {
            SelectListItem listItem = new SelectListItem
            {
                Text = type,
                Value = type
            };
            AllTypes.Add(listItem);
        }

        foreach (Propertie propertie in allProperties)
        {
            SelectListItem listItem = new SelectListItem
            {
                Text = propertie._Value,
                Value = propertie.Id.ToString()
            };
            AllProperties.Add(listItem);
        }
    }
}

我想要接收表单的 Action Post 方法：

[HttpPost]
        public IActionResult AddPcPart(PcBuildAddViewModel viewModel) 
        {
            return RedirectToAction("Add");
        }

最后是我的 AJAX：

$('#AddPcForm').on('submit', function(event) {

        var viewModel = $(this).serialize();


        ajaxPost("/PCBuild/AddPcPart", viewModel);

        event.preventDefault();
    });
function ajaxPost(ul, dt) {
        $.ajax({
            type: "POST",
            url: ul,
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: dt,
            success: ajaxSucces,
            error: function(result) {
                console.log(result);
            }
        });
    }

我希望有人可以帮助我。我已经在没有 AJAX 的情况下尝试过这个，它工作得很好，但是当我通过 AJAX 调用时。我得到一个空视图模型，或者当我将 [Frombody] 放在控制器中我的参数前面时，我得到一个空视图模型。

【问题讨论】：

去掉contentType: "application/json; charset=utf-8",选项（当你使用.serialize()它需要是默认的application/x-www-form-urlencoded; charset=UTF-8'）
还可以尝试在调用 ajax 之前调用 event.preventdefault，因为它是一个 ajax 调用，所以你永远无法确定到达代码需要多少时间
好吧，如果您愿意，您可以继续以 JSON 格式发布，但您需要在操作参数前加上 [FromBody]。
为什么你不尝试 @Html.TextBoxFor(m => m.PcPart._Name) 等等。那么你确定绑定

标签： ajax asp.net-mvc asp.net-core asp.net-core-mvc asp.net-ajax

【解决方案1】：

感谢发布答案的 Stephen Muecke。问题是 contentType 需要是默认值，所以我刚刚在我的 AJAX 帖子中删除了 contentType 参数。之后我删除了 [FromBody]，因为不再需要它了。

【讨论】：