将控制器 json 结果传递给查看 [关闭]答案

【问题标题】：passing controller json result to view [closed]将控制器 json 结果传递给查看 [关闭]
【发布时间】：2013-02-18 14:11:05
【问题描述】：

我需要简单地传递在控制器中创建的 json 数据来查看我的代码如下：

我的模型：Machines.cs 在我的模型中，我将日期作为字符串并将它们解析为日期时间。当我在那儿打断点时，解析操作成功，我看到了结果。

   public class Machines
{
    [Key]
    public int AutoKey;
    public string MachineGroup;
    public DateTime StartDate;
    public DateTime EndDate;
    public int Duration;
    public List<Machines> SqlAccessParameter(string startDate,string endDate)
    {
        DateTime sDate = DateTime.Parse(startDate);
        DateTime eDate = DateTime.Parse(endDate);
        string connstr = "Data Source=USER-BILGISAYAR;Initial Catalog=Report;Integrated Security=True";
        SqlConnection myConnection = new SqlConnection(connstr);
        myConnection.Open();
        SqlCommand myCommand = new SqlCommand("DateRange", myConnection);
        myCommand.CommandType = CommandType.StoredProcedure;
        myCommand.Parameters.Add("@SP_startDate", SqlDbType.DateTime).Value = sDate;
        myCommand.Parameters.Add("@SP_endDate", SqlDbType.DateTime).Value = eDate;

        SqlDataAdapter dataAdapter = new SqlDataAdapter();
        myCommand.ExecuteNonQuery();
        dataAdapter.SelectCommand = myCommand;

        DataSet dSet = new DataSet();
        dataAdapter.Fill(dSet);

        myConnection.Close();

        List<Machines> machinePost = new List<Machines>();
        foreach (DataRow row in dSet.Tables[0].Rows)
        {
            Machines mac = new Machines();
            mac.AutoKey = (int)row["AUTOKEY"];
            mac.MachineGroup = (string)row["MACHINEGROUP"];
            mac.Duration = (int)row["DURATION"];
            mac.StartDate = (DateTime)row["STARTTIME"];
            mac.EndDate = (DateTime)row["ENDTIME"];
            machinePost.Add(mac);
        }
        return machinePost;
    }
}

}

我的控制器：MachinesController.cs

         public ActionResult MachineParameter()
       {
        Machines model = new Machines();
        return View("Index",model);
       }

我的观点：索引在我看来，我尝试根据用户指定日期范围内的数据绘制图表，但没有成功。

@model DenemeReport.Models.Machines
@{
    ViewBag.Title = "Index";
 }

 <head>
<title>Intro</title>

<script src="~/Scripts/jquery-1.8.3.min.js"></script>
<script src="~/Scripts/kendo/kendo.all.min.js"></script>
<link href="~/Scripts/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Scripts/kendo/kendo.default.min.css" rel="stylesheet" />

 </head>
   <div>

   Start Date:  <input type="text" id="start" name="start" />

   End Date: <input type="text" id="end" name="end" />

   </div>
   <input type="button" value="OK" onclick="CallAjaxFunction()" />

 <body>
<div id="chart"></div>
<script>

    function CallAjaxFunction() {

        var sDate = document.getElementById('start').value;
        var eDate = document.getElementById('end').value;

        $.ajax
             ({
                 url: "@Url.Action("MachineParameter","Machines")",
                 data: { startDate: sDate, endDate: eDate },
                 type: "POST",
                 success: function () {
                     alert(sDate);
                     $("#chart").kendoChart
                 ({
                     theme: $(document).data("kendoSkin") || "default",
                     title: {
                         text: "Pie Chart Test"
                     },
                     legend: {
                         position: "bottom",
                     },

                     dataSource:
                         {
                             transport:
                                 {
                                     read:
                                             {
                                                 url: "@Url.Action("MachineParameter", "Machines")",
                                                 dataType: "json",
                                                 contentType: 'application/json; charset=utf-8'
                                             }
                                 }
                         },

                     seriesDefaults: {
                         labels: {
                             visible: true,
                             format: "{0}"
                         }
                     },

                     series: [{
                         type: "pie",
                         field: "Duration",
                         categoryField: "MachineGroup"
                     }],

                     tooltip: {
                         visible: true,
                         format: "{0}"
                     }
                 });
                 }

             });
    }

</script>

【问题讨论】：

标签： c# javascript asp.net-mvc asp.net-mvc-4 kendo-ui

【解决方案1】：

您可以通过模型访问它或向控制器中的Parameter 操作发出 AJAX 请求。我已经重写了您的参数操作以返回视图并使用 MachinesSql 作为模型：

public ActionResult Parameter()
{
   MachinesSql model = new MachinesSql();

   return View("YourViewName", model);
}

那么在你看来你可以这样做：

@Model MachinesSql

foreach(var m in @Model.SqlAccessParameter(startDate, endDate)) {
    @Html.DisplayFor(m=>m.DataValue);
}

编辑：展示如何通过 AJAX 调用实现

function CallAjaxFunction() {
     var sDate = document.getElementById('start');
     var eDate = document.getElementById('end');

     $.ajax{({
         url: '@Url.Action("Parameter")',
         data: { startDate: sDate, endDate: eDate },
         type: "POST",
         success: function(content) { 
            alert(content);
         }
     }); 
}

【讨论】：

感谢@Darren Davies，但我需要 json 数据。如何才能在视图中实现这一点？
@pln - 向参数控制器发出 AJAX 请求，并使用将作为 JSON 传递下来的结果。
@pln - 我更新了我的帖子以演示如何获取开始和结束日期值并将它们传递给 AJAX 调用。请注意，您需要 jquery 才能使用 $.ajax 方法。
@pln - 啊，你不能这样发送 DateTime 对象。尝试将 SqlAccessParameter 方法中的 startDate 和 endDate 更改为字符串而不是 DateTime。然后将字符串解析为 SqlAccessParameter 方法中的 DateTimes。有意义吗？
@pln - 因为 JavaScript 不知道如何将其转换为 C# DateTime 对象。您可以使用 Date.UTC 函数并在 SqlAccessParameter 方法中接受 UTC 日期，但是我通常将字符串内容发送到服务器并在服务器端解析它。