AJAX过滤WebGrid

Question

I have an issue with using JS on my webgrid for sorting it. So the idea is that user inputs string into textbox and webgrid bellow is refreshed (filtered on matching results) without refreshing the hole page. Now I have code which works well with refreshing the page and filtering is triggered on button click.

This is markup:

@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>)
                    )
                )
    }
}

This is my sorting method in the 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);
        }
    }

What JS part has to be added so as to solve my problem?

Markup picture :

Answer 1

• Create a Search() function in javascript.
• Create javascript events to call Search() everytime the user types inside the nr or desc textboxes
• Inside the Search() function use $.get to call the partial view in your controller and return the partial view for the data the user typed in the textboxes:

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");
    }
}

View:

<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>