Question

我有以下控制器和视图：

SearchController.cs ：

  public class SearchController : Controller
  {
    public ActionResult Index()
    {
      return View();
    }

    public ActionResult SearchResults()
    {
      int rnd = new Random().Next(100);
      var model = new List<SearchResultModel>
      {
        new SearchResultModel { Id=rnd, FirstName="Peter" + rnd, Surname="Pan" },
        new SearchResultModel { Id=rnd+1, FirstName="Jane", Surname="Doe"+rnd }
      };
      return PartialView("SearchResults", model);
    }
  }

Index.cshtml ：

@model WebApplication1.Models.SearchCriterionModel

@{
  ViewBag.Title = "Index";
}

<script type="text/javascript">
  $(document).ready(function () {
    $('#btnSearch').click(function (evt) {
      evt.preventDefault();
      $('#placeholder').load("/Search/SearchResults");
    })
  });
</script>

<button id="btnSearch">Search</button>
<div id="placeholder"></div>

我刚才发现我用于视图的模板（标准的编辑模板）插入了一个Html.BeginForm，它不知何故让我填写了部分视图到我的{{ 1}}。所以我删除了杂乱并尝试“从头开始”看起来 - 它工作。我现在可以使用div成功将部分视图SearchResults加载到div。

但是：这只能运作一次。也就是说，在第一次按下按钮时，将调用代码隐藏方法id = placeholder，并使用第一组“随机化”数据填充SearchResults()。单击多次会输入客户端点击方法，但不再进入我的div方法，所以我猜不会发生回发！？为什么会这样？我怎样才能“修复”这个问题，也就是说，每次按下按钮时都要学习如何正确操作并获取新数据？

Answer 1

我的MVC有点生疏，但您可以尝试在URL中添加一个随机数，以便浏览器无法从缓存中获取它。不确定控制器方法是否会忽略＆＃39; r＆＃39;参数与否。

<script type="text/javascript">
   $(document).ready(function () {
     $('#btnSearch').click(function (evt) {
       evt.preventDefault();
       var random = getRandomNumber();  //TODO: implement
       $('#placeholder').load("/Search/SearchResults?r=" + random);
     })
   });
</script>

Answer 2

为了完成，我就是这样做的。

首先，我使用了一个表单，因为我想将参数传递给控制器中的action方法，类似于：

@using(Html.BeginForm())
{
  .
  .
  some input elements
  .
  .
  <input type="submit" value="Search" />
}

然后我使用了以下脚本。请注意，为此，action方法现在必须将ViewModel的实例作为参数。

<script type="text/javascript">
  $(document).ready(function () {
    $("form").submit(function () {
      var model = $(this).serialize();
      $.ajax({
        url: '@Url.Action("SearchResults", "Search")',
        data: model,
        cache: false,
        dataType: "html",
        success: function (response) {
          $("#placeholder").html(response);
        }
      });
      return false;
    })
  });
</script>

将部分视图加载到div只能工作一次

2 个答案: