Question

我希望我能对此有所了解：

我正在尝试在我正在处理的网站上创建“显示更多结果”功能。目前，有一个列表，其中包含当前使用razor语法显示的十个项目。

@foreach (Movie m in Model.MovieList)
{
   <li>
      @Html.RouteLink("Details", "Details", new { detailsId = m.Id }, new { @class = "hidden double-click-href" })
      <h1>
         @(m.CurrentIdentifier): @m.MovieTitle
         <span class="right">@m.Movie.Description</span>
       </h1>
         <div class="fields">
            <span class="label">Release Date</span>
            <span class="value">@m.CreatedOn.ToShortDateString()</span>
            <span class="label">Genre</span>
            <span class="value">@m.Genre.Name</span>
         </div>
   </li>
}

有一个链接“显示更多结果”，单击该链接时，会将接下来的10个案例附加到列表中并附带查询。我能想到的唯一方法是使用JQuery创建一个调用动作的ajax调用，使用我需要的信息返回JSON结果，并填写一个字符串，该字符串是HTML的“模板”（重复）以上使用JavaScript方法。

问题在于我不喜欢HTML基本上是重复的事实，如果我在调用动作期间尝试填充MovieList属性（我需要将其设为ajax或类似的东西，以便没有“闪烁”）在页面刷新之前不会被拾取。

是否有一种设置MovieList属性的好方法，这样我就不必复制HTML并仍然进行ajax调用（没有页面回发）？

修改

我尝试了@Jamie Dixon的建议，当我看到请求并且我可以看到正在返回正确的HTML时，它没有更新页面（页面保持与我点击链接之前完全相同）。这是javascript：

 function GetMovieList() {
    var url = location.pathname + '/Filter';
    var size = $('#my-movie-list > li').size();

    $.ajax({
      type: "GET",
      url: url,
      data: { fromNumber: size }, //the number of rows already displayed
      contentType: "application/x-www-form-urlencoded",
      success: function (data) {
      SetShowMoreResultsFeatures(); //checks to see if the 'Show More Results' link should be disabled and some other stuff.
      }
    });
  }

这是控制器方法：

[Route("/Filter")]
public ActionResult GetFilteredMovies(int fromNumber)
{
  ViewData.Model = new DashboardIndexViewModel
  {
    CurrentUser = CurrentUser.User,
    MyCalendar = new CalendarListView(CurrentUser.User),
    CaseCount = movieQuery.Execute(CurrentUser.User.Id).Count(),
    Movies= GetMovies(fromNumber)
  };


  return View("_MovieItem", ViewData.Model);
}

这是部分视图“_MovieItem”：

@model Matrix.Investigator.Website.ViewModels.Dashboard.DashboardIndexViewModel

@foreach (Movie m in Model.MovieList)
{
   <li>
      @Html.RouteLink("Details", "Details", new { detailsId = m.Id }, new { @class = "hidden double-click-href" })
      <h1>
         @(m.CurrentIdentifier): @m.MovieTitle
         <span class="right">@m.Movie.Description</span>
       </h1>
         <div class="fields">
            <span class="label">Release Date</span>
            <span class="value">@m.CreatedOn.ToShortDateString()</span>
            <span class="label">Genre</span>
            <span class="value">@m.Genre.Name</span>
         </div>
   </li>
}

Answer 1

将HTML放在部分视图中，该视图遍历集合以输出其HTML。

当您对控制器方法进行ajax调用时，让控制器返回相同的部分视图并将其传递给您的新集合。

然后，您只需将返回的HTML数据放入页面的相关部分即可，并且没有重复。

在不使页面闪烁的情况下更改viewmodel属性

1 个答案: