如何让我的ajax方法从控制器调用方法

Question

我有一个 .net 6 项目，其中有一个服务发送电子邮件并在成功时返回 bool。我有一个控制器调用该方法并返回 Json（值成功）。我还可以看到表单所在的位置以及我的 ajax 方法从控制器调用该方法的位置。

问题是，当我单击提交按钮提交表单时，我无法到达控制器中方法的断点，因此我认为 ajax 方法未正确调用。发生的情况是，页面重新加载。有人可以帮助我吗，我是 ajax 和 JQuery 的新手

控制器方法：

[HttpPost]
public async Task<IActionResult> PreInscription([FromBody] 
PreInscription preInscription){

    var inscriptionService = 
    serviceProvider.GetRequiredService<IInscriptionService>();

        if (ModelState.IsValid)
        {
            var isSend = await 
        inscriptionService.SendEmailPreInscription(preInscription);

            if (isSend)
                return Json(new { response = "success" });
        }
        return Json(new { response = "failed" });
}

查看：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script>

    function runMethod(){
        $.ajax({
            url: '@Url.ActionLink("PreInscription", "Inscription")',
            type: 'POST',
            dataType: 'Json',
            async: true,
            contentType: "application/json; charset=utf-8",
            success: function (response) {
                alert(response);
            }
        });
    }

    $(document).ready(function () {

        $('form').submit(function () {
            runMethod();
        });

    });
</script>


<form asp-action=""> 
  <button id="submitButton" class="btn btn-large btn-theme margintop10" 
    type="submit">Envoyer</button>
</form>

Answer 1

您的代码中似乎存在一些问题。让我们一步一步地检查它们并纠正它们：

控制器方法参数： 您的控制器方法 PreInscription 采用 PreInscription 类型的参数，但您的 AJAX 调用在请求正文中不包含任何数据。您应该将数据从表单传递到服务器。您可以使用 serialize() 来执行此操作。

防止默认表单提交： 为了防止以传统方式提交表单，您应该在提交事件处理程序中使用 event.preventDefault() 。

警报显示：显示 JSON 响应时，您应该指定 response.response，因为您的 JSON 响应包含名为“response”的属性。

这是更正后的代码：

控制器方法：

[HttpPost]
public async Task<IActionResult> PreInscription([FromBody] PreInscription preInscription)
{
    var inscriptionService = serviceProvider.GetRequiredService<IInscriptionService>();

    if (ModelState.IsValid)
    {
        var isSend = await inscriptionService.SendEmailPreInscription(preInscription);

        if (isSend)
            return Json(new { response = "success" });
    }
    return Json(new { response = "failed" });
}

查看：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script>
    function runMethod() {
        $.ajax({
            url: '@Url.Action("PreInscription", "YourControllerName")',
            type: 'POST',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ /* Your form data here */ }), // Pass form data
            success: function (response) {
                alert(response.response); // Use response.response to access the JSON property
            }
        });
    }

    $(document).ready(function () {
        $('form').submit(function (event) {
            event.preventDefault(); // Prevent default form submission
            runMethod();
        });
    });
</script>

<form asp-controller="YourControllerName" asp-action="PreInscription">
    <!-- Your form fields here -->
    <button id="submitButton" class="btn btn-large btn-theme margintop10" type="submit">Envoyer</button>
</form>

将“YourControllerName”替换为 PreInscription 操作所在控制器的实际名称。

在 AJAX 调用的数据字段中，您应该传递要提交到服务器的实际表单数据。您可以使用 jQuery 的 serialize() 函数来序列化表单数据。确保您的表单字段具有与 PreInscription 模型的属性相匹配的正确名称属性。

通过这些更改，您的表单现在应该通过 AJAX 将数据提交到控制器的 PreInscription 方法，并且您应该能够到达控制器中的断点。