我的目标是使用ajax从控制器中检索一些数据,并将其附加到视图中的表元素中。但是,JavaScript代码仅在“ $ .ajax(”)停止时才起作用。我在上述要点之后放置了一些断点,但代码从未在这些点处“中断”。
这是JavaScript代码
$(document).ready(function ()
{
$("#DivisionId").change(function () {
var OptionId = $('#DivisionId').val();
var position = 0;
$.ajax(
{
type: 'POST',
url: '@URL.Action("Division")',
dataType: 'json',
data: { DivisionId: OptionId },
success: function (data) {
var LogStandings = '';
$.each(data, function (i, log) {
position++;
var Logs = "<tr>" +
"<td>" + position + "</td>" +
"<td>" + log.Logs1.Team.TeamName + "</td>" +
"<td>" + log.Logs1.Played + "</td>" +
"<td>" + log.Logs1.Win + "</td>" +
"<td>" + log.Logs1.Draw + "</td>" +
"<td>" + log.Logs1.Lost + "</td>" +
"<td>" + log.Logs1.GoalsFor + "</td>" +
"<td>" + log.Logs1.GoalsAgainst + "</td>" +
"<td>" + log.Logs1.GoalDifference + "</td>" +
"<td>" + log.Logs1.Points + "</td>" +
"</tr>";
$('#TheLog').append(Logs);
});
},
error: function (ex) {
var r = jQuery.parseJSON(response.responseText);
alert("Message: " + r.Message);
alert("StackTrace: " + r.StackTrace);
alert("ExceptionType: " + r.ExceptionType);
}
});
return false;
}); // end of Division on change function
})//End of document.ready function
这是我控制器中的代码
public JsonResult Division(int DivisionId)
{
int UnderId = db.Under.FirstOrDefault().UnderID;
MainDivisionId = id;
List<FixtureModel> Fixtures = db.Fixtures.Where(f => f.TeamModel.DivisionId == id && f.TeamModel.UnderId == UnderId).ToList();
List<ResultModel> Results = db.Results.Where(r => r.Fixtures.TeamModel.DivisionId == id && r.Fixtures.TeamModel.UnderId == UnderId).ToList();
List<LogModel> Logs = db.Logs.Where(l => l.Team.DivisionId == id && l.Team.UnderId == UnderId).ToList();
IndexViewModel IndexPage = new IndexViewModel(Fixtures, Results, Logs);
return Json(IndexPage , JsonRequestBehavior.AllowGet);
}
我在互联网上进行了一些搜索,有消息来源建议我将jquery CDN放在head标签内视图的顶部,但这并不能解决我的问题。除此之外,经过一个小时的搜索,我无法找到任何其他解决方案。
您有2个问题,我可以看到。
首先,您正在向没有POST
批注的控制器操作发出[HttpPost]
请求。在我看来,您正在获取/选择数据,并且GET
请求更合适,因此在以下示例中使用了它。
[其次,您不能在JavaScript字符串(或一般来说在javascript中)中使用@URL.Action("Division")
。如果确实需要,则可以将一些数据存储在隐藏的div中,并使用javascript / jquery获取值),就像您尝试的那样。去做。在脚本本身上,这将在您直接向localhost:12345/@URL.Action("Division")
发出请求(这不是有效路径)时呈现。请参见下面的示例:
脚本:
$(document).ready(function () {
$("#testButton").on("click", function () {
var OptionId = 1;
$.ajax(
{
type: 'GET',
//this url assumes your controller action is in HomeController.cs
url: '/Home/Division/' + OptionId,
dataType: 'json',
data: { DivisionId: OptionId },
success: function (data) {
alert("success");
},
error: function (ex) {
var r = jQuery.parseJSON(response.responseText);
alert("Message: " + r.Message);
alert("StackTrace: " + r.StackTrace);
alert("ExceptionType: " + r.ExceptionType);
}
});
});
});
HomeController.cs操作:
public JsonResult Division(int DivisionId)
{
return Json(1, JsonRequestBehavior.AllowGet);
}
并且我认为要进行测试:
<button type="button" id="testButton" class="btn btn-primary btn-lg">TEST BUTTON</button>
上面的测试按预期方式工作(接收到DivisionID
参数,从控制器操作返回数据并向客户端警告成功)。通过上面概述的更改,在您指定有效路径并发出适当的请求类型时,将在控制器操作中遇到断点。希望这会有所帮助。