2013-04-30 98 views
1

asp mvc 3.ajax更新後部分視圖不會渲染

在初始渲染時,一切都很棒。我輸入一個我知道存在的搜索字符串,然後單擊搜索按鈕,部分視圖(_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); 
    } 

==========編輯======== ===

我假設通過評論_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> 
+0

我很困惑。你是否調用了_SearchResult控制器動作,該動作返回JSON,並期望它使用它作爲模型重新渲染一個局部視圖? – Jacob 2013-04-30 21:32:13

+0

@Jacob,他正試圖調用這種方式的一部分。當他稱之爲偏上時,它就起作用了。 Tehou似乎認爲返回JSON的動作方法也會作爲一個孩子的方法來處理他的部分內容,那不是事實。 – 2013-04-30 21:34:34

+0

@teahou,在您最近的嘗試中,您需要將模型傳遞給對'PartialView'的調用,類似於@ mattytommo的代碼。 – Jacob 2013-04-30 21:50:10

回答

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); 
} 
+0

很感謝,我讓她舔了舔。這個模型確實存在問題。我手動編碼分頁,並使用自定義類,我必須將它傳遞給部分視圖,並返回一個新的PaginatedList <>視圖。感謝你們讓我走上正軌。 – BattlFrog 2013-04-30 22:23:01