1
我想通过单击按钮调用控制器。我的目标是从视图中获取日期值并从控制器中调用其他数据，但ajax的事情让我感到困惑。所以我做了一个测试，但它仍然不起作用。ASP.Net MVC阿贾克斯控制器调用
我跟着几个教程和SO问题，这就是我如何通过javascript ajax函数调用控制器方法（“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”。我在控制器中设置了断点，但它没有通过。显示警报对话框后，整个页面闪烁并且没有任何更改。我试图让<div id="testarea"></div>获得文本值。
我尝试了不同的URL的形式，如：
url: '@Url.Action("testtest","Home")'
url: 'localhost/Home/testtest'
但它仍然没有击中控制器。
ajax是否需要添加特殊脚本？ （我想我添加了ajax脚本，因为有一些链接包含'ajax'。） 或者我需要做一些特殊的事情来使用ajax调用方法吗？
波纹管是我的整个代码。这是我的控制器“家”：
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>-->
您在浏览器控制台中遇到什么错误？ –
没有错误，但它不起作用。 – pebble
并且只包含一个脚本副本并按正确的顺序--jquery- {version} .js'，然后'jquery-validate.js'和'jquery.validate.unobtrusive.js'和'jquery-ui.js' （但这与你的错误没有关系） –