时间戳

首页 > 解决方案 > 如何使用 AJAX 发布对象并使用 ASP.NET Core MVC 控制器获取？

c# - 如何使用 AJAX 发布对象并使用 ASP.NET Core MVC 控制器获取？

问题描述

我有一个带有 ASP.NET Core 的页面，想Product用 AJAX 表单保存模型。当我单击提交按钮以使用 AJAX 发布数据时出现问题，我在控制器中得到一个空模型。

我在控制器中的问题

这个模型Product：

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>

这是控制器：

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

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

这是视图中的表单：

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

我哪里错了？以及如何解决？

标签： c#jqueryasp.netajaxforms

解决方案

你可以试试这段代码：

<script type="text/javascript">
    $(document).ready(function(){
       $("#submitdate").click(function(evt){
             evt.preventDefault();
             $.post('@Url.Action("Index","Home")', $("form").serialize(), function(data, status){
                  if(status == "success")
                  {
                     //add code
                  }
             })
       })
    })
  
</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>

推荐阅读