如何动态加载部分视图 MVC5

Question

我有一个包含塔式菜单项的索引视图页面。单击任何菜单项时，我想加载部分视图。

我习惯于使用网络用户控件，但这似乎有些不同。

在下面的代码中，ActionResult 索引包含菜单项的塔。

加载索引视图后，它看起来像下面的快照。

    public class EnterpriseManagerController : AlumCloudMvcControllerBase
    {
        public class PhotoViewModel
        {
            public int Width { get; set; }
            public int Height { get; set; }
            public short MaxPhotoBytes { get; set; }
            public string GenericPhoto { get; set; }
            public bool IsLogo { get; set; }
        }

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

        public PartialViewResult Avatar()
        {

            var x = new PhotoViewModel { Width = _avatarwidth, Height = _avatarheight, MaxPhotoBytes = _maxavatarbytes, GenericPhoto = _genericLogo };

            return PartialView(x);
        }
}

当单击菜单项 Avatar 时，我想在菜单项塔的右侧加载 _AvatarPartial。当调用 EnterpriseManagerController Avatar PartialViewResult 时，我想将 PhotoViewModel 传递给 PartialView(x)。

我的 Index.cshtml 的代码如下所示：

    <div id="controlPanWrap">
        @Html.Partial("_VerticalMenuPartial")

   //I NEED TO LOAD THE PARTIAL VIEWS RIGHT HERE
    </div>

这是我的头像部分视图的样子：

_AvatarPartial.cshtml

如何加载 Avatar 局部视图以使 _AvatarPartial.cshtml 的内容正好位于以下位置：

    <div id="controlPanWrap">
        @Html.Partial("_VerticalMenuPartial")

   _AvatarPartial.cshtml
    </div>

当单击其他一些菜单项时，是否将 _SomeOtherMenuItemPartial.cshtml 放入该空间并删除 _AvatarPartial.cshtml？

如果这可以用 JavaScript 完成而不需要重新加载整个页面，那就太好了。

Answer 1

uiHelper.getHTML 只是一个 XMLHttpRequest 对象的包装器。

setTimeout(function () {

    var prevLi = document.getElementById('liAvatar');
    var liOnclick = function () {
        if (this === prevLi) { return; };
        prevLi.removeClass('li-selected');
        prevLi = this.addClass('li-selected');


        uiHelper.getHTML({
            url: '/enterprisemanager/' + this.innerHTML, isAsync: true, cache: true, successCallback: function () {

                var scripts = this.substring(this.indexOf('<script') - 7, this.lastIndexOf('<\/script>') + 9);
                var styles = this.substring(this.indexOf('<style'), this.lastIndexOf('<\/style>') + 8);

                var that = this.replace(scripts, '');
                that = that.replace(styles, '');


                var newScript = document.createElement('script');
                newScript.setText(scripts.replace('<script type="text/javascript">', '').replace('<\/script>', '')).setAttr('id', 'script_' + prevLi.innerHTML);
                document.head.appendChild(newScript);

                var newStyle = document.createElement('style');
                newStyle.setText(styles.replace('<style type="text/css">','').replace('<\/style>','')).setAttr('id', 'style_' + prevLi.innerHTML);
                document.head.appendChild(newStyle);

                document.getElementById('controlPanOpt').innerHTML = that;
            }
        });

    };
    document.body.selectorAll('.controlPanOpts li', function () {

        for (var i = 0; i < this.length; i++) {
            this[i].onclick = liOnclick;
        };

    });
}, 1500);

--我的原型

HTMLStyleElement.prototype.setText = function (txt) {
    /// <summary>Sets the textContent of this HTMLStyleElement to the txt param</summary>
    /// <returns type="this" />
    if ('textContent' in this) { this.textContent = txt || ''; } else { this.innerText = txt || ''; };
    return this;
};
HTMLScriptElement.prototype.setText = function (txt) {
    /// <summary>Sets the textContent of this HTMLScriptElement to the txt param</summary>
    /// <returns type="this" />
    if ('textContent' in this) { this.textContent = txt || ''; } else { this.innerText = txt || ''; };
    return this;
};
HTMLElement.prototype.setAttr = function (name, val) {
    /// <summary>Adds a new name and value attribute that are the name, val params</summary>
    /// <param name="name" type="String">Name of attribute to create onto this HTMLElement</param>
    /// <param name="val" type="String">Value to set the new name attribute being added onto this HTMLElement</param>
    /// <returns type="this" />
    this.setAttribute(name, val); return this;
};