如何使用MVC在同一页面上显示多个小部件

时间:2008-11-03 17:40:20

标签: model-view-controller

我对MVC如何工作有点困惑,除了基本的例子我找不到任何东西。

我想制作一种基于小部件的设计;您可以选择各种小部件进入您的页面。每个小部件都应该对自己负责 - 它应该有一个控制器和一个视图。但主页怎么样?突然间,我的页面上有很多控制器!

显而易见的事情是以某种方式将控制器嵌入到视图中...... This is my widget {SomeWidget}但我读过“打破了MVC范式”。

某些小部件需要POST到不同的URL(如搜索框转到结果页面),有些小部件需要POST回到同一个URL(比如在文章中添加评论会带您回到文章中)。

最重要的是,用户应该能够编辑小部件周围的HTML - 例如,如果他们想要右侧的搜索框,他们可以键入<div style="float: right;">{SearchController}</div>(在我的范式破坏的世界中)< / p>

7 个答案:

答案 0 :(得分:2)

我不擅长网络编程,但我相信,从你描述的例子中,整个页面应该有一个模型,一个视图和一个控制器。现在,视图本身应该包含页面中每个窗口小部件的视图(对于页面控制器也是如此),它将调度它收到的消息。

从概念上讲,MVC(对于小部件)和MVC(对于页面)的级别较低。 MVC范式不会被打破。现在,您可以编辑窗口小部件周围的HTML,它会更改页面模型(而不是任何窗口小部件模型)。

希望这有帮助!

答案 1 :(得分:2)

添加到@Benoît的评论:

Symfony框架使用组件处理此问题。每个组件都是一个独立的MVC实例,可以嵌入到另一个视图中。它无法实例化以直接响应Web请求,如普通的MVC实例(模块/操作对)。它只能嵌入到另一个MVC视图中。

作为旁注:Symfony还将插件视为自己的完整MVC实例,包括自己的架构,模型,控制器,配置文件,视图等。

在您的情况下,每个组件都是自己的MVC实例,应用程序会将这些组件拼接在一起。每个组件都负责响应表单提交的方式。

MVC并不意味着有一个视图和一个控制器。它只是意味着应用程序逻辑存储在模型中,控制器将事物粘合在一起,并且视图构建显示。这是逻辑和表达的正式和逻辑分离。

答案 2 :(得分:1)

我在MVC上发现的最好,最简单,最简单的书之一就是上周在PDC 2008世博会上发布的那本书:

http://www.apress.com/book/view/1430216468

它不仅涵盖了MVC的概念,还与其他概念(如Ruby on Rails和MVP方法)进行了比较。

此外,它通过描述它的关注点分离来解决MVC存在的全部原因,以及为什么它不应该只是在UI级别 - 而是在你的实际层或IoC结构中您的业​​务对象和DAL。

我强烈推荐这本书,因为他涵盖了最佳实践,只有110页左右。

不,我不为FirstPress工作或与他们有关系。我只是喜欢这本书,最后有人同意。

答案 3 :(得分:1)

我在ASP.NET MVC中创建小部件时发现的最佳信息在Steve Sanderson的博客上。他解释了他的部分请求概念,这是一种与子控制器不同的技术。

http://blog.codeville.net/2008/10/14/partial-requests-in-aspnet-mvc/

  

部分请求很容易您听说过部分视图,那么怎么样   部分要求?在任何MVC中   请求,您可以设置一个集合   内部部分请求,每个   这可以建立自己的内部   部分请求等。每   部分请求呈现一个普通的旧的   任何平原的行动方法   常规控制器,每个都可以   制作一个独立的小部件我   称他们为部分“请求”而非   而不是“控制者”,因为他们运行   适当的MVC请求处理管道   这与您的路由兼容   系统和你的控制器工厂。   但是,与子控制器一样,所有的   控制权仍然存在于控制者中   这种观点可能是无知的。

答案 4 :(得分:0)

MVC主题有很多变化,在得出关于特定系统设计的结论之前需要考虑很多。大多数最新的,流行的基于Web的系统都以IoC为指导原则。通常,某种框架组件是控制器,它使用某种配置来调用适当的模板作为视图,并将其与适当的对象层次结合作为模型。这些系统中的大多数都包括模板使用的可扩展GUI小部件库。您可以添加自己的小部件,但将小部件硬编码到特定对象层次结构并不是最佳做法。 IoC链接还讨论了组件和服务,它们应该为您提供如何避免硬编码的指导。

答案 5 :(得分:0)

ASP.NET MVC非常适合于小组件仪表板mashup类型页面。

查看来自PDC 2008的this会话。

您可能希望使用Ajax帮助程序更新每个窗口小部件中的数据孤岛。以下是如何在任何页面上放置计算器但保持代码独立的片段。

查看代码段

<script type="text/javascript">
    function OnFailure(error) {
        alert("We have encounterd an error " + error);
    }
</script>
<% using (Ajax.BeginForm("Add", new AjaxOptions{UpdateTargetId="sum", OnFailure="OnFailure"})){ %>
    <%= Html.TextBox("x") %>&nbsp;+&nbsp;
    <%= Html.TextBox("y") %>&nbsp;=&nbsp;
    <span id="sum">?</span>
    <input type="submit" value="AddEm" />
<% } %>

Controller Snippet:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Add(string x, string y)
{
    int sum = int.Parse(x) + int.Parse(y);       
    return Content(sum.ToString());
}

答案 6 :(得分:0)

我认为JarrettV和jcoby的答案最接近。

我已经认识到子控制器是Hierarchical MCV( HMVC )。这个想法是你从父视图模板“拉”内容(由子控制器填充的视图),而不是从控制器“推送”数据到模板。因此,您只需从视图中调用窗口小部件,而无需编辑控制器和视图以添加窗口小部件。有一些库可以在php框架CodeIgniter(Modular Extensions)和Kohana(Dispatch,和Component)中实现这一目标。