Question

我有一个简单的MVC控制器，它使用一个函数并返回一个CardType列表。现在在我看来我只是做一个简单的foreach循环并绘制出返回的每个CardType，现在我在视图上有过滤文本框，这样他们就可以输入一些文本命中输入，页面将刷新新结果。但我知道我可以使用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

最好对初始数据和过滤数据使用相同的方法。所以你要做的第一件事就是添加字符串（例如）参数＆＃39; filter＆＃39;到你的TypeSearchModel。使用此参数并仅收集已过滤的数据（如果已设置），或收集初始数据（如果未设置）。然后，我确定您不希望您的带有过滤数据的ajax响应包含所有网页的HTML标记。所以你要做的第二件事就是添加条件：

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

return View();

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

现在你准备好了。将javascript处理程序添加到过滤器onchange事件（如果是select）或onkeyup（如果是文本输入）并将$ .get请求添加到同一个url但添加了＆＃39; filter＆＃39;参数。您将收到仅包含没有布局的过滤数据的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，我确信有一种更简单的方法然后“文本”+但我记不清了我的头脑。希望这有助于其他人：）

P.S。 searchModel.CardTypes只是一个List，而cardtypes只是一个模型

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

2 个答案: