Asp.Net MVC from in modal bootstrap

Question

First, some of the technologies in play: Asp.Net Mvc 5, Bootstrap 3, JQuery.

On my view I want to create a bootstrap model dialog, with a simple form in it. When the user clicks submit, there are two outcomes.

1) Invalid input, should display error message from the server

2) OK input, redirect/refresh the same page, so the dialog is closed and pagedata is updated.

Since the modal dialog is shown using javascript, I guess I have to post to the server using JQuery ajax post? That seems to be the best way to keep the modal dialog visible, if there is an error?

I'm also unsure about where to place the post action. In the same controller or perhaps in a new web api controller (since this I'm doing a ajax post).

Answer 1

Yes, you should use an ajax call to send the request and receive the response, using the response data to determine whether to display an error message or close the modal dialog.

As for where to place the action, while you certainly can create a separate WebAPI controller, and eventually you may decide to do so for architecture reasons, you can easily accomplish what you want by placing the action in your existing controller and designing it to return the appropriate JSON response.

Answer 2

Yes, you should use Ajax. Whenever you want to bind the data into bootstrap modal or create the form in it. If you want bounded data in the modal then you should use GET as a type or if you want the form to be submitted then you should use POST as a type in an AJAX.

You can also pass success and failure logic into the success/failure parameter in the $.ajax({}).

Answer 3

Yes you should use $.ajax method to post the data into the database and show it to the grid or on table on your view. Here I am posting an example of $.ajax method. You can refer it.

 $.ajax({
    url: '@Url.Action("Action", "Controller")',
    type: 'POST',
    dataType: 'json',
    data: formData,
    async: false,
    success: function (data) {
        //code of success
    }
    contentType: false,
    processData: false
});