Кнопка JQuery Dialog внутри формы вызывает POST

Question

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

Событие клика

$("#openList").button().click(function () {
    $("#list").dialog("open");
});

Функциональное

<div id="list" title="Select one">
    @{ Html.RenderPartial("Index/_ListDialog"); }
</div>
<p>
    <button id="openList">Open List</button>
</p>

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{    
    <div id="ChildFields">
        @{ Html.RenderPartial("Index/_Fields"); }
    </div>
    @Html.HiddenFor(model => model.otherData) 

    <input type="submit" value="Submit" />    
}

Форма сообщений

<div id="list" title="Select one">
    @{ Html.RenderPartial("Index/_ListDialog"); }
</div>

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{    
    <p>
        <button id="openList">Open List</button>
    </p>
    <div id="ChildFields">
        @{ Html.RenderPartial("Index/_Fields"); }
    </div>
    @Html.HiddenFor(model => model.otherData) 

    <input type="submit" value="Submit" />    
}

Это сокращенная общая версия длинной формы.На практике кнопка должна быть в середине формы между наборами полей.Можно ли разместить кнопку внутри формы, не вызывая ее публикацию?

Answer 1

Попробуйте это:

$("#openList").button().click(function (e) {
    e.preventDefault();
    $("#list").dialog("open");
});

Answer 2

Добавьте return false; в конец вашего click обработчика.