Loading a partial view jQuery dialog with a start button inside Html.BeginForm

I have a domain aggregate that is displayed using the view model in the Edit view. A root object is Clientone that has a nested property Referrerthat has a type Contact. The name and surname of Referrer are displayed in the client’s editing view, but I need the user to be able to create the Create Contact dialog if the contact contact is not already in the system. I am trying to do this in a jQuery dialog with a partial view for a Contact object. The problem is that if I overlay a button that spawns the Create Contact dialog inside an object type field Client, the dialog does not 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");
        });
});

createContact createContact Html.BeginForm, , , . , , , . , " " Html.BeginForm? , , , , DOM?

+3
1

. , .

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

All Articles