Question

I have a domain aggregate that is displayed using a view model in a run-of-the-mill “Edit” view. The root object is Client, which has a nested property Referrer which is of type Contact. The Referrer’s first and last name are shown on the Client edit view, but I need the user to be able to spawn a “Create Contact” dialog if the referring contact isn’t already in the system. I’m attempting to do this in a jQuery dialog with a partial view for the Contact object. The problem is that if I put the button that spawns the Create Contact dialog inside of the Client object’s fieldset, the dialog doesn’t work. Simplified code:

Razor:

@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");
        });
});

If I take the createContact button out of the scope of the Html.BeginForm, the dialog shows up correctly, but the button is positioned nowhere near where I need it to be. If I leave the button as it is in the example above, the dialog displays for a second and then closes itself. Is there any way that I can have the button to launch the “Create Contact” dialog inside the Html.BeginForm? If not, are there other options to get the button where I want it to be without hacking the crap out of the DOM?

Answer 1

The button event is causing the form to disappear. Change the click function to prevent that.

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