[英]How to dynamically load partial views MVC5
我有一个包含塔菜单项的索引视图页面。 单击任何菜单项时,我想加载局部视图。
我习惯于使用Web用户控件,但这似乎有所不同。
在ActionResult Index下面的代码中,包含菜单项的塔。
加载索引视图后,它看起来像下面的快照。
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头像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完成此操作,那将是很好的选择。
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;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.