我正在尝试通过单击按钮来调用 Controller 。我的目标是从 View 获取日期值并从 Controller 调用其他数据，但 ajax 的事情让我很烦恼。所以我做了一个测试，但它仍然不起作用。
我遵循了几个教程和 SO 问题，这就是我想出如何通过 javascript ajax 函数调用 Controller 方法(“testtest”)的方法。这是 the tutorial这是我最后一次关注的。
$(document).ready(function () {
$('#btnSelectDate').click(function () {
alert("working");
var text= $('#txtStartDateI').val();
var button= $('#btnSelectDate').val();
alert(text + " " + button);
$.ajax({
url: "/Home/testtest",
type: "post",
datatype: "text",
data: { btnSelectDate: button, txtStartDate: text},
success: function (data) {
('#testarea').html(data);
},
error: function () {
$('#testarea').html("ERROR");
}
});
});
});
这是方法“testtest”:
[HttpPost]
public string testtest( string btnSelectDate,string txtStartDate ) {
return ("btnValue : " + btnSelectDate + "\ntxtStartDate: " + txtStartDate);
}
当我单击该按钮时，警报正常工作，但它不会调用 Homecontroller 中的方法“testtest”。我在 Controller 中设置了断点，但它没有通过。显示警报对话框后，整个页面闪烁，没有任何变化。我试着制作 <div id="testarea"></div>获取文本值。
我尝试了不同的 URL 形式，例如:
url: '@Url.Action("testtest","Home")'
url: 'localhost/Home/testtest'
但它仍然没有击中 Controller 。
ajax 是否需要添加任何特殊脚本？ (我想我添加了 ajax 脚本，因为有些链接包含“ajax”。) 或者我是否需要做一些特殊的事情来使用 ajax 调用方法？
下面是我的全部代码。这是我的 Controller “主页”:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace haha.Controllers {
public class HomeController : Controller {
public ActionResult View() {
return View("View");
}
[HttpPost]
public string testtest( string btnSelectDate,string txtStartDate ) {
return ("btnValue : " + btnSelectDate + "\ntxtStartDate: " + txtStartDate);
}
}
}
查看: (对于脚本，我认为有几个重复的脚本，但我无法弄清楚。我可以删除什么？)
@using System;
@using System.Collections.Generic;
@using System.Linq;
@using System.Web;
@using System.Web.Mvc;
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" />
<script src="~/Scripts/jquery-1.5.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/scripts/jquery-*.*.*.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<script>
$(function () {
$(".Datepicker").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
nextText: 'next Month',
prevText: 'previous Month',
showButtonPanel: true,
currentText: 'Today'
})
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnSelectDate').click(function (event) {
alert("working");
var text= $('#txtStartDateI').val();
var button= $('#btnSelectDate').val();
$.ajax({
url: "/Home/testtest",
type: "post",
datatype: "text",
data: { btnSelectDate: button, txtStartDate: text},
success: function (data) {
('#testarea').html(data);
},
error: function () {
$('#testarea').html("ERROR");
}
});
});
});
</script>
</head>
<body>
this is test area
<div id="testarea"></div>
<hr />
<p></p>
<div>
<form id="formDTInsurer">
StartDate:
<input type="text" class="Datepicker" id="txtStartDateI" name="txtStartDate">
<button type="submit" id="btnSelectDate" name="btnSelectDate" value="InsurerDate">Select</button>
</form>
</div>
</body>
</html>
编辑
正在关注 Stephen Muecke的评论，我使用 chrome 工具检查了控制台。以下是错误。
jquery-1.5.1.js:869
Uncaught TypeError: b.parents(...).addBack is not a function
at Object.parse (jquery.validate.unobtrusive.min.js:19)
at HTMLDocument.<anonymous> (jquery.validate.unobtrusive.min.js:19)
at Object.resolveWith (jquery-1.5.1.js:862)
at Function.ready (jquery-1.5.1.js:420)
at HTMLDocument.DOMContentLoaded (jquery-1.5.1.js:1055)
parse @ jquery.validate.unobtrusive.min.js:19
(anonymous) @ jquery.validate.unobtrusive.min.js:19
resolveWith @ jquery-1.5.1.js:862
ready @ jquery-1.5.1.js:420
DOMContentLoaded @ jquery-1.5.1.js:1055
由于这些脚本有更多的错误，我注释掉了其中的一些错误，这实际上减少了错误的数量。只剩下上面那个了。下面是我现在在当前html文件中的内容。
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" />
<!--<script src="~/Scripts/jquery-1.5.1.min.js"></script>-->
<!--<script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>-->
<!--<script src="~/scripts/jquery-*.*.*.min.js"></script>-->
<!--<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>-->
最佳答案
包含两个版本的 jquery(1.5 和 1.7)很尴尬，您必须找到正确的顺序并且只包含一个 jquery。也许用另一个替换 1.5？
关于javascript - ASP.Net MVC ajax Controller 调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42238342/