为什么javascript在共享/部分视图的asp.net mvc视图中不起作用

Question

我尝试将以下脚本添加到“用户”页面的Index.cshtml视图的末尾，但未被调用。 我试过将它包装在$(document).ready(function () {等，但似乎没有任何区别。

<script>
    $("#UserSearch").click(function () {
        $("#usernameSearchString").text("newText");
    });
</script>

以下是Index.cshtml视图：

@model IEnumerable<CCM.Models.User>

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"> </script>

@{
    ViewBag.Title = "Users";
    ViewBag.CurrentSort = "name_desc";
    ViewBag.NameSortParm = "name_desc";
    ViewBag.DateSortParm = "date_desc";
}

<p class="h2">Manage Users</p>
<input type="text" id="usernameSearchString" placeholder = "Find by user name" class="form-input" />
<a id="UserSearch" class="CMsubmit">Search</a>
<br />
<br />
<div id="usersTable" style="overflow-x:auto;">
    @Html.Partial("_User", Model)
</div>
<script>
    $("#UserSearch").click(function () {
        $("#usernameSearchString").text("newText");
    });
</script>

当页面使用共享视图进行导航时，JQuery引用已保存在_Layout.cshtml共享视图中，如下所示。 我发现向我的Index.cshtml视图添加JQuery引用导致JQuery函数触发两次。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - CCM</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
...navigation...
</body>
</html>

还调用部分视图_User.cshtml来填充表，该部分视图不包含JQuery引用，并且不使用javascript。

上面的脚本只是一个示例，Index.cshtml视图中需要javascript / JQuery，以便我可以将搜索过滤器字符串传递给Controller中的函数，以便使用过滤后的结果更新部分视图。

但是，我的问题是如何使内联javascript / JQuery在Index.cshtml视图上完全起作用？

Answer 1

由于UserSearch是链接，因此我认为问题在于您的脚本有效，但是单击也会触发该链接的默认行为，因此您不会注意到您的自定义脚本有效。 您可以通过在脚本中放置调试断点来确认这一点，并查看单击后页面执行是否在此处停止。

因此，您需要防止默认行为。 这对于jQuery是相当标准的：

$("#UserSearch").click(function (event) {
    event.preventDefault();
    $("#usernameSearchString").val("newText");
});

为什么javascript在共享/部分视图的asp.net mvc视图中不起作用

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-08-30 08:14:01

为什么javascript在共享/部分视图的asp.net mvc视图中不起作用

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-08-30 08:14:01

解决方案1
2 已采纳 2018-08-30 08:14:01