Question

在我的当前MVC项目中，我有一个具有如此多功能的视图已经变得无法管理。为了解决这个问题，我开始为部分视图添加功能并将它们包含在视图中，但即使这是一个问题，因为底层的javascript（jquery）是如此相互关联和交织，它仍然是一团糟。一个局部视图中的JS将在另一个局部视图中调用刷新方法并创建一个严重耦合的灾难。

我决定我需要一种将parital视图彼此分离以及从容器视图中解耦的方法。

以下是我的一些对象

在我的parital视图中解耦JS，以便一个视图不需要知道任何有关另一个视图或容器视图的信息。
命名空间每个视图的JS代码，这样我就不会遇到视图之间的命名冲突。
在页面刷新时创建模式为maintian状态（或链接到此页面）
将JS放入sperate文件中，该文件仍然支持使用razor进行URL解析和其他功能，每个视图或部分视图使用一个JS文件。
使用名称约定，允许查看容器视图事件的人员和初始化代码了解正在进行的操作以及引用所指的位置。
能够将参数数据从触发事件传递给侦听器。

在做了一些研究而没有找到关于此的更多信息后，我创建了一个小型演示，展示了我第一次解决这个问题。我希望别人能看到我在做什么，并提供更好的方法来实现这一目标。在演示中，有两个部分视图相互通信，而不了解其他任何内容。视图用于连接事件处理程序，并在引发事件时调用函数。

这是演示代码

控制器不做任何事情，只返回视图和部分视图。

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


    }
}

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

Index.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文件连接事件处理程序并将partail视图结合在一起 IndexJs.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文件中然后捆绑/缩小。这将节省页面加载时间并使其更易于维护。

一种好的方法是按“视图”分隔HTML - 基本上，将每个视图包装在带有ID的div中，例如

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

通过这样做，您可以像这样对您的java脚本进行范围调整：

我的应用内 - 视图 - 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，并且其他脚本也不会干扰此视图。

MVC部分视图解耦示例代码

1 个答案: