如何僅刷新 MVC 5 中的索引頁面的一部分？

索引頁麵包含兩個部分視圖。一種是供使用者輸入搜尋條件，另一種是顯示結果。如何僅更新結果視圖中的數據？

我正在使用 MVC 5 和 Razor。我看過一些關於這方面的例子，主要是使用 ajax 和 jquery。我在問什麼是最好的（更喜歡更簡單的）解決方案

// 索引視圖：

<div id="div_Search"> 
@{Html.RenderPartial("~/Views/Shared/Search.cshtml", ViewBag.Model_Search );}
</div>

<div id="div_Results">
@{Html.RenderPartial("~/Views/Shared/Results.cshtml", ViewBag.Model_Results );}
</div>


// HOME CONTROLLER

公共類 HomeController: Controller { MainContextDB db = new MainContextDB();

public ActionResult Index()
{
   // Code to initialize ViewBag.Model_Search, etc...
   .... 

   // Code to initialize  ViewBag.Model_Results, etc... (Values empty at startup) 
   ....

   return View();
}


[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult GetResults([Bind(Include = "DropOffLoc,DropOffDate,PickUpDate")] Search search)
{

  // Retrieve results using the search parameters, etc...
  ....

  // THIS RETURNS THE VIEW WITH THE DATA, BUT IN A SEPARATE PAGE (AS EXPECTED) 
  return View("~/Views/Shared/Results.cshtml", results);            

  // THIS RETURNS THE VIEW IN THE MAIN PAGE BUT WITH EMPTY DATA (AS EXPECTED) 
  return  RedirectToAction("Index");

  // HOW TO RETURN THE VIEW WITH THE DATA IN THE MAIN PAGE ?
  ??????? 

}

}

// 這是搜尋部分視圖

@model Models.Results

@using (Html.BeginForm("GetResults", "Home", FormMethod.Post, new { @class = "my-form" }))
{
   @Html.AntiForgeryToken()
   @Html.ValidationSummary(true)

   <div class="form-group input-group-sm">
       @Html.LabelFor(model => model.DropOffLoc)
       @Html.DropDownListFor(model => model.DropOffLoc, ViewBag.LocationList as SelectList, new { @class = "form-control"  })
       @Html.ValidationMessageFor(model => model.DropOffLoc)
   </div>

   <div class="form-group input-group-sm">
       @Html.LabelFor(model => model.DropOffDate)
       @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." })
       @Html.ValidationMessageFor(model => model.DropOffDate)
   </div>

       <div class="form-group input-group-sm">
       @Html.LabelFor(model => model.PickUpDate)
       @Html.TextBoxFor(model => model.PickUpDate, new { @class = "form-control datepicker", placeholder = "Enter Pick-up date here..." })
       @Html.ValidationMessageFor(model => model.PickUpDate)
   </div>

   <div style="text-align: center; margin-top: 10px; margin-bottom: 10px;">
       <input type="submit" id="getResults" value="GET RESULTS" class="btn btn-default btn-success" />
   </div>
}

我會在您的搜尋部分中放置一個表格。然後通過 JQuery 將一些操作發佈到您的 GetResults 操作，它應該返回：

return PartialView("~/Views/Shared/Results.cshtml", results); 

然後，在您的 JQuery 文章的成功回調中，將返回的結果吐到您的 $("#div_Results") 中，如下所示：

$.ajax({
   url: '/Home/GetResults',
   type: "POST",
   dataType: "html",
   data: $("#FormId").serialize(),
   success: function (data) {
       //Fill div with results
       $("#div_Results").html(data);
   },
   error: function () { alert('error'); }
});

除非我有錯字或其他什麼，否則應該可以。您需要將表單選擇器替換為表單標籤的 ID。

引用自：https://stackoverflow.com/questions/21170064