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

Question

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

my problem in the controller

这个型号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>

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

Answer 1

你可以试试这个代码：

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

Answer 2

我无法找到一种方法使其与您尝试过的 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>

并将表单更改为此

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

请注意，enctype="multipart/form-data" 不是必需的。
我已将 js-is-int 类添加到价格输入中。这是因为它在服务器上的值是一个 uint。如果这是作为字符串发送的，则模型绑定不起作用。所以我添加了这个类，以便在创建数据时使用 parseInt 将其转换为整数。

最后控制器逻辑变成了这个

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

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

注意[FromBody] 的使用，当您在模型绑定 JSON 帖子时需要它。