当我按下名为calendar的按钮时,我被引导到控制器,在那里它被称为包含两个DatePickers的主视图。在我选择两个日期并单击提交按钮后,我将在控制器中使用名为“绘图”的方法进行操作,该方法将打开一个显示图表的新视图。我的问题是,我可以显示下面的图表视图使用两个DatePickers的主视图,因为如果我想选择其他日期而不必按后退按钮?
以下是来自控制器的代码,它引导我进入主视图:
public ActionResult Calendar()
{
ChartDate objdatemodel = new ChartDate();
return View("Calendar",objdatemodel);
}
以下是名为Calendar
的主视图的代码@model Plotting.Models.ChartDate
@{
ViewBag.Title = "jQuery UI Datepicker Calender Control In Asp.Net Mvc Application";
}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<h2>
Datepicker Calender
</h2>
<div id="yourviewDiv"></div>
@using (Html.BeginForm("Plotting", "Greenhouse"))
{
<table>
<tr>
<td>
<p>
Start Date: @Html.TextBoxFor(m => m.StartDate, new { @id = "txtdatepicker1", @style = "width:200px;" })
</p>
</td>
<td>
<p>
End Date: @Html.TextBoxFor(m => m.EndDate, new { @id = "txtdatepicker2", @style = "width:200px;" })
</p>
</td>
</tr>
</table>
<input type="submit" value="Submit" />
}
<script>
$(function () {
$("#txtdatepicker1").datepicker();
});
$(function () {
$("#txtdatepicker2").datepicker();
});
</script>
以下是控制器中用于视图绘制的代码:
public ActionResult Plotting(ChartDate objdatemodel)
{
ChartDate cDate = new ChartDate();
cDate.DateData = new DateChart();
cDate.DateTitle = "Day";
cDate.HumidityTitle1 = "Senzor 1";
cDate.HumidityTitlle2 = "Senzor 2";
List<Greenhouse> greenhouse = dal.FindDatesByInterval(objdatemodel.StartDate , objdatemodel.EndDate);
String day = "";
String humidity1 = "";
String humidity2 = "";
for (int i = 0; i < greenhouse.Count - 1; i++)
{
day += greenhouse[i].DateTime.Day + ",";
humidity1 += greenhouse[i].Humidity1 + ",";
humidity2 += greenhouse[i].Humidity2 + ",";
}
day += greenhouse[greenhouse.Count - 1].DateTime.Day;
humidity1 += greenhouse[greenhouse.Count - 1].Humidity1;
humidity2 += greenhouse[greenhouse.Count - 1].Humidity2;
DateChart obj = new DateChart();
/*Get the data from databse and prepare the chart record data in string form.*/
obj.Date = day;
obj.Humidity1 = humidity1;
obj.Humidity2 = humidity2;
cDate.DateData = obj;
return View("Plotting",cDate);
}
以下是绘图视图的代码:
@model Plotting.Models.ChartDate
@{
ViewBag.Title = "How To Create Dynamic Google Column Chart In an Asp.Net MVC Application Using C# ";
}
<fieldset>
<legend><strong>Greenhouse</strong></legend>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create and populate the data table.
var days = [@Model.DateData.Date];
var humidities1 = [@Model.DateData.Humidity1];
var humidities2 = [@Model.DateData.Humidity2];
var data = new google.visualization.DataTable();
data.addColumn('string', '@Model.DateTitle');
data.addColumn('number', '@Model.HumidityTitle1');
data.addColumn('number', '@Model.HumidityTitlle2');
for (i = 0; i < days.length; i++) {
data.addRow([days[i].toString(), humidities1[i], humidities2[i]]);
}
var options = {
title: 'Humidities Values',
hAxis: { title: '@Model.DateTitle', titleTextStyle: { color: 'black' } }
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="width: auto; height: auto;">
</div>
</fieldset>
目前代码有效,但如果我想放另一张图表,我必须按后退按钮。你可以把两个网站视图相同的视图?谢谢。