Question

我需要在我的应用程序中有一个包含2个选项卡的View。在挣扎之后，我想出了以下Bootstap Tabs和Partial Views：

<div id="tabs">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#OptinStatus" data-toggle="tab">Optin Status</a>
            </li>
            <li>
                <a href="#OptiHistory" data-toggle="tab">Optin History</a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="OptinStatus">
                @Html.Partial("_OptinStatus")
            </div>
            <div class="tab-pane" id="OptiHistory">
                @Html.Partial("_OptinHistory")
            </div>
        </div>
    </div>

只要我在“结果”操作中执行此操作，我就可以并排显示两个标签并切换：

 public ActionResult Results(OptinStatusViewModel viewModel)
        {
                        // return RedirectToAction("OptInStatus");
            return View();
        }

现在的问题是我想在控制器中进行一些处理并在部分视图中显示结果。所以我把上面的内容改为：

return RedirectToAction("OptInStatus");

该Action Action应该是第一个局部视图：

 public ActionResult OptInStatus(OptinStatusViewModel viewModel)
        {
            HarmonyOperation harmonyoper = new HarmonyOperation();

            ListProfileData res = new ListProfileData();

            string listid = "60285206-7c9e-4af3-a0c4-0a69ec8d4bb4";  // Preferences Master List
            string email = (string) TempData["User"];

            string customerKey = Tools.GetCustomerKeyByEmail(email);

            res = harmonyoper.GetProfileFromListByCustomerKey(listid, customerKey);

            IDictionary<string, string> profileData = new Dictionary<string, string>();
            // Found record in LIST for email
            if (res != null)
            {
                profileData = Tools.ListKeyValueToDictionary(res.attributes);

                //Check existence of this email
            }

            return View("_OptinStatus");

当我这样做的问题是我得到一个新的视图，在其选项卡中显示部分视图的“内容”而不是该部分视图。如何将数据传输到部分视图？

Answer 1

当您应该返回PartialView时，您将从控制器返回一个视图。

所以而不是：

return View("_OptinStatus");

你这样做：

return PartialView("_OptinStatus", model); //model is not required

你应该在实际视图“_OptinStatus”中获得此模型，而不是在“主视图”中。

使用单独的部分模型的示例：

控制器：

public ActionResult Results()
{
    return View();
}

public ActionResult OptInStatus()
{
    return PartialView("_OptinStatus");
}

... etc

结果视图：

<div class="tab-content">
    <div class="tab-pane active" id="OptinStatus">
        @Html.Action("_OptinStatus")
    </div>
    <div class="tab-pane" id="OptiHistory">
        @Html.Action("_OptinHistory")
    </div>
</div>

_OptinStatus-partialView：

@model OptinStatusModel
<div>My partial for Status</div>

_OptinHistory-partialView：

@model OptinHistoryModel
<div>My partial for History</div>

对于两个部分使用viewModel的相同示例：

控制器：

public ActionResult Results(OptinStatusViewModel viewModel)
{
    return View("Results", viewModel);
}

结果视图：

@model OptinStatusViewModel
    <div class="tab-content">
        <div class="tab-pane active" id="OptinStatus">
            @Html.Partial("_OptinStatus", Model.OptionStatusModel)
        </div>
        <div class="tab-pane" id="OptiHistory">
            @Html.Partial("_OptinHistory", Model.OptionHistoryModel)
        </div>
    </div>

_OptinStatus-partialView：

@model OptinStatusModel
<div>My partial for Status</div>

_OptinHistory-partialView：

@model OptinHistoryModel
<div>My partial for History</div>

我的首选解决方案：

jQuery，包含在_layouts

中

$(".partialContents").each(function(index, item) {
    var url = $(item).data("url");
    if (url && url.length > 0) {
        $(item).load(url);
    }
});

现在，您只需使用div（以及上面代码中的ajax），而不是使用Razor渲染视图：

<div class="partialContents" data-url="/Home/OptInStatus">

HomeController将受到“OptInStatus”行动的打击。

MVC和Bootstrap选项卡 - 无法在部分视图中显示数据

1 个答案: