如何使用 AJAX POST 對象並使用 ASP.NET Core MVC 控制器獲取？

Question

我有一個包含 ASP.NET Core 的頁面，我想用 AJAX 表單保存模型Product 。 當我單擊提交按鈕使用 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>

我錯在哪里？ 以及如何解決？

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

請注意在模型綁定 JSON 帖子時需要使用[FromBody] 。