使用JS和ASP.NET MVC的Web网格搜索功能

Question

I am using ASP.NET MVC. I try to implement search box .

I have a input box and a button:

<div>
    <input type="text" name="Search" id="Search" />
    <input type="submit" value="Search" id="SearchButton" />
</div>

Then I use JS to receive user input and trigger a function:

$(document).ready(function () {
    $('#SearchButton').click(function Search() {
        $.ajax({
            url: '@Url.Action("Search", "PCA")',
            data: { AutoCribItemID: $('#Search').val() },
            type: "POST",
            dataType: "json",
            success: function (result) {
                var data = new Array();
                for (var i = 0; i < result.Data.length; i++) {
                    data.push(result.Data[i]);
                }

                loadData(data);
            },
            error: function () {
                alert("Failed! Please try again.");
            }
        });
    });
});

Then in back end, there is a respond method:

[HttpPost, ActionName("Search")]
public JsonResult Search(string AutoCribItemID) {
    List<PCAModel> allRecords = new List<PCAModel>();
    allRecords = db.elements.Where(model => model.AutoCribItemID.Contains(AutoCribItemID)).ToList();
    return Json(new { Data = allRecords }, JsonRequestBehavior.AllowGet);
}

You can see this C# method returns a list to frontend. Then what I want to do is to show all data after searching to user.

Here is a method to show data after searching:

function loadData(result) {
    var table = $('<table id="indexTable"></table>');
    var thead = $('<thead></thead>');
    var trow = $('<tr class="header"></tr>');
    trow.append('<th>EffectiveDate</th>');
    trow.append('<th>ChangeAgree</th>');
    trow.append('<th>Client</th>');
    trow.append('<th>Installation</th>');
    trow.append('<th>AutoCribItemID</th>');
    trow.append('<th>RGBSupplier</th>');
    trow.append('<th>Price</th>');
    trow.append('<th>SubmitDate</th>');
    trow.append('<th>WINUserName</th>');
    trow.append('<th>Export</th>');
    thead.append(trow);
    table.append(thead);
    var tbody = $('<tbody></tbody>');
    for (var i = 0; i < result.length; i++) {
        tbody.append(result[i]);
    }

    table.append(tbody);

    $('#indexTableBody').html(table);
    location.reload();
}

Note: 'result' parameter above is from C# function from backend.

The question is, web page shows all record in the table instead of showing searched data. I only need to show data after searching in web grid.

Answer 1

Without knowing the structure of your AutoCribItemID's, my guess is that because you're using .Contains in your where clause it's returning anything that matches that search term. So, for example, if you had integer IDs and someone searched for "1", it would return any ID that contains the number 1 including 1, 10, 11, 12, 13, etc. You probably want to use an equality comparison instead, ie model.AutoCribItemID == AutoCribItemID