从控制器获取json数据？

Question

脚本：

<script type="text/javascript">
function getMeterInfo(meter_id) {
    $.ajax({
        url: '@Url.Action("MeterInfo", "Power")',
        data: { meter_id: meter_id},
        dataType: "json",
        type: "GET",
        error: function () {
            alert("Error!");
        },
        success: function (data) {
            var item = "";
            item += data.sno + " " + data.customer_id + data.city + data.region; //+ more info about meter.

            $("#meter_info").html(item);
        }
    });
}

$(document).ready(function () {
    $("#meters").change(function () {
        var meter_id = $("#meters").val();
        getMeterInfo(meter_id);
    });
});
</script>

注意：我知道成功功能的内容不正确。 我不知道，我能在那里写什么。

CSHTML

@Html.DropDownList("sno", new SelectList(Model, "sno", "meter_name"), "-- Select Meter --", new { id = "meters" })

<table id=meter_info>
</table>

调节器

 [HttpGet]
 public ActionResult MeterInfo(string meter_id)
 {
    int _meter_id = Int32.Parse(meter_id);
    var _meter = entity.TblMeters.Where(x => x.sno == _meter_id).FirstOrDefault();

    return Json(_meter, JsonRequestBehavior.AllowGet);
 }

模型

 public class TblMeters
 {
      int sno;
      int customer_id;
      string city;
      string region;
      .....
 }

我想在html表中显示我的模型值（sno，customer_id，city，region等）。 当我调试程序时，Controller动作返回预期的数据。

1. 我不知道如何在表名为meter_info的表上显示返回的数据项。
2. 当我运行上面的代码时，错误功能工作，而不是成功功能。

如何在桌面上显示数据？ 为什么错误功能有效？

谢谢。

Answer 1

你能验证一下成功函数是否会被firebug等调用......？ 或者只是通过在那里发出警报（'被叫！'）来养老？

此外：

1）您发布的以下代码使用一个名为item的变量和另一个名为items的变量。 这是你的意图，因为你将内部html设置为空字符串。

    var **item** = "";
    **items** += data.sno + " " + data.customer_id + data.city + data.region; 

    $("#meter_info").html(**item**);

2）如果你想遍历结果并为每个结果添加一个表行：你会想要使用jQuery“each”，但是在进一步检查时，你看起来只是通过这个结果显示一条记录。 你使用一个表只显示一行是奇怪的。

要添加一个结果（当然您可能希望将其划分为多个列）：

$('#meter_info').append('<tr><td>' + data.sno 
           + ' ' + data.customer_id + data.city + data.region + '</td></tr>' 

如果要返回并追加多行：

    $.each(data, function(index,data){$('#meter_info').append('<tr><td>' + data.sno 
       + ' ' + data.customer_id + data.city + data.region + '</td></tr>' };

Answer 2

如果它是一个选项，我建议使用不引人注目的AJAX来实现这一目标。 它需要做很多工作才能完成。

因此，根据您的尝试，您需要创建一个强类型的局部视图，它接受TableMeters列表作为它的模型类。 （原谅我缺少Razor，但我更喜欢C＃......）

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<TableMeters>>" %>
    <table>
    <% foreach(TableMeter meter in Model){ %>
        <tr>
            <td><%= meter.sno %></td>
            <td>...</td>
        </tr>
    <% } %>

然后，在主页面上，您需要以下内容：

<% using(Ajax.BeginForm("MeterInfo", "Power", new AjaxOptions() { UpdateTargetId = "meterTable" })){ %>
    <%= Html.DropDownList("meter_id", new SelectList(Model, "sno", "meter_name"), "-- Select Meter --", new { id = "meters", onchange="$(this).parent().submit()" }) %>
<% } %>

<div id="meterTable">
    <%= Html.Partial("MeterTable", Model.TblMeters) %>
</div>

您的控制器方法可以保持大致相同，但您需要删除[HttpGet]并将返回值更改为：

return PartialView("MeterTable", _meter);

仔细检查逻辑到什么传递，我不完全确定你的所有类看起来像什么，但这应该做的伎俩。 当您更改下拉列表时，它将触发“onchange”事件，该事件应提交包含的表单。 表单将通过AJAX提交给控制器。 请注意，下拉列表的名称必须与控制器方法的参数匹配。 您可以像已经拥有的那样进行过滤，并将列表返回到局部视图。 部分视图将填充，并替换div的内容。

Answer 3

我想知道你的序列化是否正常工作。 如果你改变这个会发生什么：

return Json(_meter, JsonRequestBehavior.AllowGet);

至

return Json(new { sno = _meter.sno, customer_id = _meter.customer_id etc. }, JsonRequestBehavior.AllowGet);

此外，如果您可以检查开发人员工具栏（大多数浏览器中的F12）网络选项卡以检查响应是什么，这将非常有用。

更新

您可以检查数据的序列化方式。 如果您使用内置的串行器/解串器，那么您可以尝试这样的事情。

var serializer = new JavaScriptSerializer();
var json = serializer.Serialize(yourData);

使用JSON.NET

var json = JsonConvert.SerializeObject(yourData, jsonSerializerSettings);