使用Html.begin中的启动按钮加载带有局部视图的jQuery对话框

我有一个域聚合，它在普通的“编辑”视图中使用视图模型显示。根对象是

Client

，它有一个嵌套属性

referer

，类型为

Contact

。推荐人的名字和姓氏显示在客户端编辑视图中，但是如果推荐联系人尚未在系统中，我需要用户能够生成一个“创建联系人”对话框。我试图在jQuery对话框中使用联系人对象的部分视图来执行此操作。问题是，如果我将生成“创建联系人”对话框的按钮放在

客户端

对象的字段集中，该对话框将不起作用。简化代码：

剃刀：

@using(Html.BeginForm()){
    @Html.ValidationSummary(true)
    <fieldset>
        <table>
            <tr>
                <td>
                    Client Name: 
                    @Html.TextBoxFor(m => m.ClientName)
                </td>
                <td>
                    Referred By: 
                    @Html.TextBoxFor(m => m.ReferrerName)
                    <button id="createContact">New...</button>
                </td>
            </tr>
        </table>
        <div class="lower-right-button">
            <input type="submit" value="Save" />
        </div>
    </fieldset>
}
<div id="createContactDialog" title="Create Contact" style="overflow: hidden;"></div>

---

如果我将

createContact

按钮移出

Html.BeginForm

的范围，对话框将正确显示，但按钮的位置与我需要的位置相差甚远。如果我将按钮保持在上面示例中的状态，则对话框会显示一秒钟，然后自动关闭。有什么方法可以让我用按钮启动

Html.BeginForm

中的“创建联系人”对话框吗？如果没有，是否有其他选项可以在不从DOM中删除垃圾的情况下将按钮放在我想要的位置？

按钮事件导致表单消失。更改单击功能以防止出现这种情况

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

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