使用DateTimePicker填充具有值的視圖模型DateTime屬性？

Question

我一直試圖解決這個問題，但現在我只是不明白。在我看來，我使用兩個DateTime屬性StartDate和EndDate，它不提供任何值atm。我也有一個DropDownList和一個提交按鈕。在DropDownList中，用戶可以從Google Analytics中選擇報告，當用戶單擊提交按鈕時，Google Analytics（分析）報告將顯示在Google Charts API中。

然而，在控制器的方法CreateGAStatisticsReport送我的查詢，分析，當我需要一個StartDate和EndDate。這個想法是，用戶在視圖中使用datePicker的幫助下選擇anny日期，當點擊submit按鈕時，這些日期被傳遞給CreateGAStatisticsReport作爲形成報告的開始/結束時間值。

這是視圖：

@model GAStatisticsListModel 

@using Nop.Admin.Models.GAStatistics; 
@using Telerik.Web.Mvc.UI; 
@using Nop.Admin.Controllers; 
@using Telerik.Web.Mvc.UI.Html; 
@using System.Web.Mvc; 
@using System.Linq; 
@{ 
    ViewBag.Title = "GAStatistics"; 
    Layout = "~/Administration/Views/Shared/_AdminLayout.cshtml"; 
} 


<h2>Google Analytics Statistic Reports</h2> 


<table class="adminContent"> 
     <tr> 
      <td class="adminTitle"> 
       @Html.NopLabelFor(model => model.StartDate): 
      </td> 
      <td class="adminData"> 
       @Html.EditorFor(model => model.StartDate) 
      </td> 
     </tr> 
     <tr> 
      <td class="adminTitle"> 
       @Html.NopLabelFor(model => model.EndDate): 
      </td> 
      <td class="adminData"> 
       @Html.EditorFor(model => model.EndDate) 
      </td> 
     </tr> 
     <tr> 
      <td class="adminTitle"> 
       @Html.NopLabelFor(model => model.GAStatisticsId): 
      </td> 
      <td class="adminData"> 
       @Html.DropDownList("GAStatisticsId", Model.AvailableGAStatistics) 
       <input type="button" id="GAStatisticsReport-Submit" class="t-button" value="@T("Admin.Common.Search")" /> 
     </tr> 
</table> 

<div class="t-widget t-grid"> 
    <table cellspacing="0"> 
    <thead class="t-grid-header"> 
     <tr> 
     <th class="t-header" scope="col"> 
      <span class="t-link">Area Chart</span> 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td> 
      <div id="chart_div1" style="width: 900px; height: 500px;"></div> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 
<div class="t-widget t-grid"> 
    <table cellspacing="0"> 
    <thead class="t-grid-header"> 
     <tr> 
     <th class="t-header" scope="col"> 
      <span class="t-link">Line Chart</span> 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td> 
      <div id="chart_div2" style="width: 900px; height: 500px;"></div> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 
<div class="t-widget t-grid"> 
    <table cellspacing="0"> 
    <thead class="t-grid-header"> 
     <tr> 
     <th class="t-header" scope="col"> 
      <span class="t-link">Column Chart</span> 
     </th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td> 
      <div id="chart_div4" style="width: 900px; height: 500px;"></div> 
     </td> 
     </tr> 
    </tbody> 
    </table> 
</div> 


<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript" src="/Scripts/jquery.min.js"></script> 
<script type="text/javascript"> 

    function onDataBinding(e) { <------ I tried validate Start/EndDate like this.. 
     var searchModel = { 
       StartDate: $('#@Html.FieldIdFor(model => model.StartDate)').val(), 
       EndDate: $('#@Html.FieldIdFor(model => model.EndDate)').val(), 
      }; 
      e.data = searchModel; 
    } 

    $("#GAStatisticsReport-Submit").click(function() { 
     if ($("select[name='GAStatisticsId'] option:selected").text() == "Visitors") 
      drawChart() 
    }) 

    google.load("visualization", "1", { packages: ["corechart"] }); 
    google.load("visualization", "1", { packages: ["treemap"] }); 

    function drawChart() { 
     $.get('/GAStatistics/GetData', {}, 
      function (data) { 
       var tdata = new google.visualization.DataTable(); 

       tdata.addColumn('date', 'Date'); 
       tdata.addColumn('number', 'Visitors'); 

       for (var i = 0; i < data.length; i++) { 
        var dateStr = data[i].Date.substr(0, 4) + "-" + data[i].Date.substr(4, 2) + "-" + data[i].Date.substr(6, 2); 
        tdata.addRow([new Date(dateStr), parseInt(data[i].Visitors)]); 
       } 

       var options = { 
        title: "Antal unika besökare per datum" 
       }; 

       var chart1 = new google.visualization.AreaChart(document.getElementById('chart_div1')); 
       var chart2 = new google.visualization.LineChart(document.getElementById('chart_div2')); 
       var chart4 = new google.visualization.ColumnChart(document.getElementById('chart_div4')); 

       chart1.draw(tdata, options); 
       chart2.draw(tdata, options); 
       chart4.draw(tdata, options); 
      }); 

    } 

