如何在重新加载后将数据传递到部分视图
How to pass data to partial view after reload
>Controller:
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public class ExperimentalController : Controller
{
public ActionResult ReloadTest1()
{
string temp = DateTime.Now.ToString();
ViewBag.Time = temp;
return View();
}
public PartialViewResult ReloadTest1Partial()
{
string temp = DateTime.Now.ToString();
ViewBag.Time = temp;
return PartialView();
}
}
视图:
@{
ViewBag.Title = "ReloadTest1";
string time = this.ViewBag.Time;
ViewData["date"] = time;
ViewBag.TheTitle = "test";
}
<h2>ReloadTest1</h2>
<select id="iSelect" name="iSelect" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div id="myPartialViewContainer">
@{Html.RenderPartial("_ReloadTest1Partial", null, new ViewDataDictionary { {"vb", ViewBag}});}
</div>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
$('#iSelect').on('change', function () {
$("#myPartialViewContainer").load('@(Url.Action("ReloadTest1Partial", "Experimental", null, Request.Url.Scheme))')
})
</script>
部分视图:
@{
var vb = ((dynamic)ViewData["vb"]);
}
<div>
<span>@vb.Time</span>
</div>
什么不起作用:
将视图包/视图数据直接从控制器传递到部分视图,因为 mvc 不接受这种情况发生。
什么是有效的:
从上面的代码中,您可以看到分部视图使用 Html.RenderPartial 方法和向下传递的 viewbag 获取数据一次。重新加载确实适用于下拉列表中所选对象的更改
需要什么:
我需要在重新加载时或之后将数据传递到部分视图,这主要是一个测试设置,但我最终希望能够根据选择值更新表。
如果 somone 能够给我一个工作示例,请这样做。
在控制器中,您使用ViewBag
来设置自定义值,但在视图中,您正在使用ViewData
以及引用不同的名称(您在控制器中设置 ViewBag 的时间属性,但您希望视图中使用 ViewData 的 vb 属性)。
更改视图以期望模型":
@model MyModel
@{
string time = "";
if (ViewData["Time"] != null)
{
time = ViewData["Time"];
}
}
<div>
<span>@Model.Time</span>
</div>
并更改您的控制器以传递它:
public ActionResult ReloadTest1()
{
var model = new MyModel {Time = DateTime.Now.ToString()};
return View(model);
}
public PartialViewResult ReloadTest1Partial()
{
var model = new MyModel {Time = DateTime.Now.ToString()};
return PartialView(model);
}
您的主视图文件将如下所示:
@model MyModel
<div id="myPartialViewContainer">
@{Html.RenderPartial("_ReloadTest1Partial", model);}
</div>
并创建您的模型:
public class MyModel
{
public string Time {get;set;}
}
另一方面,最好使用强类型model
而不是ViewBag
或ViewData
,因为您可能会遇到编译错误和智能感知
最终解决方案:
控制器:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;
using System.Web.Mvc;
namespace RolloutTool.Controllers
{
[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public class ExperimentalController : Controller
{
public ActionResult ReloadTest1()
{
var model = new RolloutTool.Models.ExperimentalViewModels.MyModel { Time = DateTime.Now.ToString() };
string temp = DateTime.Now.ToString();
ViewBag.Time = temp;
ViewData["Time"] = temp;
return View(model);
}
[HttpPost]
public PartialViewResult ReloadTest1Partial(string test)
{
var model = new RolloutTool.Models.ExperimentalViewModels.MyModel { Time = DateTime.Now.ToString() };
string temp = DateTime.Now.ToString();
ViewBag.Time = temp;
ViewData["Time"] = temp;
return PartialView("_ReloadTest1Partial", model);
}
// GET: Experimental
public ActionResult Experimental()
{
ViewBag.Message = "Your contact page.";
ViewBag.TestValue = 10;
string[] temp = { "alpha", "beta", "gamma", "delta" };
ViewBag.names = temp;
int temp2 = temp.Length;
ViewBag.nameslength = temp2;
return View();
}
}
}
视图:
@{
ViewBag.Title = "ReloadTest1";
string time = this.ViewBag.Time;
ViewData["date"] = time;
ViewBag.TheTitle = "test";
}
@model RolloutTool.Models.ExperimentalViewModels.MyModel
<h2>ReloadTest1</h2>
<select class="chosen-select" id="iSelect" name="iSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div id="myPartialViewContainer">
@{Html.RenderPartial("_ReloadTest1Partial", Model);}
</div>
@Styles.Render(
"~/content/chosen/chosen.css",
"~/content/chosen/prism.css",
"~/content/chosen/style.css",
"~/content/bootstrap.css",
"~/content/Site.css")
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/chosen/chosen.jquery.js"></script>
<script src="~/Scripts/chosen/prism.js"></script>
<script>
var config = {
'.chosen-select': {},
'.chosen-select-deselect': { allow_single_deselect: true },
'.chosen-select-no-single': { disable_search_threshold: 10 },
'.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' },
'.chosen-select-width': { width: "95%" }
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
$('#iSelect').on('change', function () {
getPartial();
})
</script>
<script>
function getPartial() {
var tempSelect = document.getElementById("iSelect");
var tempResult = tempSelect.options[tempSelect.selectedIndex].text;
$.ajax({
url: "ReloadTest1Partial",
type: "POST",
data: {'test' = tempResult}, //if you need to post Model data, use this
success: function (result) {
$("#myPartialViewContainer").html(result).find("select").each(function () {
$(this).chosen({});
}
});
}
</script>
@{
string time = "";
string temp = "";
if (ViewData["vb"] != null)
{
temp = "1";
time = ((dynamic)ViewData["vb"]).Time;
}
else if (ViewContext.Controller.ViewBag.Time != null)
{
temp = "2";
time = ViewBag.Time;
}
else if (ViewData["Time"] != null)
{
temp = "3";
time = (string) ViewData["Time"];
}
}
@model RolloutTool.Models.ExperimentalViewModels.MyModel
<div>
<span>@time</span>
<span>@Model.Time</span>
<span>@temp</span>
</div>
<select class="chosen-select"></select>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/chosen/chosen.jquery.js"></script>
<script src="~/Scripts/chosen/prism.js"></script>
这将正确更新部分视图并重新加载所选选择下拉列表。(请参阅样式和脚本在分部视图中不起作用)
相关文章:
- 如何处理数据视图中项目的鼠标点击
- 具有多个控件的数据视图
- 在slickgrid数据视图中使用深度映射
- 数据视图和原型继承
- 对于光滑网格数据视图,如果有更多的行数,则不会加载所有行
- 创建一个滚动条一个ext js数据视图
- 如何使用外部存储呈现数据视图的 tpl
- Google 图表数据视图动态设置列
- Slickgrid-如何更新数据视图中的数据
- 如何动态重新加载任何slickgrid数据视图
- extjs数据视图未找到事件选择
- 如何将数据添加到SlickGrid数据视图
- 如何使用函数对Google Charts数据表或数据视图进行排序
- Sencha Touch:数据视图上的组件,看起来像列表组头
- 数据视图滚动问题sencha触摸
- EXTJS 3.4如何在选择更改时获取记录数据视图
- 数据视图样本在MVC架构下不工作
- Extjs数据视图不显示图像
- Extjs 4数据视图拖放(复制)只工作一次
- 谷歌图表API无法动态设置数据视图列