Danh sách chuyển từ MVC ViewBag sang JavaScript

Question

Tôi có danh sách người dùng mà tôi chuyển từ bộ điều khiển của mình sang chế độ xem bằng cách sử dụng túi xem. Bây giờ tôi cần để có thể vượt qua cùng một danh sách để javascript trên trang. Tôi có thể tạo lại danh sách bằng cách sử dụng vòng lặp foreach:

@foreach (var item in ViewBag.userList) //Gets list of users passed from controller and adds markers to the map 
{ 
    var userLat = item.LastLatitude; 
    var userLon = item.LastLongitude; 
    var _userId = item.Id; 

    <script>array.push({"userId":"'@_userId'","userLat":"'@userLat'","userLon":"'@userLon'"});</script> 
} 

Tuy nhiên, điều này có vẻ như một cách tiếp cận lộn xộn và yêu cầu nhiều việc phải làm lại nếu có thay đổi. Tôi biết có những bài viết tương tự trên Stack tràn, nhưng rất nhiều người trong số họ sử dụng phiên bản trước của MVC và cú pháp tương tự dường như không áp dụng. Ý tưởng nào?

Answer 1

Bạn có thể làm điều đó trong một dòng mã đơn lẻ và an toàn bằng cách sử dụng trình phân tích cú pháp JSON. Bạn hoàn toàn không bao giờ nên tự xây dựng JSON với một số chuỗi và các công cụ như bạn đã cố gắng làm trong ví dụ của mình. Không cần phải viết bất kỳ vòng nào.

Dưới đây là cách chính xác để làm điều đó:

<script type="text/javascript"> 
    var array = @Html.Raw(
     Json.Encode(
      ((IEnumerable<UserModel>)ViewBag.userList).Select(user => new 
      { 
       userId = user.Id, 
       userLat = user.LastLatitude, 
       userLon = user.LastLongitude 
      }) 
     ) 
    ); 

    alert(array[0].userId); 
</script> 

HTML được tạo sẽ xem xét một cách chính xác như bạn mong đợi:

<script type="text/javascript"> 
    var array = [{"userId":1,"userLat":10,"userLon":15}, {"userId":2,"userLat":20,"userLon":30}, ...]; 
    alert(array[0].userId); 
</script> 

Tất nhiên cấp độ tiếp theo của sự cải tiến trong mã này được để thoát khỏi của ViewCrap và sử dụng kiểu xem mạnh mẽ.

Answer 2

Một tùy chọn khác, có thể là tạo hành động mới trong bộ điều khiển của bạn để trả về JsonResult. Kết quả json này có thể trả về danh sách của bạn. Trong trang của bạn, bạn có thể gọi hành động với jquery và sử dụng nó từ đó.

public ActionResult GetMyList() 
{ 
    var list = GetMyUserList(); 

    return Json(new { userlist = list }, JsonRequestBehaviour.AllowGet); 
} 

Answer 3

@Darin Câu trả lời Dimitrov được bật. Tôi chỉ muốn thêm vào nó nếu bất cứ ai đi qua một mô hình và không phải là một watchbag.

<script type="text/javascript"> 
var array = @Html.Raw(Json.Encode(
      Model.YourModel.Select(_ => new { 
       id = _.Id, 
       text = _.Name 
      }) 
     )) 

Trường hợp sử dụng của tôi là cụ thể cho select2. Một sau đó có thể chỉ cần vượt qua mảng số liệu: attribute

$("#storeSelect").select2({ 
     data: array, 
     placeholder: "Select something" 
}); 
</script> 

viewmodel

public class YourViewModel 
    { 
    public IEnumarable<YourPoco> YourPocos { get; set; } 
    } 

khiển

public class YourController : Controller 
{ 
    public ActionResult Index() 
    { 
     YourViewModel vm = new YourViewModel{ 
      // Using Dependancy injection 
      YourPocos = yourRepo.GetYourPocos(); 
     }; 
     return View("Index", "_Layout",vm); 
    } 
} 

Tôi nhận ra câu trả lời này có thể là không cần thiết, nhưng nó là lần đầu tiên tôi đang sử dụng Json.Encode và chuyển các giá trị mô hình sang phần mở rộng jquery. Điều này cho tôi là quá mát mẻ. Nó ở một mức độ nhất định tạo ra khả năng mở rộng lớn về những gì nếu không sẽ là một @htmlhelper