AJAX - 发布到 MVC 控制器方法而不重新加载页面

Question

我创建了一个 MVC 视图页面，当用户单击一个按钮时，会调用一个控制器方法。该方法返回一个文本表达式。然后，此表达式将显示在弹出消息中。

单击按钮时弹出功能起作用，但是它具有导致页面重新加载的不良副作用。有没有办法防止这种情况发生？

这是呈现按钮的 HTML：

<button id="btnListGroups" title="List the groups the selected service ID is a member of">List Groups</button>

这里是 JavaScript：

$(function () {
    $("#btnListGroups").click(function () {
        var val = $("#ddlServiceID").val();
        $.post("/Home/GetGroups", { serviceID: val }, function (data, textStatus) 
        {
            alert(data);
        });
    });
})

最后，这是 Controller 方法：

public partial class HomeController : Controller
{
    public MvcHtmlString GetGroups(string serviceID)
    {
        ADHandler adHandler = new ADHandler();

        string groups = adHandler.GetGroupMemberships(serviceID);
        return new MvcHtmlString(groups);
    } 
}

Answer 1

由于按钮存在于 HTML 表单中，正在重新加载页面。默认情况下，除非另有说明，否则 HTML 按钮的“类型”属性为“提交”。由于我没有为按钮指定“类型”，因此单击按钮被解释为表单提交。

为了解决这个问题，我将按钮的类型属性设置为“按钮”

<button type="button" id="btnListGroups" title="List the groups the selected service ID is a member of">List Groups</button>