Geek Answers Handbook

ASP.Net MVC 3 JQuery UI Dialog Form

I am trying to create a popup dialog that allows the user to fill out a form. When they click the submit button, I want to submit the form. I figured out how to make a modal popup, but I can't figure out how to get it to submit the form when I click on the form. 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>
+8
jquery-ui asp.net-mvc-3
source share
1 answer

You need to make sure that you have a valid POST method in your controller for the form you want to submit. Your form here looks valid until you expect the submit button to submit the form. If so, you will need to provide an ID form and send a request from your function to the 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>
+8
source share

More articles:


All Articles