AJAX $.post在视图中工作，但是当放置在.js文件中时不会工作。所有其他JQuery工作
总的来说，我是MVC的新手，JQuery和AJAX也是新手，我遇到了一个奇怪的问题。
我已经完成了第一次构建实践网站的过程，在过去的几天里，我把我的时间花在了添加JQuery和诸如此类的内容上，以提高站点的交互性。
今天，我完成了我所有的JQuerys，一切都很好，所以我决定把它全部从视图中清除出来，然后把它们放到MVC脚本文件夹中的script.js文件中。
插入视图作为@Scripts.Render("~/Scripts/Employees.js")
但是，当我这样做时，与AJAX有关的任何东西都不起作用。
现在，这只需要两个迷你代码片段，与控制器交互，以编辑或保存更改，但其他一切都很好！即使使菜单和其他UI更改的编辑和保存JQuerys都工作得很好，但是更新更改的实际$.post也不起作用。
下面是位于JQuery函数中的两段代码片段，它们都工作得很好。
$.post(
'@Url.Action("customEdit", "Employee")',
{
'id': newID,
'name': newName,
'birth': newDate
},
function (data) { },
"json"
);和
$.post(
'@Url.Action("customDelete", "Employee")',
{
'id': newID
},
function (data) { },
"json"
);再一次，如果我将整个脚本移回视图中，它就会非常好！所以，我很困惑为什么把它移到.js上，突然只会使这两个小片段不能工作。
没有重新排序的代码，它重新插入到原来的位置。
这里是我的整个<script>。
$(function () {
$("td[colspan=12]").find("p").hide();
$("td[colspan=12]").addClass("nopadding");
$("tr").click(function (e) {
if (!$(e.target).is('button') && !$(e.target).is('input')) {
var $target = $(this);
var $detailsTd = $target.find("td[colspan=12]");
if ($detailsTd.length) {
$detailsTd.find("p").slideUp();
$detailsTd.addClass("nopadding");
} else {
$detailsTd = $target.next().find("td[colspan=12]");
$detailsTd.find("p").slideToggle();
$detailsTd.toggleClass("nopadding");
$detailsTd.stopPropagation();
}
}
});
});
function editFunction(element) {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-save-button").show();
$(element).closest("td").find("span.item-delete-button").hide();
$(element).closest("td").prev("td").find("span.item-display")
.hide()
.next("span.item-field")
.show();
$(element).closest("td").prev("td").prev("td").find("span.item-display")
.hide()
.next("span.item-field")
.show();
}
function saveFunction(element) {
var one = $(element).closest("td").prev("td").find("span.item-field").find(":input:first").val();
var two = $(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val();
if (one == "" || two == "") {
if (one == "") {
alert("invalid name");
}
if (two == "") {
alert("invalid birthday");
}
} else {
$(element).closest("span").hide();
$(element).closest("td").find("span.item-edit-button").show();
$(element).closest("td").find("span.item-delete-button").show();
$(element).closest("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").find("span.item-field").find(":input:first").val());
$(element).closest("td").prev("td").find("span.item-display")
.show()
.next("span.item-field")
.hide();
$(element).closest("td").prev("td").prev("td").find("span.item-display").html($(element).closest("td").prev("td").prev("td").find("span.item-field").find(":input:first").val());
$(element).closest("td").prev("td").prev("td").find("span.item-display")
.show()
.next("span.item-field")
.hide();
var newID = $(element).closest("td").find("span.ID").text();
var newDate = $(element).closest("td").prev("td").find("span.item-display").text();
var newName = $(element).closest("td").prev("td").prev("td").find("span.item-display").text();
$.post(
'@Url.Action("customEdit", "Employee")',
{
'id': newID,
'name': newName,
'birth': newDate
},
function (data) { },
"json"
);
}
}
function deleteStart(element) {
$(element).closest("table").toggleClass("table-hover");
$(element).closest("tr").css('background-color', 'red');
}
function deleteStopped(element) {
$(element).closest("table").toggleClass("table-hover");
$(element).closest("tr").css('background-color', 'initial');
}
function deleteFunction(element) {
var newID = $(element).closest("td").find("span.ID").text();
console.log(newID);
$('#'+newID).removeClass('fade');
$('#' + newID).modal('hide');
$(element).closest("table").toggleClass("table-hover");
$(element).closest("tr").next("tr").remove();
$(element).closest("tr").remove();
$.post(
'@Url.Action("customDelete", "Employee")',
{
'id': newID
},
function (data) { },
"json"
);
$(element).closest("tr").css('background-color', 'initial');
}所以，一切都像以前一样工作，甚至保存和编辑交互(行更新，modals，等等)但是实际的$.post不起作用(控制器在调试中甚至没有命中)。然而，如果我只是把所有的代码重新插入到视图中，它就能工作了。
(感谢所有的帮助:)
回答 2
Stack Overflow用户
发布于 2014-06-03 20:00:57
当您将Javascript放到视图中时，Razor呈现引擎将将以下行解析为适当的URL：
'@Url.Action("customDelete", "Employee")'但是.js文件不会被视图引擎呈现，所以上面的行保持不变，而不是URL。
Stack Overflow用户
发布于 2014-06-03 20:09:48
呈现引擎没有解析JS文件，只有视图解析。因此，您需要将Razor中的URL保存为主视图中的JS变量。
把这个放在你的主要视图中：
<script>var action_custom_delete = '@Url.Action("customDelete", "Employee")';</script>
@Scripts.Render("~/Scripts/Employees.js")现在，您可以在JS文件中的任何需要URL的地方使用变量action_custom_delete。
https://stackoverflow.com/questions/24023831
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号