.net-core - .net core 中的 Bootstrap 模态对话框中的部分视图中的搜索功能

Question

我想在 Bootstrap 模态对话框中打开的部分视图中开发搜索功能。我已经从 Bootstrap 模态对话框的主视图中打开了部分视图。在该部分视图中，我想实现搜索功能。我已经尝试过了，但是当我单击搜索时，它会重定向到部分视图，而不是在模态对话框中更改部分视图的内容。

控制器代码

public IActionResult Contact()
        {
            ViewData["Message"] = "Your contact page.";

            return View();
        }

        public ActionResult EmployeePartial()
        {
            List<Employee> model = new List<Employee>()
            {
                new Employee
                {
                    EmployeeName="Suman",
                    EmployeeId=1234
                },
                new Employee
                {
                    EmployeeName="Alkesh",
                    EmployeeId=1235
                },
            new Employee
            {
                EmployeeName="Atul",
                EmployeeId=1245
            }
            };
            
            return PartialView("_Index", model);
        }

        [HttpGet]
        public PartialViewResult Search(string id)
        {
            List<Employee> model = new List<Employee>()
            {
                new Employee
                {
                    EmployeeName="Suman",
                    EmployeeId=1234
                },
            };
            return PartialView("_Index", model);
        }

部分视图的代码

@model IEnumerable<Employee>


<table class="table table-bordered table-condensed table-striped">
    <thead>
        <tr>
            <td >ID</td>
            <td >Name</td>
        </tr>
    </thead>

    @foreach(var employee in Model){ 
        <tr onclick="AddToList('@employee.EmployeeId','@employee.EmployeeName')">
            <th scope="row">@employee.EmployeeId</th>
            <td>@employee.EmployeeName</td>            
        </tr>
    }

</table>

<form asp-controller="Home" asp-action="Search" asp-route-id="23" method="get">
    <button type="submit" class="btn btn-success">Search</button>
</form>

主视图代码

@{
    ViewData["Title"] = "Contact";
}
<h2>@ViewData["Title"]</h2>
<h3>@ViewData["Message"]</h3>

<ul class="list-group" id="employeeList">
</ul>
<div id='myModal' class='modal' role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                <div id='myModalContent'>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="button" value="Open LOV" id="btnOPNLOV" class="btn btn-primary" />

@section Scripts {
    <script type="text/javascript">
        $("#btnOPNLOV").click(function () {
            var options = {
                keyboard: true
            };
            $.ajax({
                type: "GET",
                url: '/Home/EmployeePartial',
                contentType: "application/json; charset=utf-8",
                datatype: "json",
                success: function (data) {
                    $('#myModalContent').html(data);
                    $('#myModal').modal(options);
                    $('#myModal').modal('show');
                },
                error: function () {
                    alert("Content load failed.");
                }
            });
        });
        $("#closbtn").click(function () {
            debugger;
            $('#myModal').modal('hide');
        });

        function AddToList(id,name) {
            var blnExists = false;
            $('#employeeList li').each(function (i) {
                var text = $(this).attr('value');
                if (text == id) {
                    blnExists = true;
                    return false;
                }
            });
            if (!blnExists) {
                $('#employeeList').append("<li class='list-group-item' value='" + id + "'>" + name + "</li>");
            }
            //$('#myModal').modal('hide');
        }
    </script>
}

标签： .net-coreasp.net-core-mvcrazor-pages