I have a jquery button click method which works fine in views other than modals.uploadbtn button click method doesn't work when partial view is loaded in the modals
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<div class="form-group">
<div class="col-md-10">
<p>Upload one or more files using this form:</p>
<input type="file" id="files" name="files" multiple />
<input id="documentType" name="entity" value=@ViewData["entity"] hidden>
<input id="id" name="id" value=@Model hidden>
</div>
</div>
<div class="form-group">
<div class="col-md-10">
<input type="submit" id="upload" value="Upload" />
<button type="button" id="uploadbtn">Upload</button>
</div>
</div>
<script>
$(document).ready(function () {
$("#uploadbtn").click(function () {
console.log("came");
var documentType = $('#documentType').val();
var fileUpload = $("#files").get(0);
var files = fileUpload.files;
console.log(files);
});
});
</script>
Can someone tell me what I should do in order to get this working in the modals? I am working in a .net core project
Update Demo as below:
Controller.cs: I create an action BBB to return _FilePartialView.
public class HomeController : Controller
{
public IActionResult Privacy()
{
return View();
}
public IActionResult BBB()
{
return PartialView("_FilePartialView");
}
}
In privacy view, I add a modal to upload file.
<button id="btnShowModal" type="button" > Upload </button>
<div class="modal fade" id="Modal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button id="btnHideModal" type="button" class="btn btn-secondary" data-dismiss="modal"> ×</button>
</div>
<div class="modal-body" >
</div>
</div>
</div>
</div>
script src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnShowModal").click(function () {
$.get("@Url.Action("BBB","Home")",
function(data){$('.modal-body').html(data);})
$("#Modal").modal('show');
});
$("#btnHideModal").click(function () {
$("#Modal").modal('hide');
});
});
</script>
_FilePartialView.cshtml:
[Note]I remove <script src="~/lib/jquery/dist/jquery.min.js"></script>