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操作返回预期的数据。

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

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

感谢。

Answer 1

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

另外：

1）您发布的以下代码使用一个名为 item 的变量，另一个名为项。这是你的意图，因为你将内部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);

从控制器获取json数据？

3 个答案: