Question

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

我习惯使用web用户控件，但这似乎有所不同。

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

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

Index partial view

    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

如何加载头像局部视图以使_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;
};

如何动态加载部分视图MVC5

1 个答案: