C# 如何使用AJAX发布对象并使用ASP.NET核心MVC控制器获取？

我有一个ASP.NET核心的页面，我想用AJAX表单保存模型，

Product

。 当我单击submit按钮用AJAX发布数据时，问题就出现了，我在控制器中得到了一个空模型

此型号

产品

：

public class Product
{
    [Key]
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    public string Model { get; set; }
    public uint price { get; set; }
    public string Descriprion { get; set; }
}

这是AJAX代码：

<script type="text/javascript">
    $(document).on('click', '#submitdate', function (evt) {
        evt.preventDefault();
        var data = new FormData();

        $('input').each(function (index,filds) {
            data.append($(filds).attr('name'), $(filds).val());
        });
        
        $.ajax({
            type: "POST",
            url: '@Url.Action("Index","Home")',
            data: data
        });
    });
</script>

这是视图中的表单：

<form method="post" enctype="multipart/form-data">
                <div class="modal-body form-horizontal">
                    <div class="row">
                    
                        <div class="form-group">
                            <label asp-for="ProductName" class="col-lg-2 col-sm-2 control-label"></label>
                            <div class="col-lg-6">
                                <input asp-for="ProductName" name="ProductName" class="form-control" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label asp-for="Model" class="col-lg-2 col-sm-2 control-label"></label>
                            <div class="col-lg-6">
                                <input asp-for="Model" name="Model" class="form-control" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label asp-for="price" class="col-lg-2 col-sm-2 control-label"></label>
                            <div class="col-lg-6">
                                <input asp-for="price" name="price" class="form-control" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label asp-for="Descriprion" class="col-lg-2 col-sm-2 control-label"></label>
                            <div class="col-lg-6">
                                <input asp-for="Descriprion" name="Descriprion" class="form-control" />
                            </div>
                        </div>  
                    </div>
                </div>
                <input type="button" id="submitdate" class="btn btn-submit" value="save" />    
            </form>

我错在哪里？如何解决它？

您可以尝试以下代码：

$（文档）.ready（函数（）{
$（“#提交日期”）。单击（函数（evt）{
evt.preventDefault（）；
$.post（'@Url.Action（“Index”，“Home”），$（“form”）.serialize（），函数（数据，状态）{
如果（状态=“成功”）
{
//添加代码
}
})
})
})

您可以尝试以下代码：

$（文档）.ready（函数（）{
$（“#提交日期”）。单击（函数（evt）{
evt.preventDefault（）；
$.post（'@Url.Action（“Index”，“Home”），$（“form”）.serialize（），函数（数据，状态）{
如果（状态=“成功”）
{
//添加代码
}
})
})
})

---

我无法找到一种方法使它与您尝试过的FormData方法一起工作。但是，我能够让它以JSON的形式发送数据

要执行此方法，您需要进行以下更改

将jQuery更改为

<script type="text/javascript">
    $(document).on('click', '#submitdate', function (evt) {         
        evt.preventDefault();           
        var data = {}; 
        $('input').each(function (index, filds) {

            var $filds = $(filds);

            if ($filds.attr('name')) {                  
                var val = $filds.val();
                if ($filds.hasClass("js-is-int")) {
                    val = parseInt(val);
                }
                data[$filds.attr('name')] = val;      
            }              
        });
            
            $.ajax({
                type: "POST",
                url: '@Url.Action("Index","Home")',
                data: JSON.stringify(data),   
                contentType: "application/json; charset=utf-8"
            });
        });
</script>

---

注意

[FromBody]

的使用，这是在对JSON帖子进行模型绑定时需要的。

我无法找到一种方法使它与您尝试过的FormData方法一起工作。但是，我能够让它以JSON的形式发送数据

要执行此方法，您需要进行以下更改

将jQuery更改为

<script type="text/javascript">
    $(document).on('click', '#submitdate', function (evt) {         
        evt.preventDefault();           
        var data = {}; 
        $('input').each(function (index, filds) {

            var $filds = $(filds);

            if ($filds.attr('name')) {                  
                var val = $filds.val();
                if ($filds.hasClass("js-is-int")) {
                    val = parseInt(val);
                }
                data[$filds.attr('name')] = val;      
            }              
        });
            
            $.ajax({
                type: "POST",
                url: '@Url.Action("Index","Home")',
                data: JSON.stringify(data),   
                contentType: "application/json; charset=utf-8"
            });
        });
</script>

---

请注意使用

[FromBody]

这是在模型绑定JSON帖子时需要的。

您可以尝试添加输入[id=“submitdate”]类型峰会。您可以尝试添加输入[id=“submitdate”]类型峰会。我无法在控制器中的

索引处获取模型，请告诉我应该在参数中写入什么，以及如何获取数据。我在C#Controller bro遇到问题。保存值时，可以按模型获取值。[属性]我无法在Controller at
Index
中获取模型，请告诉我应该在参数中写入什么以及如何获取数据。我在C#Controller bro遇到问题。保存值时，可以按模型获取值。[属性]
<form method="post">
    <div class="modal-body form-horizontal">
        <div class="row">
            <div class="form-group">
                <label asp-for="ProductName" class="col-lg-2 col-sm-2 control-label"></label>
                <div class="col-lg-6">
                    <input asp-for="ProductName" name="ProductName" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label asp-for="Model" class="col-lg-2 col-sm-2 control-label"></label>
                <div class="col-lg-6">
                    <input asp-for="Model" name="Model" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label asp-for="price" class="col-lg-2 col-sm-2 control-label"></label>
                <div class="col-lg-6">
                    <input asp-for="price" name="price" class="form-control js-is-int"/>
                </div>
            </div>
            <div class="form-group">
                <label asp-for="Descriprion" class="col-lg-2 col-sm-2 control-label"></label>
                <div class="col-lg-6">
                    <input asp-for="Descriprion" name="Descriprion" class="form-control" />
                </div>
            </div>
        </div>
    </div>
    <input type="button" id="submitdate" class="btn btn-submit" value="save" />
</form>

[HttpPost]
public IActionResult Index([FromBody]Product model)
{
    _context.products.Add(model);
    _context.SaveChanges();

    return Json(new { status = "success", message = "successfully save new product" });
}