javascript - AJAX 过滤 webgrid

Question

我在我的 webgrid 上使用 JS 对其进行排序时遇到问题。所以这个想法是用户在文本框中输入字符串，然后在不刷新空洞页面的情况下刷新下面的 webgrid(根据匹配结果过滤)。现在我的代码可以很好地刷新页面并在单击按钮时触发过滤。

这是标记:

@model List <BTGHRM.Models.HarmingFactorClass>

@{
    BTGHRM.Models.HarmingFactorClass sorting = new BTGHRM.Models.HarmingFactorClass();
}

@Resources.Localization.filter:
<br />

@using (Html.BeginForm("FactorFieltering", "Administration", FormMethod.Post))
{
<table style = "width:100%" >
    <tr>
        <td style="width:10%">
            @Html.Label("Nr", @Resources.Localization.nr)
        </td>
        <td style="width:90%">
            @Html.Label("Desc", @Resources.Localization.description)
        </td>
    </tr>
    <tr>
        <td>
           @Html.TextBox("nr", sorting.Nr)
        </td>
        <td>
            @Html.TextBox("desc", sorting.Description)
        </td>
    </tr>
</table>
    <input type="submit" value="go" />
}
<br />


@using (Ajax.BeginForm("WorkplaceHealthFactors", null, new AjaxOptions() { UpdateTargetId = "FormContainer", HttpMethod = "Post", InsertionMode = InsertionMode.Replace, OnSuccess = "UpdateSuccess", OnFailure = "UpdateFailure" }, new { id = "UpdateForm" }))
{
    WebGrid grid = new WebGrid(Model, canSort: false);
    int row = 0;

    if (Model.Any())
    {
        @grid.GetHtml(
                htmlAttributes: new { id = "examples" },
                tableStyle: "table",
                headerStyle: "table_HeaderStyle",
                footerStyle: "table_PagerStyle",
                rowStyle: "table_RowStyle",
                alternatingRowStyle: "table_AlternatingRowStyle",
                selectedRowStyle: "table_SelectedRowStyle",
                columns: grid.Columns(
                grid.Column("Nr", @Resources.Localization.nr, format: @<text>
                            <span class="display-mode"><label id="NrLabel">@item.Nr</label></span>
                            @Html.TextBox("Model[" + (++row - 1).ToString() + "].Nr", (object)item.Nr, new { @class = "edit-mode" })
                </text>, style: "p10"),

                grid.Column("Description", @Resources.Localization.description, format: @<text>
                            <span class="display-mode"><label id="DescriptionLabel">@item.Description</label></span>
                            @Html.TextBox("Model[" + (row - 1).ToString() + "].Description", (object)item.Description, new { @class = "edit-mode" })
                            @Html.Hidden("Model[" + (row - 1).ToString() + "].HarmingFactorId", (object)item.HarmingFactorId)
                </text>, style: "p80"),

                        grid.Column("", "", format: @<text>
                            <a href="" id="@item.HarmingFactorId" class="link_button edit-button display-mode">@Resources.Localization.edit</a>
                            <a href="DeleteWorkplaceHealthFactorRecord/@item.HarmingFactorId" id="@item.HarmingFactorId" class="link_button delete-button display-mode">@Resources.Localization.delete</a>
                            <a href="" id="@item.HarmingFactorId" class="link_button update-button edit-mode">@Resources.Localization.update</a>
                            <a href="" id="@item.HarmingFactorId" class="link_button cancel-button edit-mode">@Resources.Localization.cancel</a>
                        </text>)
                    )
                )
    }
}

这是我在 Controller 中的排序方法:

    [HttpPost]
    public ActionResult FactorFieltering(string desc, string nr)
    {
        using (var db = new HRMEntities())
        {
            List<CatalogHarmingFactor> harmingFactorList = db.CatalogHarmingFactors.Where(e => e.Nr.Contains(nr) && e.Description.Contains(desc))).ToList();
            List<HarmingFactorClass> model = new List<HarmingFactorClass>();
            foreach (var item in harmingFactorList)
            {
                model.Add(new HarmingFactorClass(){Nr=item.Nr, Description=item.Description, HarmingFactorId= item.HarmingFactorId });
            }
            return View("Partial/_WorkplaceHealthFactors", model);
        }
    }

需要添加什么 JS 部分才能解决我的问题？

标记图片:

Answer 1

• 在 javascript 中创建一个 Search() 函数。
• 创建 javascript 事件以在每次用户在 nr 或 desc 文本框内键入时调用 Search()
• 在 Search() 函数中使用 $.get 调用 Controller 中的部分 View 并返回用户在文本框中键入的数据的部分 View :

Controller :

public class AdministrationController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public PartialViewResult FactorFiltering(string nr,string desc)
    {
        //Write your search functionality and pass the model to the partial view...
        return PartialView("~/Views/Partial/_WorkplaceHealthFactors.cshtml");
    }
}

查看:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#nr").on('keyup', function () {
            Search();
        });

        $("#desc").on('keyup', function () {
            Search();
        });

        function Search() {
            var nr = $("#nr").val();
            var desc = $("#desc").val();

            $.get('@Url.Action("FactorFiltering", "Administration")', { nr: nr, desc: desc }, function (data) {
                $("#result").html(data);
            });
        }
    });
</script>
@Html.TextBox("nr")
@Html.TextBox("desc")
<div id="result">
</div>