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

Question

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

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

ありがとうございました。

Answer 1

それを行うための通常の方法は次のとおりです。

• あなたは、コントローラ内のデータベースからユーザーを取得します。
• ユーザーのコレクションをビューに送信します。
• リストを作成するユーザーの一覧をループするビューで表示します。

このためにJsonResultまたはjQueryは必要ありません。

Answer 2

ビューを追加します。

1. 右クリックして表示するフォルダ
2. クリック追加 - >表示
3. クリック厳密に型指定されたビュー
4. を作成し、あなたのユーザークラスを選択します
5. 選択リスト足場テンプレート

は、ビューを呼び出すために、コントローラとアクションメソッドを追加して：

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

Answer 3

ミステール男が示唆したように、取得するために、再度、AJAX呼び出しを行ってもう一度最初だけのビューを取得し、この場合、jsonの結果は不要です。つまり、サーバーへの2回の呼び出しです。私は最初の呼び出しで、ユーザーのHTMLテーブルを直接返すことができると思います。

このようにします。私たちは強く型付けされたビューを持っています。このビューは、ユーザーリストのマークアップをブラウザに返します。このデータは、HTTPリクエストを使ってブラウザから呼び出すアクションメソッドによって提供されています。

はユーザー

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

} 

とあなたのコントローラ内のためViewModelにユーザーUserService.GetUsers（）メソッドが返すと仮定すると

public class UserController : Controller 
{ 

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

のリストを取得するためのメソッドを持っている持っていますあなたのデータソース（テーブル）のusresのリストを表すUserViewModelオブジェクトのリスト

とあなたのユーザ。CSHTML（ビュー/ユーザーフォルダの下にある）、

@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テーブル内のユーザーのリストが表示されます。

Answer 4

本当にこのようにする必要がある場合は、これができます。おそらくこれを行うにはより良い方法がありますが、これは私が今のところ持っているすべてのものです。私はデータベースコールをしなかった、私はちょうどダミーデータを使用しました。シナリオに合わせてコードを変更してください。 HTML tableを入力するのにjQueryを使用しました。

私のコントローラには、すべての従業員がJSON resultを返すGetEmployeesというアクションメソッドがあります。あなたは、データベースからユーザーを返すようにリポジトリを呼ぶような場所です：

public ActionResult GetEmployees() 
{ 
    List<User> userList = new List<User>(); 

    User user1 = new User 
    { 
      Id = 1, 
      FirstName = "First name 1", 
      LastName = "Last name 1" 
    }; 

    User user2 = new User 
    { 
      Id = 2, 
      FirstName = "First name 2", 
      LastName = "Last name 2" 
    }; 

    userList.Add(user1); 
    userList.Add(user2); 

    return Json(userList, JsonRequestBehavior.AllowGet); 
} 

Userクラスは次のようになります。あなたのビューで

public class User 
{ 
    public int Id { get; set; } 
    public string FirstName { get; set; } 
    public string LastName { get; set; } 
} 

次を持つことができます：

<div id="users"> 
    <table></table> 
</div> 

<script> 

    $(document).ready(function() { 

      var url = '/Home/GetEmployees'; 

      $.getJSON(url, function (data) { 

       $.each(data, function (key, val) { 

        var user = '<tr><td>' + val.FirstName + '</td></tr>'; 

        $('#users table').append(user); 

       }); 
      }); 
    }); 

</script> 

上記のコードに関して：var url = '/Home/GetEmployees';Homeはコントローラであり、上記で定義したアクションメソッドはGetEmployeesです。

こちらがお役に立てば幸いです。

UPDATE：私は常にビューのビューモデルクラスを作成

これは私がそれを行っているだろうか..です。

public ActionResult List() 
{ 
    UserListViewModel viewModel = new UserListViewModel 
    { 
      Users = userRepository.GetAllUsers() 
    }; 

    return View(viewModel); 
} 

そして、私の見解では：私はすべてのユーザーを返すデータベースへの呼び出しからこのユーザーリストを作成するでしょう、私のコントローラで

public class UserListViewModel 
{ 
    IEnumerable<User> Users { get; set; } 
} 

：この場合、私はそれをUserListViewModelのようなものを求めているだろう私は、次のを持っているでしょう：

<table> 

@foreach(User user in Model.Users) 
{ 
    <tr> 
      <td>First Name:</td> 
      <td>user.FirstName</td> 
    </tr> 
} 

</table> 

Answer 5

あなたは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 }"> 

Sample