MVC 局部视图解耦示例代码

Question

在我当前的 MVC 项目中，我有一个视图，其中包含太多功能，已经变得无法管理。为了解决这个问题，我开始为部分视图添加功能并将它们包含在视图中，但即使这样也是一个问题，因为底层的 javascript (jquery) 是如此相互关联和交织在一起，以至于它仍然是一团糟。一个局部视图中的 JS 会调用另一个局部视图中的刷新方法并造成紧密耦合的灾难。

我决定我需要一种方法来将部分视图彼此以及容器视图分离。

这是我的一些物品

1. 在我的部分视图中解耦 JS，这样一个视图就不需要知道关于另一个视图或容器视图的任何信息。

2. 为每个视图命名 JS 代码，这样我就不会遇到视图之间的命名冲突。

3. 在页面刷新（或链接到此页面）时创建模式以维护状态

4. 将 JS 放入仍然支持 razor 以进行 URL 解析和其他功能的单独文件，每个视图或部分视图一个 JS 文件。

5. 使用命名约定，让查看容器视图事件连接和初始化代码的人了解正在发生的事情以及引用所指的位置。

6. 能够将参数数据从触发事件传递给监听器。

在做了一些研究并没有找到太多这方面的信息后，我创建了一个小演示，展示了我第一次尝试解决这个问题。我希望其他人可以看到我在做什么，并提供更好的方法来实现这一点。在演示中，有两个局部视图可以相互通信，而无需了解任何关于到达对方的信息。 contianing 视图用于连接事件处理程序并在引发事件时调用函数。

这里是演示代码

控制器只返回视图和部分视图。

PartialViewDecoupleController.cs

namespace EngA.SandboxApplication.Controllers
{
    public class PartialViewDecoupleController : Controller
    {
        // GET: PartialViewDecouple
        public ActionResult Index()
        {
            return View();
        }

        public PartialViewResult IndexJs()
        {
            return PartialView();
        }

        public PartialViewResult MenuPartialView()
        {
            return PartialView();
        }

        public PartialViewResult MenuPartialViewJs()
        {
            return PartialView();
        }

        public PartialViewResult DisplayPartialView()
        {
            return PartialView();
        }

        public PartialViewResult DisplayPartialViewJs()
        {
            return PartialView();
        }


    }
}

索引视图只是加载所有视图

索引.cshtml

@Html.Hidden("id")

@Html.Action("IndexJs", "PartialViewDecouple")

@Html.Action("MenuPartialView","PartialViewDecouple")
@Html.Action("MenuPartialViewJs", "PartialViewDecouple")
<br/>
<br/>
@Html.Action("DisplayPartialView", "PartialViewDecouple")
@Html.Action("DisplayPartialViewJs", "PartialViewDecouple")

IndesJs 文件连接事件处理程序并将部分视图结合在一起。
索引Js.cshtml

<script language="javascript">

    $(document).ready(function () {

        //Set up Event Handlers
        $(document).bind("MenuPartialView_onClick", function (e, p1) {
            $("#id").val(p1);
            displayPartialView.setup(p1);

        });

        $(document).bind("DisplayPartialView_onClick", function (e, message) {
            menuPartialView.message(message);
        });

        //Initialize Partial Views on refresh
        var id = $("#id").val();
        if (id!=null) displayPartialView.setup(id);

    });

</script>

只是一个接收数据的容器和一个引发事件的按钮。

DisplayPartialView.cshtml

DisplayParitalView<br/>
<div id="display">default</div>

<input type="button" name="ButtonSayHi" id="ButtonSayHi" value="Say Hi" onclick="displayPartialView.onButtonSayHiClick(this)" />

下面，“setup”显示了一个传递给它的参数。 "onButtonSayHiClick" 引发和事件

DisplayPartialViewJs.cshtml

<script language="javascript">

    var displayPartialView = {

        setup: function (id) {
            $("#display").html(id);
        },

        onButtonSayHiClick: function (e) {
            var name = e.id;
            $(document).trigger("DisplayPartialView_onClick", [name]);
        }\
    };

</script>

下面，两个按钮引发事件。 MenuPartialView.cshtml

 MenuParitalView
<br/>
<input type="button" name="ButtonOne" value="One" onclick="menuPartialView.onButtonOneClick(this)" />
<input type="button" name="ButtonTwo" value="Two" onclick="menuPartialView.onButtonTwoClick(this)" />

下面，触发器引发事件和消息显示发送给它的消息。 MenuPartialViewJs.cshtml

 <script language="javascript">

    var menuPartialView = {

        onButtonOneClick: function () {
            $(document).trigger("MenuPartialView_onClick", [1]);
        },

        onButtonTwoClick: function () {
            $(document).trigger("MenuPartialView_onClick", [2]);
        },

        message: function (message) {
            alert("Message: " + message);
        }

    };

</script>

如果你发现更好的方法来完成同样的事情，请告诉我

谢谢

伯爵

Answer 1

首先，将脚本直接添加到 HTML 中并不是一个好主意 - 将它们放在单独的 js 文件中，然后打包/缩小。这将节省页面加载时间并使其更易于维护。

一个好的方法是用'views'分隔你的HTML - 基本上，将你的每个视图包装在一个带有ID的div中，例如

<div id="my-app-view-1">VIEW HTML</div>

通过这样做，您可以像这样确定您的 java 脚本的范围：

my-app-view-1.js：

(function(global) {

    'use strict';

    var document = global.document,
        $ = global.$;

    $(function() {

        var $view = $(document).find('#my-app-view-1');

        // do processing here

    });

}(this));

这将确保您拥有模块化 js，并且其他脚本不会干扰此视图。