我如何在模态弹出窗口中进行搜索？

Question

这是我调用弹出浏览表单form modal时的样子

这是我输入输入搜索时的样子result

请帮助解决这个问题。谢谢

控制器

在这个表单上我使用部分视图来调用模态表单

            ViewData["CurrentFilter"] = SearchString;
            var Items = new List<ExpandoObject>();
            this.iFA = FA;
            this.nSP = SP;
            this.iFA2 = FA2;
            this.isItems = isItem;
            this.nSearch2 = SearchString;
            dtBrowse = new DataTable();
            if (iFA2==0)
            {
                dtBrowse = RefreshData(true);
            }
            else
            {
                dtBrowse = RefreshData(false, iFA2, TxtCategory,SearchString);
            }
            int i = 0;
       
            nSP = SP;
            ViewBag.iFA2 = FA2;
            ViewBag.Category = AddItemToComboBox(dtBrowse);
            isItems = isItem;
            nSearch2 = SearchString;
            return PartialView("_BrowsePartial",dtBrowse);

查看

@using System.Reflection
@using System.Data
@model DataTable

<form asp-action="BrowseTrans" method="get">
    <div class="modal modal-blur fade" id="modal-team" tabindex="-1" role="document" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="form">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Browse</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3 align-items-end">
                        <div class="col col-4 input-icon">
                            <input type="text" value="@ViewData["CurrentFilter"]" class="form-control" name="SearchString" placeholder="Search…">
                            <span class="input-icon-addon">
                                <!-- Download SVG icon from http://tabler-icons.io/i/search -->
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
                            </span>
                        </div>
                        <div class="col col-2">
                            <label class="form-label">By Category</label>
                        </div>
                        <div class="col form-group">
                            <select id="ddlCurr" asp-items="@(new SelectList(ViewBag.Category, "Category", "Category"))" name="TxtCategory" class="form-control">
                            </select>
                            <span class="text-danger"></span>
                        </div>

                    </div>
                    <div class="row mb-3 align-items-end">
                        <div class="table-responsive" role="grid">
                            <table class="table table-vcenter card-table" style="table-layout: auto; display: block; height: 350px;">
                                <thead>
                                    <tr>
                                    </tr>
                                    <tr>
                                        @for (int c = 0; c < Model.Columns.Count; c++)
                                        {
                                            <th class="w-1">@Model.Columns[c].Caption</th>
                                        }

                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (DataRow dr1 in Model.Rows)
                                    {
                                        <tr>
                                            @for (int c = 0; c < Model.Columns.Count; c++)
                                            {
                                                if (c == 0)
                                                {
                                                    <td>
                                                        <div class="d-flex py-2 align-items-sm-baseline">
                                                            <div class="flex-fill">
                                                                <div><a href="#" class="text-reset" style="font-size: 12px;">@dr1[c].ToString()</a></div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                }
                                                else
                                                {
                                                    <td>
                                                        <div class="d-flex py-2 align-items-sm-baseline">
                                                            <div class="flex-fill">
                                                                <div class="text-muted"><a class="text-reset" style="font-size: 10px;">@dr1[c].ToString()</a></div>
                                                            </div>
                                                        </div>
                                                    </td>

                                                }


                                            }
                                        </tr>

                                    }




                                </tbody>
                            </table>
                        </div>


                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Add Team</button>
                </div>
            </div>
        </div>
    </div>
</form>

Javascript

这是调用模态表单时的javascript函数脚本

$(function () {
    var PlaceHolderElement = $('#PlaceHolderHere');
    $('button[data-toogle="ajax-modal"]').click(function (event) {
        var url = $(this).data('url');
        $.get(url).done(function (data) {
            PlaceHolderElement.html(data);
            PlaceHolderElement.find('.modal').modal('show');
        })
    })

    PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {

        var form = $(this).parents('.modal').find('form');
        var actionUrl = form.attr('action');
        var sendData = form.serialize();
        $.post(actionUrl, sendData).done(function (data) {
            PlaceHolderElement.find('.modal').modal('hide');
            location.reload();
        })
    })
})

Answer 1

您可以尝试去掉<form asp-action="BrowseTrans" method="get">，并在搜索输入<input type="text" class="form-control" id="SearchString" name="SearchString" placeholder="Search…">添加id。然后在输入按键时，通过搜索数据并使用ajax获取数据。然后将<tbody</tbody>中的数据替换为ajax中的数据success。 js：

var element = document.getElementById('SearchString');
        element.addEventListener("keyup", function (event) {
            if (event.keyCode === 13) {
                search()
            }
        });
        function search() {
             $.ajax({
                type: "GET",
                 url: 'BrowseTrans?SearchString=' + $("#SearchString").val() + "&&TxtCategory=" + $("#ddlCurr").val(),
                 success: function (data) {
                     //get data from action here
                     //replace html in <tbody> with data
                 },
                 error: function (result) {
                     alert("error occured");
                 }
             });
        }