Question

我有一些标签，我想在单击标签（overviewTab）时在第二个标签内调用RenderPartial。

现在RenderPartial在页面加载时加载，但我只想在单击该概述选项卡时加载它。我怎么能做到这一点？

这是我到目前为止所做的：

<script type="text/javascript">
    var overviewLoaded = false;
    $(document).ready(function() {
            $('#overviewTab').off('click').on('click', function() {
                if (!overviewLoaded) {
                    overviewLoaded = true;

                }
            });
</script>


<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a tabindex="0" target="_self" href="#edit" role="tab" data-toggle="tab">Edit</a></li>
    <li id="overviewTab"><a tabindex="0" target="_self" href="#overview" role="tab" data-toggle="tab">Account Overview</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="edit">
        // -- stuff
    </div>
    <div class="tab-pane" id="overview">
        <div class="row">
            @{ Html.RenderPartial("GetInfoPanel"); }
        </div>
    </div>
</div>

Answer 1

根据你的要求，没有办法做到这一点。 Html.RenderPartial作为初始页面请求的一部分在服务器上发生

最简单的方法是将html作为新的ViewResult公开，然后在想要显示它时通过ajax查询加载它

Answer 2

尝试使用RenderPartialViewToString，并使用该字符串设置html选项卡。：

<强>控制器

 [HttpGet]
        public JsonResult GetTab()
        {

            var msg = String.Empty;
            bool isValid = false;
            var view = String.Empty;

            try
            {
                var model = new Artist();
                model.Name = "Name";
                model.Band = "Band";
                view = RenderPartialViewToString("_ArtistDetail", model);
                isValid = true;
            }

            catch (Exception ex)
            {
                msg = String.Format("{0}: {1}", DateTime.Now.ToShortTimeString(), ex.Message);
                //or view = "Error" view
            }

            var result = new { isValid = isValid, view = view, msg = msg };
            return Json(result, JsonRequestBehavior.AllowGet);
        }

        //Magic here!
        protected string RenderPartialViewToString(string viewName, object model = null)
        {
            if (string.IsNullOrEmpty(viewName))
                viewName = ControllerContext.RouteData.GetRequiredString("action");

            ViewData.Model = model;

            using (var sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
                viewResult.View.Render(viewContext, sw);

                return sw.GetStringBuilder().ToString();
            }
        }

部分视图_ArtistDetail.cshtml

@model WebApplication1.Models.Artist

<h1>@Model.Name</h1>
<h3>@Model.Band</h3>

<强> HTML

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a tabindex="0" target="_self" href="#edit" role="tab" data-toggle="tab">Edit</a></li>
    <li id="overviewTab"><a tabindex="0" target="_self" href="#overview" role="tab" data-toggle="tab">Account Overview</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="edit">
        // -- stuff
    </div>
    <div class="tab-pane" id="overview">
        <div id="myTab" class="row">
            Loading...
        </div>
    </div>
</div>

<强> JS

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var target = $(e.target).attr("href");
        if (target == "#overview" && !overviewLoaded ) {
             GetTab();
            overviewLoaded  = true;
        };
    });

    var GetTab = function () {
        var div = $("#myTab");
        div.empty();
        div.append("Loading...");

        $.ajax({
            url: "/GetTab",
            type: 'GET',
            dataType: 'json',
            processData: false,
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                div.empty();

                if (data.isValid) {
                    div.append(data.view);
                } else {
                    div.append(data.msg);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log("error");
            }
        });
    };

Answer 3

当用户点击该标签的链接时，您可以通过ajax加载概览标签的内容。

因此，请在链接中添加DIR并添加 html5数据属性，以存储要加载的目标网址。

[info] Loading global plugins from /home/student/.sbt/0.13/plugins
[info] set current project to student (in build file:/home/student/)
>

我们不会在标签内容中进行Id调用，因为我们将使用ajax加载它。

<li id="overviewTab">
 <a tabindex="0" target="_self"  id="overviewLink" href="#overviewLink" role="tab"
          data-url="@Url.Action("GetInfo","Home")"  data-toggle="tab">Account Overview</a>
</li>

现在使用jQuery监听此链接上的RenderPartial事件，并使用jQuery <div class="tab-content"> <div class="tab-pane active" id="edit">Edit Stuff</div> <div class="tab-pane" id="overview"></div> </div>方法异步加载概述选项卡的内容。

click

假设您的HomeController中有一个名为GetInfo的动作方法，它返回Overview选项卡的局部视图。

load()

如果您希望上述代码适用于多个标签，您可以将jQuery选择从基于Id的选择更改为基于css类的选择。

上面的代码在每次单击链接时都会对action方法进行ajax调用。您可以添加一些客户端代码来跟踪单击的链接，并在第一次调用后阻止调用（在本地数组中存储哪些项被单击，如果它存在于数组中，请不要进行调用）

在选项卡上单击加载RenderPartial

3 个答案: