I am following this guide ( https://softdevpractice.com/blog/asp-net-core-mvc-ajax-modals/ ), and cannot get the save button on my modal to work. I tried putting it within the form tag but then it was using the form action from the parent view not the partial.
At first I could not get the close buttons to work but that was resolved by changing data-dismiss
to data-bs-dismiss
. I am wondering if I need to do similarly for save, since things have changed with Bootstrap 5.
My code is as follows:
Parent View
<div id="AddStudyModal"></div>
// Irrelevant stuff here
<div>
<button type="button" class="btn btn-secondary" data-toggle="ajax-modal" data-bs-target="#add-study" data-url="@Url.Action("AddStudy", "App", new {id = Model.GUID})">Add</button>
</div>
Partial View
<div class="modal fade" id="add-study" tabindex="-1" role="dialog" aria-labelledby="addStudyLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addStudyLabel">Add Study</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-controller="App" asp-action="AddParticipant" method="post">
@Html.HiddenFor(m => m.ParticipantGuid)
<div asp-validation-summary="ModelOnly"></div>
<div class="mb-3 form-group">
<label asp-for="Studies" class="form-label"></label>
<select asp-for="SelectedStudyGuid" asp-items="Model.Studies" class="form-control" autocomplete="off">
<option value=""> Select a Study</option>
</select>
<span asp-validation-for="SelectedStudyGuid" class="text-danger"></span>
</div>
<div class="mb-3 form-group">
<label asp-for="StartDate" class="form-label"></label>
<input asp-for="StartDate" class="form-control" autocomplete="off"/>
<span asp-validation-for="StartDate" class="text-danger"></span>
</div>
<div class="mb-3 form-group">
<label asp-for="EndDate" class="form-label"></label>
<input asp-for="EndDate" class="form-control" autocomplete="off"/>
<span asp-validation-for="EndDate" class="text-danger"></span>
</div>
<div class="text-center">
</div>
<div class="text-center">@ViewBag.Message</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal">Save</button>
</div>
</div>
</div>
</div>
site.js
$(function (){
var AddStudyElement = $('#AddStudyModal');
$('button[data-toggle="ajax-modal"]').click(function(event){
var url = $(this).data('url');
$.get(url).done(function(data){
AddStudyElement.html(data);
AddStudyElement.find('.modal').modal('show');
})
})
AddStudyElement.on('click', '[data-save="modal"]', function(event){
event.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var sendData = form.serialize();
$.post(actionUrl, sendData).done(function(data){
AddStudyElement.find('modal').modal('hide');
})
})
})
Edit: I got the Save button to do something now (close the Modal) thanks to @Efraim's help with adding the. in front of modal.
there is a missing '.' in: AddStudyElement.find('modal').modal('hide'); AddStudyElement.find('.modal').modal('hide');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.