ASP.NET MVC 使用 JQuery 将多个部分视图加载到单个 div 中
我正在开发一个由导航树、内容框和搜索框组成的帮助页面。导航树具有指向常见问题和术语表的链接,每个链接都链接到返回部分视图的操作。
在导航树的右侧,我有一个内容 div,我希望包含在导航树中选择的部分视图。
成功案例(我想要完成的任务):单击其中一个常见问题解答链接会调用我的控制器中的 FAQ()
方法,然后返回一个部分视图,然后显示该视图在导航树右侧的内容 div 中。单击另一个项目将导致加载另一个部分视图。
我该怎么办?我读过大量 ASP.NET MVC JQuery 加载博客文章和教程,但找不到任何人完全做到了这一点。
非常感谢!
I am working on a help page which is composed of a navigation tree, content box, and search box. The navigation tree has links to Frequently Asked Questions and Glossary, each of which are linked to an Action which return partial views.
To the right of the navigation tree I have a single content div that I would like to contain whichever partial view is selected in the navigation tree.
Success case (what I want to accomplish): clicking on one of the FAQ links calls the FAQ()
method in my controller, then returns a partial view which is then displayed in my content div to the right of the navigation tree. Clicking on another item would cause another partial view to be loaded.
How do I go about this? I've read a ton of ASP.NET MVC JQuery loading blog posts and tutorials but can't find anyone who's done exactly this.
Many thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您应该能够使用 jQuery 方法
.load()
将 HTML 加载到您的 div 中。http://api.jquery.com/load/
您可以创建一个返回部分内容的操作以 HTML 格式查看。
ASP.NET MVC 将部分视图作为完整视图返回查看页面
You should be able to use the jQuery method
.load()
to load HTML into your div.http://api.jquery.com/load/
You can create an action that returns the partial view as HTML.
ASP.NET MVC Returning Partial View as a full View Page
jQuery:
您可以做的一种简单方法是在页面加载时一次性加载“Container Div”中的所有部分视图(如果性能不是问题)
然后在“容器”内为每个部分div分配不同的div id,然后使用jquery控制show();隐藏();对于每个分区。
中层控制器:
但是,如果我是你,“术语表”和“常见问题解答”对我来说看起来是相同的模型,不应该首先将其放在不同的部分视图中。
如果他们确实在单独的模型中设计,在这种情况下,我建议您在要显示的模型之上创建一个代理类作为 ViewModel,然后仅使用一个部分视图加载它
jQuery:
one easy way you can do is load all partial views in "Container Div" at page load in one go (if performance is not a issue)
then assign each partial div with different div id inside "container", than use jquery to control show(); hide(); for each div.
MVC:
however if i were you, "Glossary" and "FAQ" looks same model to me it shouldn't be put in different partial view in first place.
if they did designed in separate model, in this scenario, i would recommend you to create a proxy class as a ViewModel above models you want to display, and then load it with one partial view only