MVC modal popup submit

Question

This is kind of a unique issue, and I'm still fairly new to MVC, so I'll do the best I can to explain it. I have a page with a third party grid, where each row is a "Company" object. My model for the view is a CompanyManager object, with the search parameters as fields and the list to populate the grid. Users are able to select a row for editing, which brings up a popup. A button outside the grid also opens the same popup for creating a new record.

The content of the popup is in a partial view, AddEdit, and the model for it is the "Company" object. Along with other fields, there is also another third party grid with "Contacts" as records. From the third party grid of "Contacts", I can serialize the records and pass them along on submit.

My problem lies with submitting on the modal popup, which should close when successful and stay open when the Company model (or any Contacts in the grid) fails validation. What's the best way of going about the submit? Currently, I have a button that calls a JavaScript function. In this function, I've tried jquery $.submit, but since the form posts to Index, that would close the popup regardless. I've also tried $.post to post to an Ajax call, but I have a JSON result being returned in the controller for this, which didn't work as I expected- it just outputs the JSON as HTML.

score 1 · Accepted Answer · answered Aug 22 '12 at 14:36

1

If you do your ajax call with JQUERY like this:

                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: '/url/', //url your posting to
                    data: $('#form-addedit').serialize(), //serialize the data in your form
                    success: function (result) {

                       //hide modal
                    }
                });

You should get the JSON Result in 'result'. Notice the dataType says 'json' if it was 'html' it would expect html to be returned. The result will be put into the variable result in the success function call and you can do what you want with the variable then, and determine if you need to close the modal or not.

Also, make sure in your controller, that you are indeed receiving an ajax call - Request.IsAjaxRequest()

answered Aug 22 '12 at 14:36

AwDogsGo2Heaven

952
11
26

I was doing $.post, which is the shorthand for that. (http://api.jquery.com/jQuery.post/). I'm also new to JQuery as well. I reverted my code back to what I thought I had and it worked perfectly. Perhaps I didn't have something just right. But what I think happened is just what you mentioned: although I was using .post, datatype is an optional parameter... and I neglected to put it in. Even though I still didn't have it filled out this time around, it worked. But it certainly matches my symptoms. So I now provide the datatype and it still works!... – JoeSharp Aug 22 '12 at 21:32
...According to the link, it makes an educated guess if you don't provide the datatype. So I guess the other day, for some reason it was assuming HTML, and today, it assumed JSON. – JoeSharp Aug 22 '12 at 21:32

score 0 · Answer 2 · answered Aug 22 '12 at 14:42

You can do this by having a regular button to submit the form, like you would on any in-page form. Set the id of the button, let's say to 'Submit'. Then validate the form with jQuery and the .click function. Something along the lines of

 $("#Submit").click(function () {
                var value = $("#your_field").val();
                if (/*check for invalid condition*/) {
                    $("#Error_message").show();
                    return false;
               return true;
            });

This should check the value of each field you need to validate. If the validation fails, show the user and error message and return false. This prevents the click event (form submit) from executing. If the validation checks pass, return true to allow the click event which will submit the form and close the window.

MVC modal popup submit

2 Answers2