AJAX - метод публикации в MVC Controller без перезагрузки страницы

Question

Я создал страницу просмотра MVC, где, когда пользователь нажимает кнопку, вызывается метод Controller. Метод возвращает текстовое выражение. Это выражение затем отображается во всплывающем сообщении.

Функция всплывающих окон работает при нажатии кнопки, однако имеет нежелательный побочный эффект, вызывающий перезагрузку страницы. Есть ли способ предотвратить это?

Вот 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-форме. По умолчанию атрибутом «type» кнопок HTML является «submit», если не указано иное. Поскольку я не указал «тип» для своей кнопки, нажатие на кнопку интерпретировалось как отправка формы.

Чтобы решить эту проблему, я установил атрибут типа для моей кнопки как «кнопка»

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