I want to run up a modal form from a button click. The modal form will be depend on what is selected in the dropdown.
my code is -
<div class="row">
<div class="col-md-4 mb-2">
<select id="AssessmentSelectionId" class="form-select no-progress" asp-for="@Model.AssessmentTypeId" asp-items="@(new SelectList(Model.AssessmentTypeList, "AssessmentTypeId", "AssessmentType"))">
<option value="">Please select Assessment Type</option>
</select>
</div>
<div class="col-md-4 mb-2">
<button id="btnSaveAssessment" type="button" class="btn btn-primary float-right"
data-toggle="ajax-modal" data-target="#mdIPDEAssessmentModal"
data-url="@Url.Action("Create", "Assessments", new { assessmentType = *Pass the selected id*, assessmentId = 0})">Insert Assessment</button>
</div>
</div>
The code controller -
[HttpGet]
public IActionResult Create(int? assessmentType, int? assessmentId)
{
var modelData = new AssessmentsViewModel();
if (assessmentType == 4)
{
return PartialView("_IPDEModalAssessment", modelData);
}
else
{
return PartialView("_GeneralModalAssessment", modelData);
}
}
So I basically want to pass $('#AssessmentSelectionId').val() as the assessmentType in the url.action. it doesn't like that Jquery if I type that in the action string.
Any help would be greatly appreciated.
[UPDATE]
Tried ajax call, see code below -
$(function () {
$("#btnSaveAssessment").click(function () {
var assessemntTypeId = $('#AssessmentSelectionId').val();
$.ajax({
type: 'GET',
url: '@Url.Action("Create", "Assessments")',
data: { assessmentType: assessemntTypeId, assessmentId: 0 },
success: function (data) {
},
error: function (xhr, status, error) {
console.error('Error fetching wards:', error);
}
});
});
});
This actions the appropriate action in the controller. But when the line -
return PartialView("_GeneralModalAssessment", modelData);
is actioned, nothing is shown.
The modal form is below -
@model AssessmentsViewModel
<div class="modal fade" id="mdGeneralAssessment" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Insert @Model.AssessmentType Results</h5>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary float-left" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" data-save="modal" id="btnSave">Save</button>
</div>
</div>
</div>
</div>
There are no errors in the console.
Baffled!
Codes shall be simialr to below. Just like you see, we get selection value via jquery and append it behind the url. Then the callback function will get the view, we put the view in the DOM and use $('#partial_view_name').modal('show'); to show the modal. Because we are returning a partial view, then the modal content will be set into the DOM, we have to use execute the .modal('show') method to show the modal.
@model WebAppMvc.Controllers.Assessment
<div class="row">
<div class="col-md-4 mb-2">
<select class="form-select no-progress" asp-for="@Model.AssessmentTypeId" asp-items="@Model.AssessmentTypeList">
<option value="">Please select Assessment Type</option>
</select>
</div>
<div class="col-md-4 mb-2">
<button id="btnSaveAssessment" type="button" class="btn btn-primary float-right"
data-toggle="ajax-modal" data-target="#mdIPDEAssessmentModal"
data-url="@Url.Action("Create", "Assessments")">
Insert Assessment
</button>
</div>
</div>
<div id="popup"></div>
@section Scripts {
<script>
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url') + "?assessmentId=" + $("#AssessmentTypeId").val();
$.get(url).done(function (data) {
$("#popup").html(data);
$('#homeNewsModal').modal('show');
})
})
</script>
}
========================= --- Update --- ========================
In my partical view, I have view like below,
<div class="modal fade" id="homeNewsModal">
<div class="modal-dialog">
<div class="modal-content">
content here
</div>
</div>
</div>
so that in the ajax success: function (data) {}, function, the data is the modal view. I need to put the modal view in a DOM, in my codes it's $("#popup").html(data);. To make the modal view show up, I need to run $('#homeNewsModal').modal('show');. In your partical view, you have <div class="modal fade" id="mdGeneralAssessment", so that you should have callback function below. But you don't have it.
success: function (data) {
$("#your_dom_id").html(data);
$('#mdGeneralAssessment').modal('show');
},