使用带有锚点和按钮的 AJAX 调用控制器操作

Question

我的控制器上有一个 IActionResult，它通过 AJAX 返回一个局部视图：

[HttpGet]
[Route("/propertycoverages/loss")]
public IActionResult GetNewLoss()
{
    return PartialView("_Loss");
}

如果我在 Razor 视图中添加<a> 标记，其中包含以下内容：

<a asp-controller="PropertyCoverages" asp-action="GetNewLoss" id="loss-btn" data-ajax="true" data-ajax-update="losses" data-ajax-success="addLoss" data-ajax-method="GET">Add</a>

在<a> 标签中生成以下 HTML 属性：href="/propertycoverages/loss"

它按预期工作，并在页面内返回部分视图。但是，如果我尝试使用按钮：

<button asp-controller="PropertyCoverages" asp-action="GetNewLoss" id="loss-btn" type="submit" data-ajax="true" data-ajax-update="losses" data-ajax-success="addLoss" data-ajax-method="GET">Add</button>

在<button> 标签中生成以下 HTML 属性：formaction="/propertycoverages/loss"

然后我被重定向到/propertycoverages/loss，这不是我想要的。 有没有办法让按钮的行为类似于<a> 标签？

注意：这些元素位于 <form> 中。我还尝试将<button> 从type="submit" 切换到type="button"，但没有调用控制器操作。

Answer 1

您需要将 JavaScript 方法附​​加到您的按钮单击操作。

<button onclick="myFunction()">Click me</button>

在JS方法中可以回调action获取HTML并放在页面中的AJAX调用成功方法中。

    function onClick() {
    var url = [setURL];

        $.ajax({
            type: "GET",
            url: url,
            data: { },
            success: function (response) {
                $('#[setElementToReplace]').html(response);
            }
        });
    }

Answer 2

您好，从提交按钮调用控制器动作主要有三种方式。

方式一：使用简单的表单

@using (Html.BeginForm("ActionName", "ControllerName"))
{
    <input type="submit" name="add" value="Add" />
    }

注意：默认是get请求，如果需要可以修改formmethod = post

方式2：使用html属性

 @using (Html.BeginForm())
{

 <input type="submit" name="add" value="Add" formaction="/anycontrollername/anyactionname" formmethod="get"
/>
}

方式3：使用jquery

  @using (Html.BeginForm())
{

 <input type="submit" name="add" value="Add" id=”save”
/>
}

$(document).ready(function () {

    $("#save").click(function () {
        $("form").attr("action", "/anycontroller /anyaction");
    });
});

看来第二种方式适合你的要求，

希望以上答案有用。