Ajax POST 不將 model 發布到 asp.net 核心 6 中的 controller

Question

我正在嘗試從 Kendo 對話框引發的事件將數據發布到我的 controller。 但是，model 總是以 null 的形式出現。我嘗試了 StackOverflow 本身提到的各種步驟，但沒有一個有效。

我的Ajax電話

function onSubmit(e) {
          
           var myModel={
                  Id:0,
                  RoleNameEn:$('#UserRolePopup').find('#RoleNameEn')[0].value,
                  RoleNameAr:$('#UserRolePopup').find('#RoleNameAr')[0].value,
                  IsActive:$('#UserRolePopup').find('#IsActive')[0].value,
                  CreatedBy:0,
                  CreatedDate:"",
                  ModifiedBy:0,
                  ModifiedDate:""
           };

           $.ajax({
              type: "POST",
              url: "@Url.Action("Delete", "UserRole")", //'/UserRole/Create'
              contentType: 'application/json; charset=utf-8',
              data: JSON.stringify(myModel) ,
              success: function (result) {
                console.log(result);
              },
              error: function (result, status) {
                console.log(result);
              }
            });

        }

我的 HTML

<div id="example">  
    @(Html.Kendo().Dialog()
    .Name("dialog")
    .Title("Add/Edit User Role")
    .Content("<div id='UserRolePopup'>  <div class='form-group; k-content'> <label for='RoleNameEn'>User role English</label>    <input type='text' class='form-control' id='RoleNameEn' placeholder='Role name in english'/>      </div> <div class='form-group'>    <label for='RoleNameAr'>User role Arabic</label>    <input type='text' class='form-control' id='RoleNameAr' placeholder='Role name in Arabic'>      </div>  <div class='form-check'>        <input class='form-check-input' type='checkbox' value='' id='IsActive'>    <label class='form-check-label' for='IsActive'>Is Active</label>  </div> </div>")
    .Width(400)
    .Modal(true)
    .Actions(actions =>
    {
    actions.Add().Text("Cancel");
    actions.Add().Text("Submit").Primary(true).Action("onSubmit");
    })
    .Events(ev => ev.Close("onClose").Open("onOpen"))
    )
</div>

現在捕獲的數據被傳遞給controller。

您可以看到該值正在傳遞給 controller。

我的 Controller

[HttpPost]
        public JsonResult Delete([FromBody] UserRoleDTO userRoleDTO)
        {
            return new JsonResult(userRoleDTO);
        }

我的Program.cs文件

builder.Services.AddMvc()
           .AddNewtonsoftJson(options =>
           options.SerializerSettings.ContractResolver =
              new DefaultContractResolver());

builder.Services.AddControllers().AddNewtonsoftJson();

我試過的東西

• 我使用[FromBody],[FromForm] - 兩者都不起作用
• 將 ajax 中的datatype更改為text並傳遞給以字符串作為參數的方法 - 無效
• 嘗試了各種方式傳遞JSON 。 不工作
• 將JSON更改為NewtonSoft.Json 。 那也沒用

有人可以告訴我是否缺少任何配置或為什么這不起作用

Answer 1

也許你可以嘗試使用 model 創建一個新的 object，我試過了，它工作正常。

你可以參考下面的代碼。

刪除.cshtml：

@model AjaxTest1.Models.UserRoleDTO
<div id="example">
        <div id='UserRolePopup'>  
            <div class='form-group; k-content'> 
                <label for='RoleNameEn'>User role English</label>    
                <input type='text' class='form-control' id='RoleNameEn' placeholder='Role name in english'/>
            </div> 
            <div class='form-group'>    
                <label for='RoleNameAr'>User role Arabic</label>    
                <input type='text' class='form-control' id='RoleNameAr' placeholder='Role name in Arabic'/>      
            </div>  
            <div class='form-check'>        
                <input class='form-check-input' type='checkbox' value='' id='IsActive'/>    
                <label class='form-check-label' for='IsActive'>Is Active</label>  
            </div> 
        </div>
        <div class="form-group">
                <button type="submit" onclick="onSubmit()">Submit</button>
        </div>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
<script>
    function onSubmit() {
            @Model mydata=new Object();
            mydata.Id = 0;
            mydata.RoleNameEn = $('#UserRolePopup').find('#RoleNameEn')[0].value;
            mydata.RoleNameAr = $('#UserRolePopup').find('#RoleNameAr')[0].value;
            mydata.IsActive = $('#UserRolePopup').find('#IsActive')[0].value;
            mydata.CreatedBy = "0";
            mydata.CreatedDate = "";
            mydata.ModifiedBy = "0";
            mydata.ModifiedDate = "";
            
            $.ajax({
              type: "POST",
              url: "/Home/Delete",
              contentType: 'application/json',
              data: JSON.stringify(mydata) ,
              success: function (result) {
                alert("success");
                console.log(result);
              },
              error: function (result, status) {
                alert("123");
                console.log(result);
              }
            });
    }
    
</script>

請注意，您需要使用@model來引用您的 model。

Controller：

[HttpPost]
public JsonResult Delete([FromBody]UserRoleDTO userRoleDTO)
{
     return Json(userRoleDTO);
}

測試結果：

用戶角色DTO

開發者工具

對不起，我沒有足夠的積分，所以我不能直接上傳截圖。

Answer 2

這是由於我在 model 中的一個property中的datatype不匹配。IsActive 在IsActive中是Int並且由於我傳遞了一個空字符串，所以它沒有正確反序列化。

我使用下面的代碼調試了這個

   [HttpPost]
    public JsonResult Delete(UserRoleDTO userRoleDTO)
    {
        using (var bodyReader = new StreamReader(HttpContext.Request.Body))
        {
            Task<string> requests = bodyReader.ReadToEndAsync();

            UserRoleDTO? userRole = JsonSerializer.Deserialize<UserRoleDTO>(requests.Result);
        }

        return new JsonResult(userRoleDTO);
    }

requests.Result是我在Ajax調用中傳遞的JSON數據。 但是deserializing是拋出錯誤。

問題解決后，將輸入參數更改為[FromBody] UserRoleDTO userRoleDTO ，現在輸入參數中包含值

我仍然想知道為什么 controller(delete) 中的實際方法即使無法匹配 model 數據類型也能正常工作。