CODEWITHSUNDEEP
twitter-bootstrapasp.net-mvc-4bootstrap-modal
Jason
Jason

Reputation: 5

Unable to submit a Modal form in ASP.NET MVC

I have a modal form to add a record. However, clicking the submit button does absolutely nothing. This is a partial view and it loads very well on clicking the 'Add' button on the parent view. However, the form on the partial view does not submit. I have reviewed some of the related posts. However I have had no resolution so far. Here is the code -

@model MyApplication.Models.Cases.CaseViewModels.AddDiseasePhotosViewModel

<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>

<div class="modal-dialog">
@using (Html.BeginForm("AddDiseasePhoto", "Cases", FormMethod.Post, new { @id = "frmModal", @name = "frmModal", enctype = "multipart/form-data" }))
{
    <div class="modal-content animated bounceInRight">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <i class="fa fa-laptop modal-icon"></i>
            <h4 class="modal-title">Add Disease Photo</h4>
        </div>
        <div class="modal-body">
            @TempData["SuccessMsg"]

            <div class="form-group">
                <label>Title</label>
                @Html.TextBoxFor(m => m.Title, new { @class="form-control" })
            </div>
            <div class="form-group">
                <label>Description</label>
                @Html.TextAreaFor(m => m.Description, new { @class = "form-control" })
            </div>
            <div class="form-group">
                <label>Upload File</label>
                @Html.TextBoxFor(model => model.PicFileUpload, new { type = "file", id = "file1" })
                @Html.ValidationMessageFor(m => m.PicFileUpload, string.Empty, new { @style = "color:red;" })
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" id="AjaxPost" class="btn btn-primary">Add Photo</button>
        </div>
    </div>
    }
</div>

<script type="text/javascript">
    $(function () {
        $.validator.unobtrusive.parse('#frmModal');
        //Submit button
        var submitButton = $("#AjaxPost");
        var infoForm = $("#frmModal");
        submitButton.click(function () {
            SubmitInfo(infoForm);
        });
    });

    function SubmitInfo(formContainer) {
        $.ajax({
            url: "@Url.Action("AddDiseasePhoto", "Cases")",
            type: 'post',
            data: formContainer.serialize()         
        });
    }        
</script>

Please guide. Thanks.

Upvotes: 0

Views: 2035

Answers (2)

Erik Funkenbusch
Erik Funkenbusch

Reputation: 93434

The problem, frequently, with partial views is not the view itself, but what the partial is embedded in. For instance, if you happen to embed a form within a form, this will cause unpredictable results since that is illegal HTML. Another issue may be the duplication of included scripts, or other problems that we can't really diagnose having only seen the partial.

Upvotes: 0

Chris Pratt
Chris Pratt

Reputation: 239290

Your "submit" button is typed as "button", not "submit". A button of type "button" does nothing on it's own, and will not submit your form. Change it to:

<button type="submit" id="AjaxPost" class="btn btn-primary">Add Photo</button>

Now, it looks like you're trying to submit with AJAX, so as long as you're binding to the click event handler of the button, it will work without changing the type, but you should always design your HTML as if JavaScript is not supported. Then, it will submit the form, regardless, and if JavaScript is supported, it'll submit via AJAX instead.

Since it's not submitting at all, even though you have JavaScript which should submit on click of the button, then one of two things is wrong with your JavaScript:

  1. You're not correctly binding to the click event handler on that element
  2. There's some JavaScript error on the page that is preventing your JavaScript from running.

Upvotes: 1

Related Questions