如何仅刷新MVC 5中的部分索引页面？

Question

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

我正在使用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

public class 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>
}

Answer 1

我会在你的搜索部分放一个表格.然后通过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替换表单选择器.

Answer 2

虽然这个问题已经有了答案,但我想我会发布一种可行的替代方法.此方法使用相同的操作方法,仅检查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操作方法,如果Request是AjaxRequest,它返回一个Partial View,它用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);
}

希望这有助于某人.