重新加載后如何將數據傳遞到局部視圖

Question

控制器：

[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來獲取數據一次。 重新加載確實對下拉列表中所選對象的更改起作用

需要什么：

重新加載時或之后，我需要將數據傳遞到局部視圖，這主要是測試設置，但是我最終希望能夠根據選擇值來更新表。

如果有人能給我一個有效的例子，請這樣做。

Answer 1

在控制器中，您正在使用ViewBag設置自定義值，但是在您的視圖中，您正在使用ViewData並引用其他名稱（您在控制器中設置ViewBag的Time屬性，但是您希望在視圖中使用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;}
}

ViewBag ，使用強類型model而不是ViewBag或ViewData總是更可取，因為這樣會出現編譯錯誤和IntelliSense

Answer 2

最終解決方案：

控制器：

 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> 

這樣可以正確更新部分視圖，並重新加載選擇的下拉列表。 （請參閱樣式和腳本在部分視圖中不起作用 ）