我有一個查看頁面users.cshtml。我有一個JsonResult操作方法，jsongetusers（）返回json格式的用戶列表。從JsonResult MVC3/Razor中動態顯示錶/列表數據？
在users.cshtml頁面加載時，我想獲取用戶列表，建立一個表並顯示它。使用Razor在ASP.Net MVC中實現這一點的最佳方式是什麼？我對MVC3和Razor相當陌生。我最初的想法是循環瀏覽json結果，並使用javascript/jquery構建表並將其附加到DOM。但我猜測必須有更好的方法來做到這一點？
謝謝。
做的正常方式是：
你不需要JsonResult或jQuery。
添加視圖：
添加控制器和動作方法調用視圖：
public ActionResult Index()
{
var users = DataContext.GetUsers();
return View(users);
}
由於空軍終於曼建議，第一，然後讓只是一個視圖中再次再次調用Ajax來獲得在這種情況下json結果是不必要的。即2次調用服務器。我想你可以在第一次調用時直接返回用戶的HTML表格。
我們會這樣做。我們將擁有一個強類型視圖，它將把用戶列表的標記返回給瀏覽器，並且這個數據由一個action方法提供，我們將使用一個http請求從我們的瀏覽器調用該方法。
有一個視圖模型爲用戶
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（）方法將返回一個列表UserViewModel對象的列表，它表示您的數據源（表格）中的usres列表
和您的用戶。CSHTML（這是在瀏覽/用戶文件夾），
@model List<UserViewModel>
<table>
@foreach(UserViewModel objUser in Model)
{
<tr>
<td>@objUser.UserId.ToString()</td>
<td>@objUser.FirstName</td>
</tr>
}
</table>
所有設置，現在你可以訪問URL像yourdomain/User/List，它會給你在一個HTML表格的用戶列表。
如果你確實需要這樣做，那麼這就是你可以做的。有可能有更好的方法來做，但這是我目前所擁有的。我沒有進行數據庫調用，我只是使用虛擬數據。請修改代碼以適應您的方案。我使用jQuery來填充HTML table。
在我的控制器中，我有一個名爲GetEmployees的操作方法，它返回所有員工的JSON result。在這裏，你會打電話給你的資料庫從數據庫返回的用戶：
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：
這是我怎麼會做呢..
我總是創建一個視圖模型類的觀點。在這種情況下，我會叫它像UserListViewModel：
public class UserListViewModel
{
IEnumerable<User> Users { get; set; }
}
在我的控制器中我會通過呼叫填充此用戶列表數據庫返回的所有用戶：
public ActionResult List()
{
UserListViewModel viewModel = new UserListViewModel
{
Users = userRepository.GetAllUsers()
};
return View(viewModel);
}
在我看來，我想有以下幾點：
<table>
@foreach(User user in Model.Users)
{
<tr>
<td>First Name:</td>
<td>user.FirstName</td>
</tr>
}
</table>
第二種方法可以工作，但會在大量的池中獲得性能損失。使用JSon總是比較好，然後在用戶瀏覽器中構建數據視圖，然後在大量的http調用中在服務器端構建相同的視圖。 – Tomas 2012-10-22 12:41:40
您可以用KoGrid插件KnockoutJS做到這一點很容易。
<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 }">
爲什麼要使用不同的操作方法比用戶頁面來填充列表？這會變慢，需要兩個請求，而不是一個。 – 2012-03-22 02:03:05
對於初始頁面加載，我不需要兩個。但是，當通過用戶列表進行分頁時，我需要異步加載用戶列表。我想爲什麼不爲初始加載調用相同的函數。 – user471317 2012-03-22 15:59:54
以下哪個答案可以解答您的問題？ – 2016-08-31 08:55:10