1

いくつかの記録があります。すべてのレコードをクリックすると、情報がアコーディオンに表示される必要があります。

その情報は、データベースから動的に取得することになっています。

私がこれまでやってきたことは、

部分ビューを作成します。詳細情報を表示することを想定しています。

レコードをクリックすると、jquery メソッドが呼び出され、コントローラーでメソッドが実行されます。コントローラーは、オブジェクトを Json の形式で返します (またはその他の提案を受け付けています)。

JQueryメソッドにはその(モデル)オブジェクトがありますが、それを使用して部分ビューをレンダリングするにはどうすればよいですか。

4

2 に答える 2

2

いくつかの記録があります。すべてのレコードをクリックすると、情報がアコーディオンで表示される必要があります。

あなたが望むものを達成することができる2つの方法があります。レコードに関する詳細情報を提供するアクションから部分的なビューを返す必要があると思います。

  1. アンカーリンクのクリックイベントをリッスンし、イベント内でURLをフレーム化してから$("#accordion-container-1").load(url)。

元。

orderNoコメントから、アクションをパラメーターとして渡す必要があることがわかりました。したがって、orderNoas idを設定するか、それを文字列に追加して（要素内のIDの重複を避けるため）、アンカーリンクのidに設定する必要があります。

それで、

$(function(){

  $("a.somecssclass").click(function(){

     var orderNo = this.id;

     var url = "/ControllerName/Tracking?orderNo=" + orderNo;

     // this will call the action through ajax and update the container with the
     // partial view's html.
     $("#divToLoadTheHtml").load(url); 
  });   
});
  1. MVCでサポートされているajaxアクションリンクを使用します。Ajax.ActionLinkajaxを介してコントローラーアクションを呼び出すアクションリンクを作成し、html結果をコンテナーに更新できます。

元。

この場合、コレクションをループしてレコードを生成するときは、メソッドを介してリンクを作成する必要があり（クリックすると、ajaxを介してコンテンツをロードする必要があります） 、ライブラリAjax.ActionLinkを含める必要があります。jquery'unobtrusive.ajax.js

@foreach(var m in Collection)
{
    .. other stuff

    @Ajax.ActionLink(link name, "Action", new { orderNo = m.something? }, 
    new AjaxOptions
    { 
        UpdateTargetId = "somediv" // set the div name where you want to load the partial view
    });
}

OPのコメントに基づいて更新

アクションメソッドは次のようになります。

public PartialViewResult Tracking(int orderNo) 
{ 
     var manager = new OrderManager(); 
     return PartialView(manager.Tracking(orderNo));
}

名前の付いTracking.cshtmlた部分ビューが必要です。部分ビュー内に、話していたレコードの詳細情報を表すhtmlを作成する必要があります。

Tracking.cshtml

@model TrackingModel

<div>
  @Html.DisplayFor(...)
  ...
</div>

jqueryまたはajaxアクション（前述のとおり）からアクションを呼び出すと、Trackingdivなどの特定のコンテナーにロードできる部分ビューhtmlが取得されます。

于 2012-07-19T11:33:21.427 に答える
0

これは、何らかのフォームを送信し、結果として部分ビューをレンダリングする必要がある場合の基本的なアプローチです

function GetView(){
if ($('#MyHtmlForm').valid()){
    $.ajax(
    {
      type: "POST",
      url: $('#MyHtmlForm').attr("action"), 
      data: $('#MyHtmlForm').serialize(),
      success: function(result) {
        //Render the partial view
        }
      },
      error: function(req, status, err) {
        //handle the error
      }
    });
}

}

これはjson形式で行の基本的な詳細を取得するため、javascritpを使用してhtmlを生成します

function GetSomeData() {
var cod = $('.row').val();
$.getJSON('@Url.action("ActionName","Controller")', { cod: cod }, function (result) {
    //Render data
});

}

于 2012-07-14T20:38:13.180 に答える