1

脚本：

<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 等）。当我调试程序时，控制器操作会返回预期的数据。

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

如何在表格上显示数据？为什么错误函数有效？

谢谢。

4

3 回答 3

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>' };
于 2012-08-13T16:33:44.777 回答
1

如果这是一个选项，我建议使用不显眼的 AJAX 来完成此操作。这需要大量的工作并为您完成。

因此，根据您的尝试，您需要创建一个强类型的 Partial View，它接受 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 的内容。

于 2012-08-13T16:42:29.370 回答
1

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

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);
于 2012-08-14T06:15:07.457 回答