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 数据类型也能正常工作。