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，它返回一个部分视图，它用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);
    }

希望这有助于某人。

Answer 3

事实上，您需要使用AJAX。

我认为最好的方法是使用局部视图并向其发出AJAX加载（jQuery中的jQuery.load）。

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

3 个答案: