web-dev-qa-db-ja.com

JsonResultからMVC3 / Razorでテーブル/リストデータを動的に表示しますか？

ビューページusers.cshtmlがあります。そして、json形式のユーザーのリストを返すjsongetusers（）というJsonResultアクションメソッドがあります。

Users.cshtmlページのロード時に、ユーザーのリストを取得し、テーブルを作成して表示したい。 Razorを使用してASP.Net MVCでこれを実装する最良の方法は何ですか？私はMVC3とRazorが初めてです。私の最初の考えは、jsonの結果をループ処理し、javascript/jqueryを使用してテーブルを構築し、DOMに追加することでした。しかし、私はこれを行うためのより良い方法がなければならないと推測していますか？

ありがとう。

asp.net-mvc-3razor
13
user471317

Mystere Manが提案したように、この場合、最初にビューを取得し、次に再びajax呼び出しを行ってjsonの結果を取得する必要はありません。つまり、サーバーへの2回の呼び出しです。最初の呼び出しでユーザーのHTMLテーブルを直接返すことができると思います。

この方法でこれを行います。ユーザーのリストのマークアップをブラウザーに返す厳密に型指定されたビューがあります。このデータは、httpリクエストを使用してブラウザーから呼び出すアクションメソッドによって提供されます。

ユーザーのViewModelを持っている

public class UserViewModel
{
  public int UserID { set;get;}
  public string FirstName { set;get;}
   //add remaining properties as per your requirement

}

コントローラーには、ユーザーのリストを取得するメソッドがあります

public class UserController : Controller
{

   [HttpGet]
   public ActionResult List()
   {
     List<UserViewModel> objList=UserService.GetUsers();  // this method should returns list of  Users
     return View("users",objList)        
   }
}

UserService.GetUsers（）メソッドが、データソース（テーブル）内のusresのリストを表すUserViewModelオブジェクトのリストを返すと仮定します。

users.cshtml（Views/Userフォルダーの下）で、

 @model List<UserViewModel>

 <table>

 @foreach(UserViewModel objUser in Model)
 {
   <tr>
      <td>@objUser.UserId.ToString()</td>
      <td>@objUser.FirstName</td>
   </tr>
 }
 </table>

すべてのセットがyourdomain/User/ListのようなURLにアクセスできるようになり、HTMLテーブル内のユーザーのリストが表示されます。

21
Shyju

ビューを追加します。

  1. ビューフォルダを右クリック
  2. 追加->表示をクリックします
  3. 厳密に型指定されたビューを作成するをクリックします
  4. ユーザークラスを選択します
  5. Scaffold templateとしてListを選択します

ビューを呼び出すコントローラーとアクションメソッドを追加します。

public ActionResult Index()
{
    var users = DataContext.GetUsers();
    return View(users);
}
2
Stafford Williams

これは、KnockoutJSの KoGrid プラグインを使用して簡単に実行できます。

<script type="text/javascript">
    $(function () {
        window.viewModel = {
            myObsArray: ko.observableArray([
                { id: 1, firstName: 'John', lastName: 'Doe', createdOn: '1/1/2012', birthday: '1/1/1977', salary: 40000 },
                { id: 1, firstName: 'Jane', lastName: 'Harper', createdOn: '1/2/2012', birthday: '2/1/1976', salary: 45000 },
                { id: 1, firstName: 'Jim', lastName: 'Carrey', createdOn: '1/3/2012', birthday: '3/1/1985', salary: 60000 },
                { id: 1, firstName: 'Joe', lastName: 'DiMaggio', createdOn: '1/4/2012', birthday: '4/1/1991', salary: 70000 }
            ])
        };

        ko.applyBindings(viewModel);
    });
</script>

<div data-bind="koGrid: { data: myObsArray }">

サンプル

1
Ryan

通常の方法は次のとおりです。

  • コントローラのデータベースからユーザーを取得します。
  • ユーザーのコレクションをビューに送信します
  • ビューで、リストを作成しているユーザーのリストをループします。

これにはJsonResultやjQueryは必要ありません。

1
Romias