我是MVC新手。我試圖在點擊按鈕後更新頁面。按鈕單擊事件調用JavaScript函數,執行以下操作:MVC等效於按鈕上的回傳單擊
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個劍道圖表工具欄)。我點擊按鈕,你可以看到它調用了一些硬編碼的參數,這些參數會改變圖表數據和日期選擇器中的日期。
調試顯示新參數將其添加到控制器並且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>
您對成功回調中返回的數據沒有做任何處理。你返回的HTML(它應該'返回PartialView(..)'不''返回視圖(..)'),所以你需要更新的DOM - 說'$(someElement).html(數據);' –
我看到了什麼你在說,但我不確定我會在哪裏/怎麼做。返回的數據是頁面的完整HTML。我將如何重新加載整個頁面?我添加了視圖HTML。 – Cef
我不小心加了:$(someElement).html(data);在代碼 – Cef