Databases
StackOverflow2013
Postsdbo
POPartial view wont render after ajax update
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPartial view wont render after ajax update
    primarykey
    data
    text
    <p>asp mvc 3.</p> <p>On initial render, all is great. I enter a search string that i know exists and click the search button, the partial view (_searchresult) disappears. I tested in the network tab of the developer tool and I see ajax returns the results as expected. So the ajax call gets the correct results but does not render. I went to </p> <pre><code>localhost/home/_searchresult </code></pre> <p>but all it displays is [].</p> <p>View:</p> <pre><code> @model Tracker.Models.PaginatedList&lt;TrespassTracker.Models.PersonViewModel&gt; &lt;div id="search-index"&gt; &lt;div class="editor-field"&gt; &lt;label&gt;First Name:&lt;/label&gt; @Html.TextBox("FirstName") &lt;label style = "margin-left: 15px;"&gt;Last Name:&lt;/label&gt; @Html.TextBox("LastName", "", new { style = "margin-right: 15px;" }) &lt;/div&gt; &lt;div id="search-controls-index"&gt; &lt;input type="button" id="searchbtn" class="skbutton" value="Search" /&gt; &lt;input type="button" id="addPersonbtn" class="skbutton" value="Add New Person" onclick="location.href='@Url.Action("AddPerson", "Person")'"/&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="result-list-index"&gt; @Html.Partial("_SearchResult", Model) &lt;/div&gt; &lt;div id="paging-controls"&gt; &lt;div id="paging-controls-left"&gt; @{ if(Model.HasPreviousPage) { @Html.ActionLink("&lt;&lt; Previous", "Index", new { page = (Model.PageIndex - 1) }); } if (Model.HasNextPage) { @Html.ActionLink("Next &gt;&gt;", "Index", new { page = (Model.PageIndex + 1) }); } } &lt;/div&gt; &lt;div id="paging-controls-right"&gt; @{ int PageNumber = @Model.PageIndex + 1; } Page: @PageNumber of @Model.TotalPages &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>jquery:</p> <pre><code>$(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."); } }); }); }); </code></pre> <p>Controller:</p> <pre><code> public ActionResult Index(int? page) { const int PAGESIZE = 10; var peopleList = repo.GetPeople(); var pagedPeopleList = new PaginatedList&lt;PersonViewModel&gt;(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); } </code></pre> <p>==========EDIT===========</p> <p>I assume by the comments the _searchresult method is wrong, so I changed it to a PartialResult one:</p> <pre><code> public PartialViewResult _SearchResult(string fname, string lname) { var peopleList = repo.GetSearchResult(fname, lname); //return Json(peopleList, JsonRequestBehavior.AllowGet); return PartialView("_SearchResult"); } </code></pre> <p>Now the partial renders on the index page, but it returns the failure notice due to an internal error 500. I tracked it down and found a null error on the Model in the partial view. Here is the partial. The indicated error location is at the foreach, object not set to an instance... which I believe means it is returning a null Model.</p> <pre><code>@model Tracker.Models.PaginatedList&lt;TrespassTracker.Models.PersonViewModel&gt; &lt;table class="data-table"&gt; &lt;tr&gt; &lt;th&gt; FirstName &lt;/th&gt; &lt;th&gt; LastName &lt;/th&gt; &lt;th&gt; Gender &lt;/th&gt; &lt;th&gt; DOB &lt;/th&gt; &lt;th&gt; School &lt;/th&gt; &lt;th&gt; IsStudent &lt;/th&gt; &lt;th&gt;&lt;/th&gt; &lt;/tr&gt; @foreach (var item in Model) { &lt;tr&gt; &lt;td&gt; @Html.DisplayFor(modelItem =&gt; item.FirstName) &lt;/td&gt; &lt;td&gt; @Html.DisplayFor(modelItem =&gt; item.LastName) &lt;/td&gt; &lt;td&gt; @Html.DisplayFor(modelItem =&gt; item.Gender) &lt;/td&gt; &lt;td&gt; @Html.DisplayFor(modelItem =&gt; item.DOB) &lt;/td&gt; &lt;td&gt; @Html.DisplayFor(modelItem =&gt; item.School) &lt;/td&gt; &lt;td&gt; @Html.DisplayFor(modelItem =&gt; item.IsStudent) &lt;/td&gt; &lt;td&gt; @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) | @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) &lt;/td&gt; &lt;/tr&gt; } &lt;/table&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBattlFrog
    1. USBattlFrog
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POPartial view wont render after ajax update
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COI'm confused. Are you calling the `_SearchResult` controller action, which returns JSON, and expecting it to re-render a partial view using that as the model?
      singulars
      1. POPartial view wont render after ajax update
      1. USJacob
    2. CO@Jacob, he is trying to call a partial that way. It worked when he called it as a partial above. Tehou seems to think the action method that returns json will also act as a child method to his partial and thats not true.
      singulars
      1. POPartial view wont render after ajax update
      1. USDave Alperovich
    3. CO@teahou, with your latest attempt, you'll need to pass the model into your call to `PartialView`, similar to @mattytommo's code.
      singulars
      1. POPartial view wont render after ajax update
      1. USJacob
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload