我正在尝试使用MVC。我有一个包含下拉列表和表格的视图。 当我从下拉列表中选择一个选项时,我想从我的控制器获取数据并更新视图:
查看:
<div>
<h2>Current Print Statistics</h2>
@using (Html.BeginForm())
{
@Html.DropDownList("LogTypes", new SelectList(Model.LogTypes, "Value", "Text"), new
{
id = "logType",
data_url = Url.Action("GetStatistics", "Home")
})
<table id="modelTable" class="table table-condensed">
<tr>
<th>RequestedOn</th>
<th>PrintedOn</th>
<th>Message</th>
<th>Success</th>
<th>TemplateName</th>
</tr>
<tbody>
@foreach (var item in Model.PrintLogs)
{
string css = (item.Success) ? "success" : "danger";
string link = (item.Success) ? "www.google.com" : string.Empty;
<tr class="@css">
<td>@item.RequestedOn</td>
<td>@item.PrintedOn</td>
<td>@item.Message</td>
@if (item.Success)
{
<td>@item.Success</td>
}
else
{
<td>@Html.ActionLink("False", "Index", "LogView", new { id = item.LogID }, null)</td>
}
<td>@item.TemplateName</td>
</tr>
}
</tbody>
</table>
}
</div>
</div>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$('#logType').change(function () {
console.log($(this).data('url'));
var selectedValue = $(this).val();
var table = $('#modelTable');
$.ajax({
url: $(this).data('url'),
type: 'GET',
cache: false,
context: table,
data: { value: selectedValue },
success: function (result) {
$.each(result.PrintLogs,
function (index, log) {
$('<tr/>', {
html: $('<td/>', {
html: log.RequestedOn
}).after($('<td/>', {
html: log.PrintedOn
})).after($('<td/>', {
html: log.Success
})).after($('<td/>', {
html: log.Message
})).after($('<td/>', {
html: log.TemplateName
}))
}).appendTo(tableBody);
}
);
}
});
});
});
</script>
控制器:
[HttpGet]
public JsonResult GetStatistics(string value)
{
var request = LogTypeRequest.Last24H;
if (value == "0") request = LogTypeRequest.Last24H;
if (value == "1") request = LogTypeRequest.LastWeek;
if (value == "2") request = LogTypeRequest.LastMonth;
var model = new PrintServerModel
{
LogTypes = new List<ListItem>
{
new ListItem() {Text = "Last 24 Hours", Value = "0"},
new ListItem() {Text = "Last Week", Value = "1"},
new ListItem() {Text = "Last Month", Value = "2"}
},
PrintLogs = PrintServerService.GetPrinterLog(request)
};
return Json(model, JsonRequestBehavior.AllowGet);
}
现在当我尝试在chrome中调试时,行$ .ajax({达到它似乎跳到了最后。
理想情况下,我想要的是在启动时显示数据,然后当用户从下拉列表中选择某些内容时,刷新数据。
任何帮助都非常感激!!
答案 0 :(得分:0)
错误是json调用有错误,你应该添加.done或者错误:到它的末尾,这样你就可以看到你的错误了。
Chrome调试工具中还有一个用于观看网络呼叫的标签,您可以通过其他详细信息查看来自该呼叫的响应。
只是查看ajax调用,可能想要更改为
data: JSON.stringify( { value: selectedValue }),
如果您获得更多信息,我会尽我所能来改善我的答案。