Best practice to show search result in a popup modal in ASP.NET MVC Core

user_3208728 0
Viewed 3330

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

asp.net-core modal-dialog asp.net-mvc
1 Answers

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">&times;</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: enter image description here

user_128847420
Related