如何在主视图中查看视图的内容?

时间:2015-08-04 18:16:53

标签: javascript jquery asp.net-mvc asp.net-mvc-4

当我按下名为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>

目前代码有效,但如果我想放另一张图表,我必须按后退按钮。你可以把两个网站视图相同的视图?谢谢。

0 个答案:

没有答案