如何使用 AJAX 过滤我的 MVC 结果

Question

我有一个简单的 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>

如果有人有任何想法或教程可以帮助我，那就太好了。

---更新---

只是一个快速更新，我已将表格 cshtml 代码移动到新视图， 这是我目前的脚本

<script type="text/javascript">
$(document).ready(
        $('#filter-card-types').click(function () {
            var url = "Card/CardTypesTable/" + @Model.Name
            $.get(url, function(data)
            {
                if(data)
                {
                    $("div").find("#card-types-table").append(data);
                }
            })
        })
    );
</script>

现在这是在做一些事情，但不是正确的事情，它基本上是找到我的 div 是正确的，但是获取的数据是它所在的同一页面，所以它有点在新的 div 中重新呈现自己。知道为什么我的数据与它所在的视图相同吗？

---更新---

这是我的新 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);
                });
            })

这工作正常，但我遇到的问题是永远不会填充名称，即使我在我的 TextBox 中放了一些东西并单击过滤器按钮，有什么原因它没有拾取它？

Answer 1

对初始数据和过滤数据使用相同的方法是个好主意。因此，您首先应该将字符串（例如）参数“过滤器”添加到您的 TypeSearchModel。使用此参数并仅收集已过滤的数据（如果已设置）或初始数据（如果未设置）。那么我确定您不希望您的带有过滤数据的 ajax 响应包含所有页面的 HTML 标记。所以你应该做的第二件事是添加条件：

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

return View();

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

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

例如，您可以通过以下方式执行此操作（带有 jquery 的 javascript）：

$("#yourContainer").load("/your-url?filter=" + $("#filter").val());

还是一样的：

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

希望这会有所帮助！

Answer 2

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

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

它调用控制器函数 CardTypesTable 看起来像这样

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

然后返回数据，然后我使用 javascript 写出 html，我确信有比“文本”+ 更简单的方法，但我不记得了。希望这对其他人有帮助:)

附： searchModel.CardTypes 只是一个列表，而 cardtypes 只是一个模型