ASP.NET MVC 主视图引用的js（jquery）在分部视图中无效，如何解决？

Posted 2023-03-21

通过ajax更新页面容器中的分部视图，更新区域是个table，行tr有个鼠标事件，用jquery .on()方法绑定
更新后的行没有绑定事件 ，就不触发了

参考技术A 使用ajax做区域更新，在更新之前要将绑定的事件移除，在更新完DOM之后要重新绑更新区域内的事件。

在PageRequestManager的pageLoading和pageLoaded事件来处理就好。追问

谢谢，但是MVC下没有PageRequestManager的吧。。。

追答

在js文件里面，通过资源引入的。

你看看工程里面的几个js文件，其中能找到PageRequestManager，可以通过get_instance类方法获取其单例。

追问

貌似没有，只引用了jquery的一些。ajax刷新是指通过@Ajax.BeginForm来刷新局部视图的，另我使用的MVC4 。百度了一下，PageRequestManager好像是用于传统webform中的scriptManager、UpdatePanel等控件的吧。。

追答

这种可以通过向ajaxOptions提供回调函数来获取通知，ajaxOptions接受下面几个回调：
onBegin
onComplete
onSuccess
onFailure

参数都是ajaxContext，返回true继续运行，false终止处理。
事件解除绑定可以在onComplete中做。
事件重新绑定可以在onSuccess中做。

参考技术B 把query .on()方法绑定写到分部视图里或者在更新之后重新执行绑定。追问

如何重新绑定？直接在分部视图里引用js会出现异常，主视图执行刷新时，分布视图无响应……

追答

重新绑定就是在更新完分部视图后，再调用一次绑定。

分部视图里写js报错，我不知道你是怎么写的，一般的写法是在布局文件里引用js库，然后在分部视图里直接调用js库中的方法。

客户端代码：

<script type="text/javascript">
    $(function () 

        $('#content').on('click', 'tr.content', this, function (event) 
            var row = event.currentTarget;
            var cell = row.cells[0];
            var text = cell.innerhtml;
            alert(text);
        );

    );

    function UpdateContent() 
        
        $.get("/Home/GetTable", function (result) 
            $("#content").html(result);
        );
    
</script>
<h2>Index</h2>
<input type="button" value="更新" onclick="UpdateContent();"  />
<div id="content">

</div>

服务端代码：

public ActionResult GetTable()

            return PartialView("ViewUserControl1");

追问

我跟你不同的是，js写在单独文件里，主视图引用。。我再自查一下，谢谢~~

本回答被提问者采纳

如何从视图中排除 js 文件-asp.net mvc

【中文标题】如何从视图中排除 js 文件-asp.net mvc

【英文标题】：How to exclude a js file from a view- asp.net mvc

【发布时间】：2016-04-12 13:01:35

【问题描述】：

我正在开发一个 asp.net mvc 应用程序，我在其中使用 _Layout 文件来包含 js 文件和 css 文件的所有引用。但是我只有一个视图，我需要从它的引用中排除一个 js 文件。我能做的是我不把这个文件放在 _Layout 上，而是手动把它放在除了上面提到的视图之外的所有视图上。但是我觉得太麻烦了。有没有更好的方法来解决这个问题？

【参考方案1】：

您应该在每个需要它们的视图中包含必要的（特定于页面的）js 文件。您应该在布局中包含所有常见的 js（Ex :jQuery、bootstrap 等）文件。

当您在视图中包含页面特定的 js 文件时，请确保您在脚本部分执行此操作

@section Scripts

  <script src="~/js/pageSepcificScript.js"></script>

假设您在布局中定义了一个名为“脚本”的部分

@RenderSection("Scripts", required: false)