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

【问题标题】：How to pass model from razor view to controller using ajax call?如何使用 ajax 调用将模型从剃刀视图传递到控制器？
【发布时间】：2023-03-15 07:57:01
【问题描述】：

我正在构建一个 .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)
{
 
}

【问题讨论】：

标签： c# asp.net-core razor

【解决方案1】：

您使用$("#displayname").val()获取值，但您忘记添加id='displayname'，并且您还需要在控制器函数中添加[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>

我在 Controller 中的测试代码。

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

【讨论】：

感谢您的帮助。我很晚才看到你的答案，因为我已经修复了我的代码。你的回答也是正确的。我的问题是在 Controller 中没有使用 FormBody，在 AJAX 调用中没有使用 Json.Stringify。

【解决方案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数据

【讨论】：