如何在重新加载后将数据传递到部分视图

How to pass data to partial view after reload

本文关键字:数据 视图 新加载 加载      更新时间:2023-09-26

>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而不是ViewBagViewData,因为您可能会遇到编译错误和智能感知

最终解决方案:

控制器:

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>

这将正确更新部分视图并重新加载所选选择下拉列表。(请参阅样式和脚本在分部视图中不起作用)