Asp.net MVC ajax submit for forms in a Modal

Question

I am trying to submit a form using ajax when in a modal. So far the closest I have come to making that work is this:

@model AppStudio.Data.ViewModels.RolesDetailsViewModel
@section scripts{
    @Scripts.Render("~/bundles/jquery.unobtrusive-ajax")
}
<div id="roleDetails" class="modal">
    <div class="col-sm-12">
        @if (Model.Id == null)
        {
            <h2>Add Role</h2>
        }
        else
        {
            <h2>Edit Role</h2>
        }
        <hr />
    </div>
    @using (Ajax.BeginForm("SaveRole", new AjaxOptions() {
            InsertionMode = InsertionMode.Replace
    }))
    {
        @Html.AntiForgeryToken()
        <div class="col-sm-12">
            <div class="form-group">
                @Html.HiddenFor(m => m.Id)
                @Html.HiddenFor(m => m.ApplicationId)
            </div>
            <div class="form-group">
                @Html.LabelFor(m => m.RoleName)
                @Html.TextBoxFor(m => m.RoleName, new { @class = "form-control col-sm-12" })
                @Html.ValidationMessageFor(m => m.RoleName)
            </div>
            <div class="form-group">
                <div class="clearfix">
                    <button type="submit" class="btn btn-primary pull-right">Save</button>
                    <a href="#" class="btn btn-default pull-right" rel="modal:close">Cancel</a>
                </div>
            </div>
        </div>
    }
</div>

However, when I submit this, it redirects me to a new page with my inputs

I then tried removing the ajax.beginform and replacing it with beginform and changing my submit button to a href link like this:

<a href="#" id="save" class="btn btn-primary pull-right">Save</a>

I also added this script on top:

   <script>
        $(document).ready(function (e) {
            $("#save").click(function () {
                alert("test");
            });
        });
    </script>

However, what this results in is the url having a # added to it only. Is there a way to do do ajax submits in a modal? I tried searching around but haven't found much so far.

If you are redirecting, then `jquery.unobtrusive-ajax.js` is not loaded (or loaded incorrectly). Best guess is that view is actually a partial view, which would explain it since `sections` are not supported in partials (scripts go in the main view or its layout, never in partials) — , Aug 25 '18 at 09:14
Yes that is a partial view. I'll try loading them without sections — JianYA, Aug 25 '18 at 09:14
Just add the `@Scripts.Render("~/bundles/jquery.unobtrusive-ajax")` in the main view — , Aug 25 '18 at 09:17
I did that. The strange thing is that my validation errors are appearing even though i have not submitted the form. — JianYA, Aug 25 '18 at 09:24
Your form controls will be validated as soon as you change the value and tab out, or if you mean they are displayed initially, then it means they have been added to `ModelState` (as a result of code you have not shown, but most likely is you have added a model as the parameter in your GET method) — , Aug 25 '18 at 09:27
In order to open it the modal, I pass a post request to my server with a model as a parameter. Should I not be doing that? The rolename when I open the modal is null. Should I change it to something else? — JianYA, Aug 25 '18 at 09:29
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/178727/discussion-between-stephen-muecke-and-jianya). — , Aug 25 '18 at 09:29

Asp.net MVC ajax submit for forms in a Modal

0 Answers0