2015-10-13 55 views
0

我是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'>&nbspItem Count</label></div>"); 
     items.Add().Template("<div><label><input id='rbtAmount' type='radio' name='chartType' onclick='RadioClick(this)' value='amt'>&nbspAmount</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> 

+2

您對成功回調中返回的數據沒有做任何處理。你返回的HTML(它應該'返回PartialView(..)'不''返回視圖(..)'),所以你需要更新的DOM - 說'$(someElement).html(數據);' –

+0

我看到了什麼你在說,但我不確定我會在哪裏/怎麼做。返回的數據是頁面的完整HTML。我將如何重新加載整個頁面?我添加了視圖HTML。 – Cef

+0

我不小心加了:$(someElement).html(data);在代碼 – Cef

回答

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」是隻包含應包含在「的HTML一個新的.cshtml文件divCharts「(因此'部分視圖')。 jquery'$('#divCharts')。html(data)'告訴頁面用數據對象中包含的HTML填充該div。

我確定這對很多人來說都是基本的,但對於來自WebForms的初學者來說,它在概念上是非常不同的!