asp.net-mvc – 如何仅刷新MVC 5中的部分索引页面？

发布时间：2020-12-16 00:14:24 所属栏目：asp.Net 来源：网络整理

导读：“索引”页面包含两个部分视图.一个是用户输入搜索条件,另一个是显示结果. 如何仅更新“结果”视图中的数据？我正在使用MVC 5和Razor.我已经看到了一些这方面的例子,主要是使用ajax和jquery.我问的是什么是最好的(更容易)解决方案 // INDEX VIEW： div id="

“索引”页面包含两个部分视图.一个是用户输入搜索条件,另一个是显示结果.
如何仅更新“结果”视图中的数据？

我正在使用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'); }
});

除非我有拼写错误,否则应该有效.您需要使用表单标记的Id替换表单选择器.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!