Jquery 如何使用AJAX过滤MVC结果

我有一个简单的MVC控制器，它使用一个函数并返回CardType列表。现在在我的视图中，我只需执行一个简单的foreach循环，并绘制出每个未返回的CardType，现在我在视图上有了过滤文本框，以便它们可以输入一些文本，点击enter，页面将刷新并显示新的结果。但我知道我可以使用AJAX来实现这一点，但我真的不知道从哪里开始或结束：）

这是我的控制器方法

[HttpGet]
public ActionResult CardTypes(TypeSearchModel searchModel)
{
    var cs = new CardService();
    searchModel.CardTypes = cs.GetCardTypes(searchModel);
    return View(searchModel);
}

这是我的观点

@model CardSite.Models.CardTypeSearchModel

@{
ViewBag.Title = "Card types";
}


    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li>@Html.ActionLink("Created new card type", "CreateCardType", "Card")</li>
        </ul>
    </div>


<div class="row">
<div class="col-md-4">
    <h2>Card types</h2>
    <p>
        Here is the list of card types
    </p>
</div>
</div>

@using (@Html.BeginForm("CardTypes", "Card", FormMethod.Get))
{
@Html.TextBoxFor(x => x.Name);
}
<table class="table">
<tr>
<th>
    @Html.DisplayNameFor(x => x.Name)
</th>
<th>
    View
</th>
</tr>

@foreach (var item in Model.CardTypes)
{
<tr>
<td>
        @Html.DisplayFor(m => item.Name)
</td>
<td>
    <a href="/Card/CardType/@item.Id">View</a>
</td>
</tr>
}

</table>

---

这工作正常，但我遇到的问题是，名称从未填充过，即使我在文本框中放置了一些内容并单击了“筛选”按钮，它没有拾取它的原因是什么？

最好对初始数据和筛选数据使用相同的方法。因此，首先应该向TypeSearchModel添加字符串（例如）参数“filter”。如果设置了此参数，则使用此参数并仅收集过滤数据；如果未设置，则收集初始数据。然后，我确定您不希望过滤数据的ajax响应包含页面的所有HTML标记。因此，您应该做的第二件事是添加条件：

if (this.Request.IsAjaxRequest())
{
    return PartialView("_ResultsOnlyWithoutLayout");
}

return View();

这将对初始数据使用默认页面视图（带有布局模板），对ajax请求使用指定的局部视图

现在你准备好出发了。将javascript处理程序添加到filter onchange事件（如果是select）或onkeyup（如果是文本输入）中，并向相同的url发出$.get请求，但添加了“filter”参数。您将收到只包含过滤数据的html，而不包含布局，因此您可以简单地用新数据替换现有数据（您应该为包含html元素的数据提供一些id以便使用）

例如，您可以用下一种方法（使用jquery的javascript）来实现这一点：

或相同：

$.get(
    "/your-url?filter=" + $("#filter").val(),
    function (result) {
        $("#yourContainer").html(result);
    }
);

---

希望这有帮助

我已经通过使用这个javascript函数修复了它

$.get("@Url.Action("CardTypesTable", "Card")", { Name : '@Model.Name'}, function(data)
            {
                var div = $('div').find("#card-types-table");
                div.empty();
                alert(data);
                $.each(data, function(items, item) {
                    div.append("Card type : " + item.Name);
                });
            })

$.get("@Url.Action("CardTypesTable", "Card")", { Name: $('#Name').val() }, function(data)
            {
                var div = $('div').find("#card-types-table");
                div.empty();
                var htmlText = "";

                $.each(data, function (items, item) {
                    htmlText += ("<tr>" +
                                "<td>" +
                                item.Name +
                                    "</td>" +
                                "<td>" +
                                    "<a href='/Card/CardType/" + item.Id + "'>View</a>" +
                                "</td>" +
                            "</tr>");
                });

                div.append("<table class=table>" +
                            "<tr>" +
                                "<th>" +
                                    "Name" +
                                "</th>" +
                                "<th>" +
                                    "View" +
                                "</th>" +
                            "</tr>"+
                            htmlText+
                            "</table>");
            })

然后返回数据，然后我使用javascript写出html，我确信有一种比“text”+更简单的方法，但我记不起来了。希望这能帮助其他人：）

p.S.searchModel.CardTypes只是一个列表，CardTypes只是一个模型

清除表格，除了标题。。。。。。。。。附加到表

$.get(
    "/your-url?filter=" + $("#filter").val(),
    function (result) {
        $("#yourContainer").html(result);
    }
);

$.get("@Url.Action("CardTypesTable", "Card")", { Name: $('#Name').val() }, function(data)
            {
                var div = $('div').find("#card-types-table");
                div.empty();
                var htmlText = "";

                $.each(data, function (items, item) {
                    htmlText += ("<tr>" +
                                "<td>" +
                                item.Name +
                                    "</td>" +
                                "<td>" +
                                    "<a href='/Card/CardType/" + item.Id + "'>View</a>" +
                                "</td>" +
                            "</tr>");
                });

                div.append("<table class=table>" +
                            "<tr>" +
                                "<th>" +
                                    "Name" +
                                "</th>" +
                                "<th>" +
                                    "View" +
                                "</th>" +
                            "</tr>"+
                            htmlText+
                            "</table>");
            })

public JsonResult CardTypesTable(CardTypeSearchModel searchModel)
    {
        var cs = new CardService();
        searchModel.CardTypes = cs.GetCardTypes(searchModel);
        return Json(searchModel.CardTypes, JsonRequestBehavior.AllowGet);
    }