使用DateTimePicker使用值填充视图模型DateTime属性？

时间：2014-03-28 16:34:59

标签： c# javascript asp.net datetime google-analytics

我一直试图绕过这一段时间，但我根本就没有得到它。对于我的观点，我使用了两个DateTime属性StartDate和EndDate，它们不提供任何值atm。我还有一个DropDownList和一个提交按钮。在DropDownList中，用户可以从Google Analytics中选择报告，当用户点击“提交”按钮时，Google Analytics图表会显示“来自Google Analytics的报告”。

但是，当我使用控制器中的方法CreateGAStatisticsReport将我的查询发送到Google Analytics时，我需要StartDate和EndDate。这个想法是用户在视图中的datePicker的帮助下选择了日期，当点击提交按钮时，这些日期将作为形成报告的开始/结束时间值传递给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并将这些字符串用作{{1} Google Analytics API请求中的参数。我在Date。

中使用模型作为参数

控制器：

CreateGAStatisticsReport

思想ID也在UI上发布了一个屏幕：

enter image description here

如何从模型中填充 //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; } 和StartDate并在控制器中使用这些值 - EndDate？

抱歉所有文字。

谢谢

1 个答案:

答案 0 :(得分：1)

EditorFor是一个ASP.NET MVC实现，用于协助UI呈现模型数据的控件。它auro-根据数据类型计算出要呈现的控件。例如日期的DatePicker。

要接收提交操作，您需要具有POST属性的控制器操作和GAStatisticsListModel作为参数。 ASP.NET MVC将自动构建模型参数对象并尝试尽可能多地填充数据。包括StartDate＆amp;结束日期。 （称为模型绑定）

所以试试这个...... 

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

你可以有2个同名的动作，由HttpGet和HttpPost属性区分。

相关问题
最新问题