如何刷新索引页的一部分在MVC 5？ [英] How to refresh only part of the Index page in MVC 5?

问题描述

索引页面包含两个部分景色。一个用于用户输入的搜索条件，另一个显示结果。
如何以更新结果的数据只查看？

我使用MVC 5和剃刀。我已经看到了这方面的一些例子，大多采用AJAX和jQuery。我问什么是最好的（preFER容易）这种解决方案

//索引视图：

 ＆LT; D​​IV ID =div_Search＆GT;
@ {Html.RenderPartial（〜/查看/共享/ Search.cshtml，ViewBag.Model_Search）;}
＆LT; / DIV＆GT;＆LT; D​​IV ID =div_Results＆GT;
@ {Html.RenderPartial（〜/查看/共享/ Results.cshtml，ViewBag.Model_Results）;}
＆LT; / DIV＆GT;
//家居控制器
 

公共类HomeController的：控制器
{
    MainContextDB DB =新MainContextDB（）;

 公众的ActionResult指数（）
{
    // code初始化ViewBag.Model_Search，等等。
    ....    // code初始化ViewBag.Model_Results，等...（价值在启动时为空）
    ....    返回查看（）;
}
[HttpPost]
[ValidateAntiForgeryToken]
公众的ActionResult GetResults（[绑定（包括=DropOffLoc，DropOffDate，PickUpDate）的搜索搜索）
{   //使用搜索参数等检索结果...
   ....   //此方法返回的数据视图，但在一个单独的页面（如预期）
   返回视图（〜/查看/共享/ Results.cshtml，结果）;   //这个方法返回的主要页面，但空的数据的视图（如预期）
   返回RedirectToAction（「指数」）;   //如何返回带有数据的查看主页？
   ???????}
 

}

//这是搜索的局部视图

  @model Models.Results@using（Html.BeginForm（GetResults，家，FormMethod.Post，新{@class =我型}））
{
    @ Html.AntiForgeryToken（）
    @ Html.ValidationSummary（真）    ＆LT; D​​IV CLASS =表单输入组群-SM＆GT;
        @ Html.LabelFor（型号=＆GT; model.DropOffLoc）
        @ Html.DropDownListFor（型号=＆GT; model.DropOffLoc，ViewBag.LocationList为的SelectList，新{@class =表格控}）
        @ Html.ValidationMessageFor（型号=＆GT; model.DropOffLoc）
    ＆LT; / DIV＆GT;    ＆LT; D​​IV CLASS =表单输入组群-SM＆GT;
        @ Html.LabelFor（型号=＆GT; model.DropOffDate）
        @ Html.TextBoxFor（型号=＆GT; model.DropOffDate，新{@class =的形式控制日期选择器，占位符=输入这里下车日期...}）
        @ Html.ValidationMessageFor（型号=＆GT; model.DropOffDate）
    ＆LT; / DIV＆GT;        ＆LT; D​​IV CLASS =表单输入组群-SM＆GT;
        @ Html.LabelFor（型号=＆GT; model.PickUpDate）
        @ Html.TextBoxFor（型号=＆GT; model.PickUpDate，新{@class =的形式控制日期选择器，占位符=在这里输入接机最新...}）
        @ Html.ValidationMessageFor（型号=＆GT; model.PickUpDate）
    ＆LT; / DIV＆GT;    ＆LT; D​​IV的风格=文本对齐：中心;保证金顶：10px的;保证金底：10px的;＆GT;
        ＆LT;输入类型=提交ID =getResultsVALUE =得到结果级=BTN BTN-默认BTN-成功/＆GT;
    ＆LT; / DIV＆GT;
}
 

解决方案

我把一个形式，你的搜索部分。然后，有一些动作帖子说，通过jQuery，您GetResults行动，这应该返回：

 返回PartialView（〜/查看/共享/ Results.cshtml，结果）;
 

然后，在你的JQuery发布成功回调，吐返回的结果到$（＃div_Results），像这样：

  $。阿贾克斯（{
    网址：'/主页/ GetResults'，
    键入：POST，
    数据类型：HTML，
    数据：$（＃FormId），序列化（）。
    成功：功能（数据）{
        //结果填入格
        $（＃div_Results）的html（数据）;
    }，
    错误：函数（）{警报（'错误'）; }
}）;
 

除非我有一个错字或东西，这应该工作。你需要与你的表单标签的ID来代替表格选择。

The Index page contains two partial views. One is for the user to enter the search criteria, the other to show the results. How to update the data in the Results view only ?

I'm using MVC 5 and Razor. I've seen some examples on this, mostly using ajax and jquery. I'm asking what would be the best (prefer easier) solution for this

// 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 ?
   ??????? 

}

}

// THIS IS THE SEARCH PARTIAL VIEW

@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>
}

解决方案

I would put a form in your search partial. Then have some action post that, via JQuery, to your GetResults Action, which should return:

return PartialView("~/Views/Shared/Results.cshtml", results); 

Then, in the success callback of your JQuery post, spit the returned results to your $("#div_Results") like so:

$.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'); }
});

Unless I have a typo or something, that should work. You'll need to replace the form selector with the Id of your form tag.

这篇关于如何刷新索引页的一部分在MVC 5？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！