ASP.NET MVC 5 Ajax search function returns partial view, but not the search results

问题

I'm working on an ajax search functionality triggered by a onkeydown event in the searchstring textbox. As soon as you enter something in the textbox, it' suppose to return only the categories that match the searchstring immidiately in a partial view.

Search function on the server side works just the way I want, and it returns the list of viewmodels based on the result back to the view. However, the view looks totally unchanged.

Below is the index View where I entered absolutely nothing in the textbox:

But when I enter the searchstring in such a way, that only "Hats" should be displayed, it looks like this:

This is my problem that I need to fix.

Here's the relevant controller code:

public ActionResult SearchCategories(string searchString)
        {
            var allCategories = _repository.GetAll().ToList();
            var result = allCategories.Where(c => c.Name.StartsWith(searchString, StringComparison.OrdinalIgnoreCase))
                    .OrderBy(x => x.Name).ToList();

            List<CategoryViewModel> categoryViewModels = new List<CategoryViewModel>();

            foreach (Category c in result)
            {                      
                CategoryViewModel model = new CategoryViewModel { Id = c.Id, Name = c.Name, Parent = c.Parent };
                categoryViewModels.Add(model);
            }


            var categoryParents = new List<Category>();
            foreach (Category c in result)
            {
                if (c.Parent != null)
                {
                    Category parentCategory = _repository.GetById(c.Parent.Value);
                    categoryParents.Add(parentCategory);
                }
            }

            foreach (CategoryViewModel model in categoryViewModels)
            {
                if (model.Parent != null)
                {
                    model.ParentName = categoryParents.Where(c => c.Id == model.Parent.Value).First().Name;
                }
            }            

            return PartialView("PartialSearchResult", categoryViewModels);
        }

The Index.cshtml:

@using GUI.Models
@model IEnumerable<GUI.Models.CategoryViewModel>
@{
    ViewBag.Title = "Index";
}
<h2>Categories</h2>
<p>
    @Html.ActionLink((HttpUtility.HtmlDecode(" &laquo;") + " Back to Admin Page"), "Index", "Admin", null, new { @class = "btn btn-primary btn-large" }) | 
    @Html.ActionLink("Create New Category" + (HttpUtility.HtmlDecode(" &raquo;")), "Create", "Category", null, new { @class = "btn btn-primary btn-large" })
</p>
<div id="indexTable">
    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayName("Parent")
            </th>
            <th>
                @using (Ajax.BeginForm("SearchCategories", "Category", new AjaxOptions { UpdateTargetId = "target" }))
                {
                    <div class="form-group">
                        @Html.TextBox("searchString", "", new { onkeydown = "searchCategories();", onkeyup = "searchCategories();", onkeypress = "searchCategories();" })
                        <input type="submit" value="Search" class="btn btn-default" />
                    </div>
                }
            </th>
        </tr>

        @if (Model != null)
        {
            foreach (CategoryViewModel item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @if(item.Parent != null)
                        {
                            @Html.DisplayFor(modelItem => item.ParentName)
                        }                        
                    </td>
                    <td>
                        @if (item.Parent != null)
                        {
                            @Html.ActionLink("Edit", "Edit", new {id = item.Id}) 

                            if(User.Identity.IsAuthenticated)
                            {
                                if(User.IsInRole("Admin"))
                                {
                                    <strong> | </strong>@Html.ActionLink("Delete", "Delete", new {id = item.Id}) 
                                }
                            }                            

                        }

                    </td>
                </tr>
            }
        }

    </table>
</div>
<hr />

@section Scripts {

    @Scripts.Render("~/bundles/jquery",
                    "~/bundles/jqueryajax")


    <script type="text/javascript">

        function searchCategories() {
            var searchWord = $('#searchString').val();

            $.ajax({
                url: '/Category/SearchCategories?searchString=' + searchWord,
                type: 'GET',
                sucess: function (data) {
                    alert('Koppling');
                }
            });
        }

Note that this javascript function makes the ajax call to the controller:

function searchCategories() {
            var searchWord = $('#searchString').val();

            $.ajax({
                url: '/Category/SearchCategories?searchString=' + searchWord,
                type: 'GET',
                sucess: function (data) {
                    alert('Koppling');
                }
            });
        }

The partial View I want to use to return the search results:

@model IEnumerable<GUI.Models.CategoryViewModel>

<div id="target">
<table class="table">
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @if (item.Parent != null)
            {
                @Html.DisplayFor(modelItem => item.ParentName)
            }
        </td>       
        <td>
            @if (item.Parent != null)
            {
                @Html.ActionLink("Edit", "Edit", new { id = item.Id })

                if (User.Identity.IsAuthenticated)
                {
                    if (User.IsInRole("Admin"))
                    {
                        <strong>|</strong>@Html.ActionLink("Delete", "Delete", new { id = item.Id })
                    }
                }
            }
        </td>
    </tr>
}

</table>
</div>

@section Scripts {

    @Scripts.Render("~/bundles/jquery",
                    "~/bundles/jqueryajax")


}

I've also noticed, that the ajax request got the status code "200 OK". So how do I solve this?

回答1:

Try to rename this in controller:

public ActionResult SearchCategories(string searchString) 

into this:

public PartialViewResult SearchCategories(string searchString) 

in your View use this:

also don't forget to put jquery.unobtrusive-ajax.js before this code

@using (Ajax.BeginForm("SearchCategories", "Home",
    new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "searchResults" }))
{
    <h3>Search:</h3>
    @Html.TextBox("searchString", null, new { id = "Search" })
    <input type="submit" value="Search" class="btn btn-primary" />
}
<div id="searchResults"></div>

hope this helps

来源：https://stackoverflow.com/questions/23155236/asp-net-mvc-5-ajax-search-function-returns-partial-view-but-not-the-search-resu