Best practice to show search result in a popup modal in ASP.NET MVC Core - asp.net-mvc

Question

I am passing a value (search string) from a form to a controller action method where I perform some activities to find specific records from the db then passing the result to either ViewBag or to a model in order to display the result in a view.
The easy way is to pass the result as a model (or viewmodel) to the view .. something like:
1- Pass the string from a form to the controller.
2- in the controller, method, after performing the search and saving it to a list/var ..
return View(mymodel);
3- in the view .. we can say
#foreach (var item in Model)
{
... table here to display the columns and the data..etc.
}
The question is, in stead of the view, how can I display the result in a modal popup ?
There are so many suggestions with many different JQuery or JavaScripts but is there any easier solution?
is there anything like (simply) show me the view in a popup modal ?
Thanks in advance

Answer 1

is there anything like (simply) show me the view in a popup modal ?
I think the simpest way to display the result in a modal popup is using partial view and ajax.
Here, you cannot avoid creating a view to store the content that needs to be displayed in the modal popup. Of course, you only need to create a partial view instead of a view.
Here is a simple demo for your reference:
main view:
Update:
#{
ViewData["Title"] = "Testpop";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Testpop</h1>
<form>
<input id="Text1" type="text" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="showPop">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body ">
<div id="popup">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal" id="submitModal">Submit</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
#section Scripts{
<script>
$('#showPop').click(function () {
var url = '#Url.Action("GetPartialView", "Default")';
$.ajax({
url: url,
type: 'post',
data: { "para": $("#Text1").val()},
success: function (data) {
$('#popup').html(data);
}
});
})
$('#submitModal').click(function () {
var url = '#Url.Action("GetData", "Default")';
$.ajax({
url: url,
type: 'post',
data: { "data": $("input[name='data']").val() },
success: function () {
$("#Text1").val("");
alert("pass successfully!");
}
});
});
</script>
}
Default/GetPartialView action:
[HttpPost]
public IActionResult GetPartialView(string para)
{
//get data
var model = _context.Person.Where(x=>x.Name == para).ToList();
return PartialView("_PopView",model);
}
_PopView.cshtml partial view:
#model IEnumerable<Person>
<table class="table table-bordered">
<tr>
<td>Id</td>
<td>Name</td>
<td>Nome_Tipo</td>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#item.Id
</td>
<td>
#item.Name
</td>
<td>
#item.Nome_Tipo
</td>
</tr>
}
</table>
<input id="data" type="text" name="data" />
pop up submit data to the action:
[HttpPost]
public IActionResult GetData(string data)
{
//do anything.
return Ok();
}
Here is the new result: