ViewTime DateTime 속성에 DateTimePicker를 사용하여 값을 채 웁니까?

Question

언젠가는이 문제를 해결하기 위해 노력했지만 지금은 이해하지 못하고 있습니다. 내 견해로는 두 개의 DateTime 속성 StartDate 및 EndDate을 사용하며 atm 값을 제공하지 않습니다. DropDownList 및 제출 단추도 있습니다. DropDownList에서 사용자는 Google 애널리틱스에서 보고서를 선택할 수 있으며 사용자가 제출 버튼을 클릭하면 애널리틱스의 보고서가 Google Charts API와 함께 표시됩니다.

CreateGAStatisticsReport의 검색어를 컨트롤러에서 컨트롤러로 보내려면 StartDate과 EndDate이 필요합니다. 사용자가보기에서 datePicker를 사용하여 anny 날짜를 선택한다는 것이 아이디어입니다. 제출 버튼을 클릭하면이 날짜가 보고서를 구성하는 start/endTime 값으로 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에이 날짜를 변환하고 Google 웹 로그 분석 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 모델 데이터 컨트롤의 UI 렌더링을 지원하는 ASP.NET MVC의 구현 주셔서 감사합니다. 데이터 형식에 따라 렌더링 할 컨트롤을 확인합니다. 예 : 날짜에 대한 DatePicker.

제출 조치를 받으려면 POST 속성 및 GAStatisticsListModel을 매개 변수로 사용하여 컨트롤러 조치가 있어야합니다. ASP.NET MVC는 자동으로 모델 매개 변수 객체를 구성하고 가능한 한 많은 데이터를 채우려고합니다. StartDate & EndDate를 포함합니다.

그래서이 일을하려고 (전화 모델 바인딩) ..

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

당신은 HttpGet 및 HttpPost 속성에 의해 차별화 된 같은 이름을 가진 두 작업을 할 수 있습니다.