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;
      .....
 }

モデル値 (sno、customer_id、city、region など) を html テーブルに表示したいと考えています。プログラムをデバッグすると、コントローラーのアクションは期待されるデータを返します。

  1. 名前が meter_info であるテーブルに返されたデータ項目を表示するにはどうすればよいかわかりません。
  2. 上記のコードを実行すると、成功関数ではなくエラー関数が機能します。

テーブルにデータを表示するにはどうすればよいですか? そして、なぜエラー機能が機能するのですか?

ありがとう。

4

3 に答える 3

1

それがオプションである場合、目立たない 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 の内容が置き換えられます。

于 2012-08-13T16:42:29.370 に答える
1

成功関数がfirebugなどで呼び出されるかどうかを確認できますか...? それとも、そこにアラート（「呼び出されました！」）を入れることで、昔ながらの方法ですか？

さらに:

1）あなたが投稿した次のコードは、itemと呼ばれる 1 つの変数とitemsと呼ばれる別の変数を使用します。内部のhtmlを空の文字列に設定しているため、それはあなたの意図でしたか。

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

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

2) 結果をループして、結果ごとにテーブル行を追加する場合: そのために jQuery "each" を使用する必要がありますが、さらに調べてみると、この結果を介して 1 つのレコードを表示しているように見えます。テーブルを使用して 1 行のみを表示するのは奇妙です。

1 つの結果を追加するには (もちろん、これを複数の列に分割することもできます):

$('#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

あなたのシリアル化は正しく機能しているのだろうか。これを変更するとどうなりますか:

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 に答える