CODEWITHSUNDEEP
asp.net-mvcpopupjquery-post
JoeSharp
JoeSharp

Reputation: 415

MVC modal popup submit

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.

Upvotes: 0

Views: 5019

Answers (2)

Forty-Two
Forty-Two

Reputation: 7605

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.

Upvotes: 0

AwDogsGo2Heaven
AwDogsGo2Heaven

Reputation: 972

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()

Upvotes: 1

Related Questions