C# 如何动态加载局部视图MVC5

我有一个索引视图页面，其中有塔式菜单项。单击任何菜单项时，我希望加载局部视图

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

在下面的代码中，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被点击时，我想加载菜单项塔右侧的_Avatar部分。调用EnterpriseManagerController Avatar PartialViewResult时，我希望将PhotoViewModel传递给PartialView（x）

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

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

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

_AvatarPartial.cshtml

如何加载化身部分视图以使

\u AvatarPartial.cshtml

的内容正好适合以下内容：

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

   _AvatarPartial.cshtml
    </div>

@Html.Partial（“部分”）
_AvatarPartial.cshtml

当其他菜单项被选中时，点击将

\u其他菜单empartial.cshtml

放入该空间并删除

\u AvatarPartial.cshtml

---

如果可以在不重新加载整个页面的情况下使用JavaScript完成此操作，那就太好了。

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

setTimeout（函数（）{
var prevLi=document.getElementById（'liAvatar'）；
var liOnclick=函数（）{
如果（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（'在这里看到我的答案您可以尝试使用ajax调用控制器中返回PartialView的方法。然后您可以将该部分视图的内容呈现到您的content div中……或者您可以看到我上面的人的答案：）唯一让我犹豫不决的是，每个视图都有自己的脚本。我给了你一个脚本来帮助你。我应该提到的是，我有一些视图的小脚本和样式。这里和那里有一些是很自然的。我已经发布了如何检索视图和处理脚本和样式。
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;
};