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

我已经试着解决这个问题有一段时间了，但我就是不明白。在我看来，我使用了两个

DateTime

属性

StartDate

和

EndDate

，它们没有提供任何值。我还有一个下拉列表和一个提交按钮。在DropDownList中，用户可以从Google Analytics中选择报告，当用户单击submit按钮时，将使用Google图表API显示来自Analytics的报告

但是，当使用控制器中的方法

CreateGAStatisticsReport

将我的查询发送到Analytics时，我需要

StartDate

和

EndDate

。其想法是，用户在视图中的日期选择器的帮助下选择任意日期，当单击“提交”按钮时，这些日期将作为构成报告的开始/结束时间值传递给

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>

Think id还在UI上发布一个屏幕：

如何从模型中填充

StartDate

和

EndDate

，并在控制器-

CreateGAStatisticsReport

中使用这些值

对不起，所有的文字

---

谢谢

EditorFor是一个ASP.NET MVC实现，用于协助模型数据控件的UI呈现。它根据数据类型确定要呈现的控件。e、 g.日期选择器

要接收submit操作，您需要一个控制器操作，该操作具有POST属性和GAStatisticsListModel作为参数。ASP.NET MVC将自动构造模型参数对象，并尝试填充尽可能多的数据。。包括开始日期和结束日期。（称为模型绑定）

所以试着这样做

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

---

您可以有两个名称相同的操作，由HttpGet和HttpPost属性区分。

因此

StartDate

和

EndDate

不填充在

GetData

操作中？这就是问题所在吗？它应该在视图中填充，因为有一个日历/日期时间选择器用于开始/结束日期。在将查询发送到analytics api时，我需要在CreateGAStatisticsReport中使用这些dt值。GetData只是根据我在querry字符串中传递的值绘制google图表。我明白了，这很有见地。谢谢你的解释。Iv'e只在httppost上做了一点工作，我现在意识到我必须更详细地研究这个问题。我相信我必须重做一些关于模型绑定的事情。实际上，我以前尝试过使用[HttpPost]属性，但问题是当我单击submit时，google的图表根本不显示。如果我删除[HttpPost]并按submit，图表将显示。我能用硬编码日期显示图表。

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