我是MVC新手。我点击按钮后尝试更新页面。按钮单击事件调用javascript函数，该函数执行以下操作：
function buttonClickHandler(e) {
switch(e.id)
{
case "btnRefresh":
alert('Refresh Code');
break;
case "btnLatest":
$.ajax({
url: '@Url.Action("DashboardHome", "Dashboard")',
type: 'POST',
dataType: 'html',
cache: false,
data: {
SeriesParameters: {
BankID: "48",
CompanyID: "0"
},
DateModifier: "latest"
},
success: function (data, status, xhr) {
alert('Done');
// handle success
},
error: function (xhr, status, error) {
alert(error);
// handle error
}
});
break;
case "btnMTD":
alert('MTD Code');
break;
}
}
控制器如下：
public ActionResult DashboardHome(ChartDataModel model)
{
return View(ChartDataController.GetChartData(model.SeriesParameters));
}
最初视图加载正常（这是一个带有datepickers和3个Kendo Charts的工具栏）。我点击按钮，你可以看到它用一些硬编码的参数调用动作，这些参数应该改变图表数据和日期选择器中的日期。
调试显示新参数使其进入控制器并且ChartData正确更新。但是图表和日期选择器实际上并没有使用新数据进行更新。
我怀疑它与使用$ .ajax命令有关，但不确定。
任何线索？谢谢！
编辑：
这是完整的视图
@using SampleMVCWeb.Models
@using Kendo.Mvc.UI
@model ChartDataModel
@{
ViewBag.Title = "Dashboard Home";
}
<div id="divTitle" style="height:40px">
<h2>Dashboard</h2>
</div>
<div id="divToolbar" style="height:45px">
@(Html.Kendo().ToolBar()
.Name("ToolBar")
.Items(items =>
{
items.Add().Template("<div><label>Start Date: </label></div>");
items.Add().Template("<input id='dpStart' />");
items.Add().Type(CommandType.Separator);
items.Add().Template("<div><label>End Date: </label></div>");
items.Add().Template("<input id='dpEnd' />");
items.Add().Type(CommandType.Separator);
items.Add().Type(CommandType.Button).Text("Refresh").Id("btnRefresh").Click("buttonClickHandler");
items.Add().Type(CommandType.Button).Text("Latest").Id("btnLatest").Click("buttonClickHandler");
items.Add().Type(CommandType.Button).Text("Month-To-Date").Id("btnMTD").Click("buttonClickHandler");
items.Add().Type(CommandType.Separator);
items.Add().Template("<div><label><input id='rbtItemCount' type='radio' name='chartType' onclick='RadioClick(this)' value='cnt' checked='true'> Item Count</label></div>");
items.Add().Template("<div><label><input id='rbtAmount' type='radio' name='chartType' onclick='RadioClick(this)' value='amt'> Amount</label></div>");
})
)
<script>
var defaultStart = new Date("@Model.SeriesParameters.StartDate.ToShortDateString()");
var defaultEnd = new Date("@Model.SeriesParameters.EndDate.ToShortDateString()");
$(document).ready(function () {
alert('start');
$("#dpStart").kendoDatePicker({
format: "MM/dd/yyyy",
value: kendo.toString(defaultStart, "MM/dd/yyyy")
});
$("#dpEnd").kendoDatePicker({
format: "MM/dd/yyyy",
value: kendo.toString(defaultEnd, "MM/dd/yyyy")
});
var datepicker = $("#dpStart").data("kendoDatePicker");
datepicker.bind("change", function () {
var value = this.value();
alert(value); //value is the selected date in the datepicker
});
});
function buttonClickHandler(e) {
switch(e.id)
{
case "btnRefresh":
alert('Refresh Code');
break;
case "btnLatest":
$.ajax({
url: '@Url.Action("DashboardHome", "Dashboard")',
type: 'POST',
dataType: 'html',
cache: false,
data: {
SeriesParameters: {
BankID: "481",
CompanyID: "0"
},
DateModifier: "latest"
},
success: function (data, status, xhr) {
alert('Done');
$(someElement).html(data);
// handle success
},
error: function (xhr, status, error) {
alert(error);
// handle error
}
});
break;
case "btnMTD":
alert('MTD Code');
break;
}
}
function RadioClick(radioButton)
{
var sdatepicker = $("#dpStart").data("kendoDatePicker");
var startDate = sdatepicker.value();
var edatepicker = $("#dpEnd").data("kendoDatePicker");
var endDate = edatepicker.value();
switch(radioButton.value)
{
case "cnt":
alert('Load charts by item count.');
$("#chtItemsByType").data("kendoChart").reload();
break;
case "amt":
alert(kendo.toString(startDate, "MM/dd/yyyy"));
$.ajax({
url: '@Url.Action("DashboardHome", "Dashboard")',
type: 'POST',
dataType: 'html',
cache: false,
data: {
SeriesParameters: {
BankID: "48",
CompanyID: "0",
StartDate: kendo.toString(startDate, "MM/dd/yyyy"),
EndDate: kendo.toString(endDate, "MM/dd/yyyy"),
PercentByItemCount: false
}
}
//,
//success: function (data, status, xhr) {
// alert('Done');
// // handle success
//},
//error: function (xhr, status, error) {
// alert(error);
// // handle error
//}
});
break;
}
}
function GetDate() {
alert("Got it!");
}
</script>
<div id="divCharts" style="height:calc(100% - 85px);">
<div id="topRow" style="height:50%;width:100%">
<div id="divSpaceTopLeft" style="height:100%;width:5%;float:left">
</div>
<div id="divItemsByType" style="height:100%;width:45%;float:left;vertical-align:middle; text-align:center;">
<div style="display:none;vertical-align:middle;">
<h4><label id="lblItemsByType">Items By Type: No Data</label></h4>
</div>
<div class="chart-wrapper">
@(Html.Kendo().Chart(Model.SeriesData.ElementAt(0))
.Name("chtItemsByType")
.Title(title => title
.Text("Items By Type")
.Position(ChartTitlePosition.Top)
)
.Legend(legend => legend
.Position(ChartLegendPosition.Left)
)
.Series(series =>
{
series.Pie(
model => model.ItemCount,
model => model.ItemType,
null,
model => model.Exploded
)
.Labels(labels => labels
.Visible(true)
.Template("#= dataItem.ItemCount#")
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= dataItem.ItemAmountDisplay# #= dataItem.YValue# %")
);
})
.Theme("Bootstrap")
.HtmlAttributes(new { style = "height:100%;" })
)
</div>
</div>
<div id="divExceptionItemsByStatus" style="height:100%;width:45%;float:right">
<div style="display:none;vertical-align:middle;">
<h4><label id="lblExceptionItems">Exception Items By Status: No Data</label></h4>
</div>
<div class="chart-wrapper">
@(Html.Kendo().Chart(Model.SeriesData.ElementAt(1))
.Name("chtExceptionItemsByStatus")
.Title(title => title
.Text("Exception Items By Status")
.Position(ChartTitlePosition.Top)
)
.Legend(legend => legend
.Position(ChartLegendPosition.Right)
)
.Series(series =>
{
series.Pie(
model => model.ItemCount,
model => model.ItemType,
null,
model => model.Exploded
)
.Labels(labels => labels
.Visible(true)
.Template("#= dataItem.ItemCount#")
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= dataItem.ItemAmountDisplay# #= dataItem.YValue# %")
)
.StartAngle(180);
})
.Theme("Bootstrap")
.HtmlAttributes(new { style = "height:100%;" })
)
</div>
</div>
<div id="divSpaceTopRight" style="height:100%;width:5%;float:left"></div>
</div>
<div id="bottomRow" style="height:50%;width:100%;">
<div id="divSpaceLeft" style="height:100%;width:15%;float:left"></div>
<div id="divTop5" style="height:100%;width:70%;float:left;text-align:center">
<div style="display:none;vertical-align:middle;">
<h4><label id="lblTop5">Top 5 Companies: No Data</label></h4>
</div>
<div class="chart-wrapper">
@(Html.Kendo().Chart(Model.SeriesData.ElementAt(2))
.Name("chtTop5")
.Title(title => title
.Text("Top 5 Companies")
.Position(ChartTitlePosition.Top)
)
.Legend(legend => legend
.Position(ChartLegendPosition.Left)
)
.Series(series =>
{
series.Pie(
model => model.ItemCount,
model => model.ItemType,
null,
model => model.Exploded
)
.Labels(labels => labels
.Visible(true)
.Template("#= dataItem.ItemCount#")
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Template("#= dataItem.ItemAmountDisplay# #= dataItem.YValue# %")
);
})
.Theme("Bootstrap")
.HtmlAttributes(new { style = "height:100%;" })
)
</div>
</div>
<div id="divSpaceRight" style="height:100%;width:15%;float:left"></div>
</div>
答案 0 :(得分：1)
我不了解MVC如何工作的基础知识。我想我现在明白了。 ajax调用应该是一个更新页面某个部分的调用（在我的例子中是#divCharts）。所以jquery是：
$.ajax({
url: '@Url.Action("UpdateCharts", "Dashboard")',
type: 'POST',
dataType: 'html',
cache: false,
data: {
SeriesParameters: {
BankID: "48",
CompanyID: "0"
},
DateModifier: "latest"
},
success: function (data, status, xhr) {
$('#divCharts').html(data);
},
error: function (xhr, status, error) {
alert(error);
// handle error
}
});
然后我在控制器上创建了另一个动作：
public PartialViewResult UpdateCharts(ChartDataModel model)
{
return PartialView("_DashboardCharts", ChartDataController.GetChartData(model.SeriesParameters));
}
其中'_DashboardCharts'是一个新的.cshtml文件，只包含应包含在“divCharts”中的HTML（因此是'PartialView'）。 jquery'$（'＃divCharts'）。html（data）'告诉页面用数据对象中包含的HTML填充div。
我确信这对很多人来说是基本的，但对于来自WebForms的初学者来说，它在概念上是非常不同的！