ASP.Net MVC 3 Jquery UI Dialog Form

Question

I am trying to make a popup dialog to allow the user to fill in a form. When they click submit I want to submit the form. I figured out how to make the modal popup but cannot figure out how to get it to submit the form when the form is clicked. Does anyone know how to do this?

@using (Html.BeginForm())
{
    <div>
        <fieldset>
            <legend>Account Information</legend>

            <div class="editor-label">
                @Html.LabelFor(m => m.UserName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.UserName)
                @Html.ValidationMessageFor(m => m.UserName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.Password)
                @Html.ValidationMessageFor(m => m.Password)
            </div>

            <div class="editor-label">
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>

            <p>
                <input type="submit" value="Log On" />
            </p>
        </fieldset>
    </div>
}

<script type="text/javascript">
    $(document).ready(function () {
        $("#dialog-form").dialog({
            modal: true,
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>

ptfaulkner · Accepted Answer · 2011-12-19 12:55:40Z

9

You need to make sure you have a valid POST method in your controller for the form to submit to. Your form here looks valid as long as you aren't expecting the dialog's submit button to submit the form. If that is the case then you will need to give the form an ID and call submit from your function for the dialog "Submit" button.

<div id="dialog-form">
@using (Html.BeginForm("LogOn", "Account", FormMethod.Post, new { id = "LogOnForm" })) {
    <div>
        <fieldset>
            <legend>Account Information</legend>

            <div class="editor-label">
                @Html.LabelFor(m => m.UserName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.UserName)
                @Html.ValidationMessageFor(m => m.UserName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.Password)
                @Html.ValidationMessageFor(m => m.Password)
            </div>

            <div class="editor-label">
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>

            <p>
                <input type="submit" value="Log On" style="display:none;" />
            </p>
        </fieldset>
    </div>
}
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#dialog-form").dialog({
            modal: true,
            buttons: {
                "Submit": function () {
                    $("#LogOnForm").submit();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>

edited Dec 19, 2011 at 12:55

answered Dec 19, 2011 at 1:46

ptfaulkner

7124 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

w.donahue Over a year ago

Awesome yeah that worked. I think what I didn't understand is that your could give the Html helper generated form an ID. I suppose using that method you can just dump whatever you want into the html tag thats being generated?

ptfaulkner Over a year ago

Yeah as long as it's a valid HTML attribute you should be fine.

Collectives™ on Stack Overflow

ASP.Net MVC 3 Jquery UI Dialog Form

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related