bootstrap modal with ajax form

Question

User-1603135184 posted

I want to display a bootstrap modal to ask for some data when i push the dismiss button on the modal form it must submit the data to my controller via an ajax form:

<div id="partial">
<div class="modal fade" id="myModalAjax">
<form data-ajax="true" data-ajax-mode="replace" data-ajax-update="#partial" asp-action="mypartial" asp-controller="home" role="form" data-ajax-method="post">

<div class="modal-dialog" id="MyDialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
ajax body
</div>
<div class="modal-footer">
<button type="submit" id="btnclick" class="btn btn-default">Close</button>
</div>
</div>
</div>
</form>
</div>

@await Html.PartialAsync("/Views/shared/partialview.cshtml")

When I run the code as is the partial view is update and the modal goes away but the background remains greyed out and i can not do anything on the web page until i refresh it completely.


If i add data-dismiss="modal" to the submit button then the modal goes away but the post never happens. Any help here would be much appreciated.

Answer 1

User475983607 posted

Use a standard form not an AJAX form.   A standard submit will cause the browser to refresh the page which closes the modal.

Secondly, submitting the form when the dismiss button is pressed is not user friendly.  Users click the dismiss button because they want to cancel what they are doing and perhaps start over.  What if there are validation errors and the user just gets frustrated and closes the window because your design does not let the user cancel?

Lastly, the modal does not contain a user inputs.

Answer 2

User-1603135184 posted

Hello,

Basically I have a table. I want the user to add/edit or update data in the table via a modal box.  There are two buttons on the modal box one for cancel which just closes and the other for submitting.  When the user pushes the submit button on the modal form the form must go away . The table is one section of data on a larger page wrapped in a div. I do not want to refresh the entire page I only want to refresh the table data in that div . So basically the modal box asks for new or updated data and then when the user pushes the submit button on the form it must post the new data to the server and refresh that table div with the new data .

Answer 3

User475983607 posted

You need to write a lot of more code to pull this off.  You should look at this a single page application and load everything needed the first time the page is loaded.  Then use jQuery/JavaScript (React is a much better option but has a learning curve) to send/receive JSON data as well as populate HTML elements. 

I would start by taking a look at the Bootstrap documentation.  The docs show how to populate a modal form with data from the current page using data- attributes.   https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

Once you get the bit above working then you can work on how to update the  UI.  I recommend using data- attributes in the markup to  identify the records by id.  Doing so makes it easier to update the UI.