Javascript MVC部分视图解耦示例代码

在我当前的MVC项目中，我有一个视图，它的功能太多，已经变得难以管理。为了解决这个问题，我开始向部分视图添加功能性，并将它们包含在视图中，但即使这样，这也是一个问题，因为底层javascript（jquery）是如此相互关联和相互缠绕，以至于它仍然是一团混乱。一个部分视图中的JS将在另一个部分视图中调用刷新方法，并创建一个临时耦合的灾难

我决定，我需要一种方法，将平行视图彼此分离，并与容器视图分离

这里是我的一些物品

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

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

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

将JS放入sperate文件中，这些文件仍然支持razor的URL解析和其他功能，每个视图或部分视图有一个JS文件

使用命名约定，允许查看容器视图事件关联和初始化代码的人员了解发生了什么以及引用引用的位置

能够将参数数据从触发器事件传递给侦听器

在做了一些研究并没有找到太多关于这个问题的信息之后，我创建了一个小的演示，展示了我在解决这个问题上的第一次尝试。我希望其他人能看到我在做什么，并提供更好的方法来实现这一点。在演示中，有两个局部视图彼此通信，而不知道彼此的任何信息。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();
        }


    }
}

索引视图只加载所有视图

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")

@Html.Hidden（“id”）
@Action（“IndexJs”、“PartialViewDecouple”）
@Action（“MenuPartialView”、“PartialViewDecouple”）
@Action（“MenuPartialViewJs”、“PartialViewDecouple”）




@Action（“DisplayPartialView”、“PartialViewDecouple”）
@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>

$（文档）.ready（函数（）{
//设置事件处理程序
$（document）.bind（“MenuPartialView_onClick”），函数（e，p1）{
$（“#id”）.val（p1）；
显示部分视图设置（p1）；
});
$（文档）.bind（“DisplayPartialView_onClick”），函数（e，消息）{
menuPartialView.message（消息）；
});
//刷新时初始化部分视图
var id=$（“#id”）.val（）；
如果（id！=null）显示PartialView.setup（id）；
});

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

DisplayPartialView.cshtml

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

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

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

DisplayParitalView

违约

下面，“设置”显示传递给它的参数。 “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>

var displayPartialView={
设置：功能（id）{
$（“#display”）.html（id）；
},
onButtonSayHiClick:函数（e）{
变量名称=e.id；
$（document）.trigger（“DisplayPartialView_onClick”，[name]）；
}\
};

下面是两个支点，以引发事件。 MenuPartialView.cshtml

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

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

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

MenuParitalView

下面，触发器引发事件并显示发送给它的消息。 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>

var menuPartialView={
onButtonOneClick:函数（）{
$（document）.trigger（“MenuPartialView_onClick”[1]）；
},
OnButtonWoClick:函数（）{
$（document）.trigger（“MenuPartialView_onClick”[2]）；
},
消息：函数（消息）{
警报（“消息：+消息”）；
}
};

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

多谢各位

---

Earl

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

一个好的方法是通过“视图”来分隔HTML——基本上，用ID将每个视图包装在一个div中，例如

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

---

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

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

一个好的方法是通过“视图”来分隔HTML——基本上，用ID将每个视图包装在一个div中，例如

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

---

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

您是否考虑过将Asp.Net MVC与javascript MVC框架相结合？我发现Aurelia非常擅长分离模块，但我相信angular和reactjs以及其他许多模块都可以从中受益。您必须让他们通过api与服务器端通信，但这并不难设置。您是否考虑过将Asp.Net MVC与javascript MVC框架相结合？我发现Aurelia非常擅长分离模块，但我相信angular和reactjs以及其他许多模块都可以从中受益。您必须让它们通过api与服务器端通信，但这并不难设置。