“索引”页面包含两个部分视图.一个是用户输入搜索条件,另一个是显示结果.
如何仅更新“结果”视图中的数据？
如何仅更新“结果”视图中的数据？
我正在使用MVC 5和Razor.我已经看到了一些这方面的例子,主要是使用ajax和jquery.我问的是什么是最好的(更容易)解决方案
// INDEX VIEW：
<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 = 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,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 Action发布一些动作帖子,它应返回：
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'); }
});
