部分视图在ajax更新后不会呈现

时间:2013-04-30 21:25:55

标签: c# asp.net-mvc jquery razor

asp mvc 3。

在初始渲染时,一切都很棒。我输入一个我知道存在的搜索字符串并单击搜索按钮,部分视图(_searchresult)消失。我在开发人员工具的网络选项卡中进行了测试,我看到ajax按预期返回结果。因此ajax调用获得正确的结果但不呈现。我去了

localhost/home/_searchresult 

但显示的只是[]。

查看:

    @model Tracker.Models.PaginatedList<TrespassTracker.Models.PersonViewModel>

        <div id="search-index">
                <div class="editor-field">   
                    <label>First Name:</label>
                    @Html.TextBox("FirstName")

                    <label style = "margin-left: 15px;">Last Name:</label>
                    @Html.TextBox("LastName", "", new { style = "margin-right: 15px;" })
                </div>            
                <div id="search-controls-index">
                      <input type="button" id="searchbtn" class="skbutton" value="Search" />
                      <input type="button" id="addPersonbtn" class="skbutton" value="Add New Person" onclick="location.href='@Url.Action("AddPerson", "Person")'"/>
                </div>
        </div>

        <div id="result-list-index">  
            @Html.Partial("_SearchResult", Model)
         </div>
        <div id="paging-controls">

            <div id="paging-controls-left">
            @{  if(Model.HasPreviousPage)
                    {
                        @Html.ActionLink("<< Previous", "Index", new { page = (Model.PageIndex - 1) });                                
                    }

                    if (Model.HasNextPage)
                    {
                        @Html.ActionLink("Next >>", "Index", new { page = (Model.PageIndex + 1) });  
                    }
            }
            </div>

            <div id="paging-controls-right">
                @{ int PageNumber = @Model.PageIndex + 1; }
                Page: @PageNumber of @Model.TotalPages
            </div>
        </div>

   </div>

jquery的:

$(document).ready(function(){    
        $("#searchbtn").on('click', function () {
            var fsname = $("#FirstName").val();
            var ltname = $("#LastName").val();

                $.ajax({
                    type: 'GET',
                    url: "Home/_SearchResult",
                    data: { fname: fsname, lname: ltname },
                    success: function (data) {
                        $("#result-list-index").html(data);
                    },
                    error: function () {
                        $("#result-list-index").html("An error occurred while trying to retrieve your data.");
                    }
                });
        });
  });

控制器:

    public ActionResult Index(int? page)
    {
        const int PAGESIZE = 10;

        var peopleList = repo.GetPeople();

        var pagedPeopleList = new PaginatedList<PersonViewModel>(peopleList, page ?? 0, PAGESIZE);


        return View(pagedPeopleList);
    }


    public JsonResult _SearchResult(string fname, string lname)
    {
        var peopleList = repo.GetSearchResult(fname, lname);

        return Json(peopleList, JsonRequestBehavior.AllowGet);
    }

========== EDIT ===========

我通过评论假设_searchresult方法是错误的,所以我把它改成了PartialResult方法:

    public PartialViewResult _SearchResult(string fname, string lname)
    {
        var peopleList = repo.GetSearchResult(fname, lname);

        //return Json(peopleList, JsonRequestBehavior.AllowGet);
        return PartialView("_SearchResult");
    }

现在部分呈现在索引页面上,但由于内部错误500,它返回失败通知。我跟踪它并在局部视图中找到模型上的空错误。这是部分的。指示的错误位置在foreach,对象未设置为实例...我相信这意味着它返回一个空模型。

@model Tracker.Models.PaginatedList<TrespassTracker.Models.PersonViewModel>


                    <table class="data-table">
                        <tr>
                            <th>
                                FirstName
                            </th>
                            <th>
                                LastName
                            </th>
                            <th>
                                Gender
                            </th>
                            <th>
                                DOB
                            </th>
                            <th>
                                School
                            </th>
                            <th>
                                IsStudent
                            </th>
                            <th></th>
                        </tr>

                    @foreach (var item in Model) {
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.FirstName)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.LastName)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.Gender)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.DOB)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.School)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.IsStudent)
                            </td>
                            <td>
                                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })
                            </td>
                        </tr>
                    }

                    </table>

1 个答案:

答案 0 :(得分:2)

您没有返回部分视图,而是返回数据。要返回部分视图,您必须执行类似的操作(请注意,我们不会发送回JSON):

public ActionResult _SearchResult(string fname, string lname)
{
    var peopleList = repo.GetSearchResult(fname, lname);

    //Is peopleList the right model type? If not, create your model here

    return View(peopleList);
}