Javascript AJAX在ASP.NETMVC中不起作用

我不太了解如何使用AJAX，或者更确切地说，如何在局部视图的情况下使用jQuery。以下是我面临的问题：

在my view MyAction.cshtml中，它接收StudentViewModel对象的集合：

@model IEnumerable<MvcApplication4.ViewModels.StudentViewModel>  
@{
    ViewBag.Title = "MyAction";
    Layout = "~/Views/Shared/_myTemplateLayoutPage.cshtml";
}

<script type="text/javascript" src="/scripts/jquery-1.3.2.js"></script>
<script type="text/javascript">
    $('.editDetails').click(function () {
        alert('Edit Clicked');
    });
</script>

<div id="content">
    <div id="mainpage">

    <h2>Registration Details</h2>
        <ul>
        @foreach(var item in Model) 
        {
            <li>
                @Ajax.ActionLink(item.UserName, 
                "GetUserDetails",
                new { id = item.Student.StudentId },
                    new AjaxOptions
                    {
                        UpdateTargetId = "StudentDetails", 
                        InsertionMode = InsertionMode.Replace,
                        HttpMethod = "GET" @*HTTP method *@
                    }
                )
            </li>
        }
        </ul>
        <div id ="StudentDetails"></div>
    </div>
    <div id="sidebar">
    </div>
    <div id="sidebarbottom"></div>
</div>

部分视图_StudentDetails如下所示：

@model MvcApplication4.ViewModels.StudentViewModel

<h2>Student Details</h2>
<table border="1">
    <tr>
        <th>
            Name
        </th>
        <th>
            User Name
        </th>
        <th>
            Department
        </th>
        <th colspan="2">
            Actions
        </th>
    </tr>
    <tr>
        <td>
            @Html.DisplayFor(x => x.StudentFullName)
        </td>
        <td>
            @Html.DisplayFor(x => x.UserName)
        </td>
        <td>
            @Html.DisplayFor( x => x.DepartmentName)
        </td>
        <td>
            <input type="submit" class="editDetails" value="Edit Details" name="Command" />
        </td>
        <td>
            <input type="submit" class="addDetails" value="Add Details" name="Command" />
        </td>
    </tr>
</table>

       public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));
    }

---

如果你想把

元素放在你自己里面，你不能只在里面加一个~字符，你需要在呈现页面时将它解析为一个真实的URL

<script src='@Url.Content("~/Scripts/jquery-1.9.1.js")' type='text/javascript'></script>

---

当然，如果你这样做，你就是在欺骗你自己，使自己摆脱捆绑的所有惊人之处。

请用下面的选项替换你的AJAX Actionlink的AJAXOptions。请注意

OnComplete=“RegisterClickHanders”

@ActionLink（item.UserName，
“GetUserDetails”，
新建{id=item.Student.StudentId}，
新选择
{
UpdateTargetId=“StudentDetails”，
InsertionMode=InsertionMode.Replace，
HttpMethod=“GET”@*HTTP方法*@，
OnComplete=“RegisterClickHanders”
}
)

在主页面中添加此功能

<script>
    function RegisterClickHanders() {
        $('.editDetails').click(function () {
            alert('Edit Clicked');
        });
    }
</script>

函数寄存器ClickerHanders（）{
$（'.editDetails'）。单击（函数（）{
警报（“单击编辑”）；
});
}

确保jquery已正确加载。您可以像这样使用cdn

    <script src="//code.jquery.com/jquery-2.2.1.js"></script>

---

您正在视图中动态生成编辑按钮（即，它们是在首次加载页面后添加的，您需要使用它们来处理动态添加的元素。将脚本更改为

$('#StudentDetails').on('click', '.editDetails', function () {
    alert('Edit Clicked');
});

---

在本例中，使用

id=“StudentDetails”的元素

是第一次呈现页面时DOM中存在的最接近的祖先。

将BundleConfig.cs添加到您的问题中。另外，为什么要多次引用jQuery？与显示的错误无关，但肯定与当前的问题有关，这是因为您试图将单击事件绑定到尚不存在的元素。请看l注意：到目前为止运气不好：（请同时查看BundleConfig.cs。删除对jQuery的所有引用，这些引用不是bundle，然后重试。您现在使用的是两个不同的版本，但到目前为止还没有警报。）（还有什么需要做的吗？您的警报是“404”如果您现在删除捆绑包并使用带有

Url的直接
标记。Content

是否加载了文件，或者控制台中是否仍有404？我没有收到警报。您在故障排除方面走得太远了。首先，您验证了文件是否正在加载。然后，您担心是否需要执行自己的脚本e、 不工作。我在视图文件MyAction.cshtml中添加了部分视图被渲染的部分。@StruglingCoder因此，根据您之前的评论，我确信您的捆绑路径是正确的。单击处理程序不工作的原因是您在渲染这些HTML元素之前注册了它们（单击学生姓名时，将动态呈现）这就是您需要订阅

OnComplete

事件的原因。请尝试更新的代码，如果您仍然面临问题，请告诉我。好的，这两个代码块将仅出现在主视图中？是的，它们都将出现在主视图中。您是对的，代码将从上到下执行，但在您的情况下，因为所有

.editDetails

链接不存在。

$（“.editDetails”）。

不会起任何作用。当您单击学生姓名时，这些链接将呈现。此时，您的DOM已更改，现在您需要订阅

.editDetails

的单击事件。要测试我解释的内容，请在Chrome Developers工具的

行上放置一个断点$（'.editDetails'）

并在控制台内部检查其长度。

<script src='@Url.Content("~/Scripts/jquery-1.9.1.js")' type='text/javascript'></script>

    <script src="//code.jquery.com/jquery-2.2.1.js"></script>

    $(function() {
      $(document).on("click", ".editDetails", function () {
        alert('Edit Clicked');
     });
    });

$('#StudentDetails').on('click', '.editDetails', function () {
    alert('Edit Clicked');
});