</script> 

對不起，我是新來的，但我相信EditorFor可能是Telerik的執行。

在控制器CreateGAStatisticsReport意味着使用StartDate和EndDate值從模型中，這些日期轉換爲字符串格式yyyy-MM-dd和谷歌分析API請求使用這些字符串作爲Date參數。我在CreateGAStatisticsReport中使用該模型作爲參數。

控制器：

//GET: /ShopStatistics/ 
    public ActionResult GetData(GAStatisticsListModel model) 
    { 
     return Json(CreateGAStatisticsReport(model), JsonRequestBehavior.AllowGet); 
    } 

    public ActionResult GAStatistics() 
    { 
     return View(new GAStatisticsListModel()); 
    } 

    public List<GAStatistics> CreateGAStatisticsReport(GAStatisticsListModel model) 
    { 
     var serviceAccountEmail = "xxxxxxxxxxxxxx@developer.gserviceaccount.com"; 
     var certificate = new X509Certificate2(@"C:\Users\Desktop\NopCommerce\Presentation\Nop.Web\key.p12", "notasecret", X509KeyStorageFlags.Exportable); 

     var credential = new ServiceAccountCredential(
     new ServiceAccountCredential.Initializer(serviceAccountEmail) 
     { 
      Scopes = new[] { AnalyticsService.Scope.Analytics } 
     }.FromCertificate(certificate)); 

     // Create the service. 
     //Twistandtango 
     var GoogleAnalyticsService = new AnalyticsService(new BaseClientService.Initializer() 
     { 
      HttpClientInitializer = credential, 
      ApplicationName = "Twist", 
     }); 

     //GAStatisticsListModel model = new GAStatisticsListModel(); 

     DateTime? startDateValue = (model.StartDate == null) ? null 
        : (DateTime?)_dateTimeHelper.ConvertToUtcTime(model.StartDate.Value, _dateTimeHelper.CurrentTimeZone); 

     DateTime? endDateValue = (model.EndDate == null) ? null 
         : (DateTime?)_dateTimeHelper.ConvertToUtcTime(model.EndDate.Value, _dateTimeHelper.CurrentTimeZone).AddDays(1); 

     string start = model.StartDate.ToString(); 
     model.StartDate = DateTime.ParseExact(start, "yyyy-MM-dd", CultureInfo.InvariantCulture); 

     string end = model.EndDate.ToString(); 
     model.EndDate = DateTime.ParseExact(end, "yyyy-MM-dd", CultureInfo.InvariantCulture); 

     var request = GoogleAnalyticsService.Data.Ga.Get("ga:xxxxxxxx", start, end, "ga:visitors"); 
     //Specify some addition query parameters 
     request.Dimensions = "ga:date"; 
     request.Sort = "-ga:date"; 
     request.MaxResults = 10000; 

     //Execute and fetch the results of our query 
     Google.Apis.Analytics.v3.Data.GaData d = request.Execute(); 

     List<GAStatistics> ListGaVisitors = new List<GAStatistics>(); 

     foreach (var row in d.Rows) 
     { 
      GAStatistics GaVisits = new GAStatistics(row[0], row[1]); 
      ListGaVisitors.Add(GaVisits); 
     } 

     return ListGaVisitors; 
    } 

認爲Id也張貼在屏幕上的UI：

我怎麼能填充StartDate，並從模型EndDate，並在控制器中使用這些值 - CreateGAStatisticsReport？

對不起，所有的文字。

謝謝

Answer 1

EditorFor是一個ASP.NET MVC實現，以協助的控件模型數據的UI渲染。它根據數據類型計算出要控制的控件。例如DatePicker用於日期。

要接收提交操作，需要使用POST屬性和GAStatisticsListModel作爲參數的控制器操作。 ASP.NET MVC將自動構建模型參數對象並嘗試儘可能多地填充數據。包括StartDate & EndDate。 （所謂的模型綁定）

所以嘗試做這個..

[HttpPost] 
    public ActionResult GetData(GAStatisticsListModel model) 
    { 
     // model should have the start & end dates. 
    } 

你可以有2個動作名稱相同，由HTTPGET和HttpPost屬性區分。