將部分視圖加載到div中僅一次

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>

我只是發現我用於視圖的模板（標准的Edit模板）插入了Html.BeginForm ，以某種方式不允許我將局部視圖填充到div 。 因此，我消除了混亂，並嘗試了“從頭開始”，然后看-確實可行。 現在，我可以使用id = placeholder將局部視圖SearchResults成功加載到div 。

但是：這僅適用一次。 也就是說，在第一次單擊按鈕時，將調用代碼隱藏方法SearchResults() ，並且div中將填充第一組“隨機”數據。 單擊不止一次會進入客戶端click方法，但是不再進入我的SearchResults()方法，所以我想沒有回發發生了！ 為什么會這樣？ 我該如何“修復”此問題，也就是說，學會如何正確執行此操作並在每次按下按鈕時獲取新數據？

Answer 1

我的MVC有點生銹，但是您可以嘗試向URL添加一個隨機數，這樣瀏覽器就不會從緩存中獲取它。 不知道控制器方法是否會忽略'r'參數。

<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" />
}

然后，我使用了以下腳本。 請注意，要使此方法起作用，現在，動作方法還必須將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>