如何通过点击按钮获得更多结果?

时间:2016-02-23 18:17:53

标签: ajax asp.net-mvc asp.net-mvc-4 razor

我想询问当我点击"显示更多"时,我可以获得更多结果的方式按钮,无需加载页面,也不重复相同的结果。

例如,我有一个数据库的结果集,并假设它有10个结果。在它们下面我有一个名为&#34的按钮;显示更多"。当我点击它时,我会看到另外10个结果,依此类推。

此处还有一张图片:

enter image description here

我的观点:

@model SmartBookLibrary.ViewModel.UserVm

<table class="table table-striped table-bordered table-advance table-hover">
  <thead>
    <tr>
      <th>
        <i class="fa fa-image"></i> Image
      </th>
      <th class="hidden-xs">
        <i class="fa fa-book"></i> Book Name
      </th>
      <th class="hidden-xs">
        <i class="fa fa-eye"></i> Views
      </th>
      <th> </th>
    </tr>
  </thead>
  <tbody>
    @foreach (var item in Model.ReadLaters)
    {
    <tr>
      <td>
        <img class="img-thumbnail circle" src="~/Images/@item.Book.Book_Image" style="width:75px;height:75px" />
      </td>
      <td class="hidden-xs">
        <h4><b>@item.Book.Book_name</b></h4>
      </td>
      <td>
        700
        <span class="label label-success label-sm"> Views </span>
      </td>
      <td>
        <a class="btn btn-sm grey-salsa btn-outline" href="~/book/@item.Book_Id/@item.Book.UrlSlug"> View </a>
      </td>
    </tr>
    }
  </tbody>
</table>
<input type="submit" class="btn green-sharp btn-outline btn-block sbold uppercase" value="Load More">

我的控制器方法:

[HttpGet]
public ActionResult Index()
{                
    //Get current user id to check 
    var x = User.Identity.GetUserId();

    var vm = new UserVm();

    //ReadLater Books
    var ReadLaterBooks = db.ReadLaters.Where(p => p.User_Id == x).ToList();
    var ReadLaterBooksResult = ReadLaterBooks.Take(5).ToList();
    if (ReadLaterBooks != null)
    {
        vm.ReadLaters = ReadLaterBooksResult;
    }

    return View(vm);
}

那么,我怎样才能使用ajax或其他任何东西来完成这项工作呢?谢谢!

0 个答案:

没有答案