Question

我有一个域聚合，使用视图模型在普通的“编辑”视图中显示。根对象是Client，它具有嵌套属性Referrer，其类型为Contact。客户编辑视图中显示了Referrer的名字和姓氏，但如果系统中尚未提供引荐联系人，我需要用户能够生成“创建联系人”对话框。我试图在jQuery对话框中执行此操作，其中包含Contact对象的部分视图。问题是，如果我在Client对象的fieldset中放置生成Create Contact对话框的按钮，则该对话框不起作用。简化代码：

剃刀：

@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>

jQuery的：

$(document).ready(function() {
    $("#createContactDialog").dialog({
        autoOpen: false,
        resizable: false,
        width: 400,
        title: "Create Contact",
        modal: true,
        open: function(event, ui){
            $(this).load("@Url.Action("CreateContactPartial", "Contact")");
        },
        buttons: {
            "Cancel": function() {
                $(this).dialog("close");
            }
        }
    });
    $("#createContact")
        .button()
        .click(function() {
            $("#createContactDialog").dialog("open");
        });
});

如果我将createContact按钮移出Html.BeginForm的范围，对话框会正确显示，但按钮位于我需要的位置附近。如果我在上面的示例中保留按钮，则对话框会显示一秒钟然后自行关闭。有没有办法让按钮在Html.BeginForm内启动“创建联系人”对话框？如果没有，是否还有其他选项可以将按钮放到我想要的位置而不会破坏DOM中的垃圾？

Answer 1

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

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

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

1 个答案: