简体   繁体   English

如何动态加载部分视图MVC5

[英]How to dynamically load partial views MVC5

I have a index view page that has tower menu items. 我有一个包含塔菜单项的索引视图页面。 When any of the menu items are clicked I would like to load a partial view. 单击任何菜单项时,我想加载局部视图。

I'm use to working with web usercontrols, but this seems to be somewhat different. 我习惯于使用Web用户控件,但这似乎有所不同。

In the code below the ActionResult Index contains the tower of menu items. 在ActionResult Index下面的代码中,包含菜单项的塔。

When the index view is loaded it looks like the snap shot below. 加载索引视图后,它看起来像下面的快照。

索引局部视图

    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);
        }
}

When ever the menu item Avatar is clicked I would like to load the _AvatarPartial on the right side of the tower of menu items. 每当单击菜单项Avatar时,我都想将_AvatarPartial加载到菜单项塔的右侧。 When the EnterpriseManagerController Avatar PartialViewResult is called I would like to pass the PhotoViewModel to the PartialView(x). 调用EnterpriseManagerController头像PartialViewResult时,我想将PhotoViewModel传递给PartialView(x)。

The code for my Index.cshtml looks like: 我的Index.cshtml的代码如下:

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

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

This is what my Avatar partial view looks like: 这是我的头像局部视图:

_AvatarPartial.cshtml

How to I load the Avatar partial view to have the content of the _AvatarPartial.cshtml fit right in the cent of: 如何加载Avatar局部视图以使_AvatarPartial.cshtml的内容适合以下内容:

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

   _AvatarPartial.cshtml
    </div>

And when some other menu item is click have that _SomeOtherMenuItemPartial.cshtml fit into that space and the _AvatarPartial.cshtml be removed? 当单击其他菜单项时,是否已将_SomeOtherMenuItemPartial.cshtml放入该空间,并删除了_AvatarPartial.cshtml

If this can be done with JavaScript without reloading the entire page would be great. 如果可以在不重新加载整个页面的情况下使用JavaScript完成此操作,那将是很好的选择。

The uiHelper.getHTML is just a wrapper around a XMLHttpRequest object. 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);

--My prototypes -我的原型

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;
};

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM