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

Question

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

我正在使用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的：控制 { MainContextDB DB =新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> 
} 

Answer 1

我會在你的搜索部分放置一個表格。然後，有一些動作後說，通過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替換表單選擇器。

Answer 2

你會的，其實，需要使用AJAX。

正如我所看到的，最好的方法是獲得一個局部視圖並向其發佈AJAX負載（jQuery中的jQuery.load）。

Answer 3

雖然這個問題已經有了答案，但我想我會發佈一個可行的替代方法。這種方法使用相同的操作方法，並且只檢查Request是否爲Ajax調用，然後僅替換部分正文。這裏只是相關的代碼。

//搜索表單

@using (Ajax.BeginForm("Index", "Home", new AjaxOptions() 
                   { HttpMethod = "GET", UpdateTargetId = "my-posts", 
                    InsertionMode = InsertionMode.Replace 
                   })) 
         { 
          <input type="text" name="term" placeholder="Search B.I & G" /> 
          <input type="submit" value="" /> 
         } 

//查看

<section> 
<div id="my-posts"> 
    @Html.Partial("_Posts", Model.Posts) 
</div> 

現在這裏是Index操作方法的一部分，如果該請求是AjaxRequest，它返回部分視圖，用id my-posts替換div的內容。如果請求不是Ajax請求，那麼它將加載整個View。

 public async Task<ActionResult> Index(string term) 
    { 

     var viewModel = new HomeFeedsViewModel(); 

     viewModel.Posts = await Task.Run(() => 
            db.Posts.Include("Comments") 
            .Include("By").OrderByDescending(o => o.PostedOn) 
            .ToList()); 
     //Return a Partial View which replaces content on the View 
     //only if the Request is an Ajax Request 
     if (Request.IsAjaxRequest()) 
     { 
      viewModel.Posts = viewModel.Posts 
       .Where(a => a.Title.IndexOf(term, StringComparison.OrdinalIgnoreCase) >= 0 
       || a.Message.IndexOf(term, StringComparison.OrdinalIgnoreCase) >= 0 
       ); 

      return PartialView("_Posts", viewModel.Posts); 
     } 

     return View(viewModel); 
    } 

希望這可以幫助別人。