如何使用 ajax 调用将模型从剃刀视图传递到控制器？

Question

我正在构建 .NET 5.0 应用程序。我想通过 AJAX 调用将模型从 Razor 页面发送到名为 AJAX 的控制器。

我的模型绑定到页面表单。我曾尝试传递单个字符串，但无法在另一端找到值。我在 JSON 字符串和控制器方法中的参数名称相同。

我已经尝试了 [FromBody] 标签和其他几种方法。我的网络显示数据由我在参数中收到 null 传递。

Page Form

<div class="form-group row mb-3">
   <div class="col">
      <div class="input-group">
         <span class="input-group-addon"><i class="fa fa-user-circle"></i></span>
         <input asp-for="IndexEmail.Name" class="form-control" type="text" name="name" placeholder="Name" />
      </div>
   </div>
</div>
<div class="form-group row">
   <div class="col">
      <input value="Send" onclick="SendEmail()" class="btn btn-primary" type="submit" />
   </div>
</div>

AJAX Call to Controller: 1

function SendEmail() {
    debugger;
    if ($("form").valid()) {

        var jsonData = JSON.stringify({Name: $("#displayname").val(),Subject: $("#subject").val(),EmailAddress: $("#emailaddress").val(),MessageBody: $("#messagebody").val()});
        $("body").addClass("loading");
        $.ajax({

            type: "POST",
            url: "/Ajax/SendGrid_SendEmail",
            data: jsonData,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            error: function (xhr, status, error) {
            }
        }).done(function (data) {

            $("body").removeClass("loading");

        });
    }
}

AJAX调用控制器：2

 function SendEmail() {
        debugger;
        if ($("form").valid()) {
            //var email = {};
            //email.Name = $("#displayname").val();
            var jsonData = { EmailAddress: $("#emailaddress").val(), MessageBody: $("#messagebody").val(), Name: $("#displayname").val(), Subject: $("#subject").val()};
            $("body").addClass("loading");
            $.ajax({

                type: "POST",
                url: '@Url.Action("SendGrid_SendEmail", "Ajax")',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: { 
                    data: $("#subject").val() 
                },
                error: function (xhr, status, error) {
                    }
                }).done(function (data) {

                $("body").removeClass("loading");

                });
        }
    }

直通 ajax 调用的模型。它绑定到我的剃须刀页面

 public class IndexEmail
    {

        [Required]
        public string Name { get; set; }

        [Required]
        public string Subject { get; set; }

        [Required]
        [EmailAddress]
        public string EmailAddress { get; set; }

        [Required]
        public string MessageBody { get; set; }

    }

控制器方法

[HttpPost]
public async Task<JsonResult> SendGrid_SendEmail(string data)
{
 
}

Answer 1

你用了$("#displayname").val()取值，但是你忘了加上id='displayname'，你还需要在controller函数里加上[FromBody]IndexEmail data

我的测试结果。

我的测试代码。

@model dotnet5MVC.Models.IndexEmail
@{
    Layout = null;
}
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256- iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>

<div class="form-group row mb-3">
    <div class="col">
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-user-circle"></i></span>
            <input asp-for="@Model.Name" class="form-control" id="displayname" type="text" name="name" placeholder="Name" />
        </div>
    </div>

</div>


<div class="form-group row">
    <div class="col">
        <input value="Send" onclick="SendEmail()" class="btn btn-primary" type="submit" />
    </div>
</div>


<script>
 function SendEmail() {
        var jsonData = JSON.stringify({ Name: $("#displayname").val(), Subject: $("#subject").val(), EmailAddress: $("#emailaddress").val(), MessageBody: $("#messagebody").val() });
        $("body").addClass("loading");
        $.ajax({

            type: "POST",
            url: '@Url.Action("SendGrid_SendEmail", "Ajax")',
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            data: jsonData ,
            error: function (xhr, status, error) {
                }
            }).done(function (data) {

            $("body").removeClass("loading");

            });
}
</script>

我在控制器中的测试代码。

public class AjaxController : Controller
{
    [HttpPost]
    public async Task<JsonResult> SendGrid_SendEmail([FromBody]IndexEmail data)
    {
        var aa = data;
        return Json("ok");
    }
}

Answer 2

我找到了解决办法。请参阅下面更新的代码。

表单 HTML，仅用于名称字段。所有其他字段都具有相似的 HTML。唯一的区别是 Id

          <div class="form-group row mb-3">
          <div class="col">
          <div class="input-group"><span class="input-group-addon">
          <i class="fa fa-user-circle"></i></span>
           <input id="displayname" asp-for="IndexEmail.Name" class="form- 
           control" type="text" name="name" placeholder="Name" />
           </div>
          </div>
          </div>

AJAX调用发送按钮

function SendEmail() {
     if ($("form").valid()) {
         var jsonData = { EmailAddress: $("#emailaddress").val(), MessageBody: $("#messagebody").val(), Name: $("#displayname").val(), Subject: $("#subject").val() };

         $("body").addClass("loading");
         $.ajax({

             type: "POST",
             url: "Ajax/SendGrid_SendEmail",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             data: JSON.stringify(jsonData),
             error: function (xhr, status, error) {
             }
         }).done(function (data) {
             debugger;
             $("body").removeClass("loading");

         });
     }
 }

控制器

 [HttpPost]
 public async Task<bool> SendGrid_SendEmail([FromBody] IndexEmail jsonData)
 {
     try
     {}
  }
 catch (Exception e)
     {
     }

Json 控制器操作参数中接收到的数据

如何使用 ajax 调用将模型从剃刀视图传递到控制器？

How to pass model from razor view to controller using ajax call?

c#

razor

asp.net-core

我的测试结果。

我的测试代码。

我在控制器中的测试代码。