Loại bỏ hiện tại ViewModel giữa ASP.NET WebForms phía máy chủ bài viết ...

Question

Sử dụng bài viết này được đăng trên CodeProject.com, "Using KnockoutJS in your ASP.NET applications" làm hướng dẫn tôi đang cố gắng tạo danh sách thả xuống có thể sử dụng lại, được nạp dữ liệu bằng ASP.NET 3.5 Các biểu mẫu Web, nhưng điều đó thúc đẩy KnockoutJS cho ràng buộc dữ liệu phía máy khách. Nhiều trường hợp độc lập của trình đơn thả xuống này sẽ có thể sống độc lập trong cùng một trang.

Cho đến nay, bài viết CodeProject.com là vô giá trong việc hướng dẫn tôi cách thiết lập mọi thứ và tôi đã chuyển thành công dữ liệu ViewModel cập nhật qua lại giữa máy chủ và máy khách dưới dạng chuỗi JSON và chuyển đổi nó sang và từ một đối tượng (cả trên máy chủ và máy khách). Những gì tôi đang treo lên là những gì nên là một phần đơn giản; ràng buộc ViewModel vào danh sách thả xuống!

Vì vậy, tôi bắt đầu bằng cách tải các chuỗi JSON thành một trường ẩn. Nó bao gồm một danh sách các vùng và một SelectedRegion.

<input type="hidden" id="ddlRegionKO_hdnRegionListVMStorage" value="{&quot;Regions&quot;:[{&quot;RegionName&quot;:&quot;Mid Atlantic USA&quot;,&quot;RegionId&quot;:2},{&quot;RegionName&quot;:&quot;Mid West USA&quot;,&quot;RegionId&quot;:10},{&quot;RegionName&quot;:&quot;North Central USA&quot;,&quot;RegionId&quot;:5},{&quot;RegionName&quot;:&quot;North East USA&quot;,&quot;RegionId&quot;:1},{&quot;RegionName&quot;:&quot;North West USA&quot;,&quot;RegionId&quot;:7},{&quot;RegionName&quot;:&quot;Other&quot;,&quot;RegionId&quot;:9},{&quot;RegionName&quot;:&quot;South Central USA&quot;,&quot;RegionId&quot;:6},{&quot;RegionName&quot;:&quot;South East USA&quot;,&quot;RegionId&quot;:3},{&quot;RegionName&quot;:&quot;South West USA&quot;,&quot;RegionId&quot;:8}],&quot;SelectedRegion&quot;:{&quot;RegionName&quot;:&quot;North Central USA&quot;,&quot;RegionId&quot;:5}}" /> 

Sau đó, tôi chuyển đổi chuỗi này thành đối tượng Javascript bằng cách sử dụng chức năng ko.utils.parseJson().

var stringViewModel = document.getElementById("ddlRegionKO_hdnRegionListVMStorage").value; 
var ddlRegionKO_pnlRegionDDLContainer_ViewModel = ko.utils.parseJson(stringViewModel); 

Sau đó, tôi chuyển đổi các định nghĩa tài sản vào ko.observable và ko.observableArray phương pháp (đây là một trong những phần mà sẽ được cần phải được refactored, nhưng như một bằng chứng của khái niệm nó cũng đủ).

// 
// Convert all the model properties to KO Propety/Methods 
for (var propertyName in ddlRegionKO_pnlRegionDDLContainer_ViewModel) { 
    switch(propertyName.toUpperCase()) 
    { 
     // 
     // Multiple Region objects are stored as an array in the regions property. 
     case "REGIONS": 
      ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName] = ko.observableArray(ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName]); 
      break; 
     // 
     // Only a single region may be selected at any time. 
     case "SELECTEDREGION": 
      ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName] = ko.observable(ddlRegionKO_pnlRegionDDLContainer_ViewModel[propertyName]); 
     break; 
    }; 
}; 

Với điều này, tôi mong chờ danh sách thả xuống để được cư trú và SelectedRegion chọn khi các phương pháp được gọi là applyBindings ...

ko.applyBindings(ddlRegionKO_pnlRegionDDLContainer_ViewModel); 

Tôi đã đặt này tất cả cùng nhau tại JSFiddle .. here ... Tôi nghi ngờ rằng tôi có thể nhìn thấy một cái gì đó nhưng tôi không thể nhìn thấy những gì nó có thể được. Mọi thứ đều đúng với tôi.

Nếu bất kỳ ai cũng có thể thấy điều gì đó mà tôi nhìn thấy, tôi sẽ vô cùng biết ơn!

Cảm ơn,

-g

Answer 1

Bạn không cần phải chỉ định tên mô hình trong các ràng buộc của bạn. Thay vì options:ddlRegionKO_pnlRegionDDLContainer_ViewModel.Regions, chỉ cần sử dụng options:Regions vv

<select id="ddlRegionKO_ddlRegionList" 
    data-bind="options:Regions, 
     optionsText:'RegionName', 
     optionsValue:'RegionId', 
     value:SelectedRegion, 
     optionsCaption:'Choose Region ...'"> 
</select> 

Working fiddle

Chỉnh sửa: Bạn cũng bị mất tích một optionsValue ràng buộc đó mà xác định tài sản mà bạn muốn bị ràng buộc với giá trị của mỗi tuỳ chọn. Tôi đã cập nhật fiddle để bao gồm thay đổi này.

Chỉnh sửa 2: Vâng, khu vực bạn đã chọn trong json của bạn là một đối tượng. Tôi nhìn qua knockout documentation về ràng buộc và tôi không thấy một cách để ràng buộc một giá trị được chọn cho một đối tượng, vì vậy nếu bạn có thể sửa đổi json, bạn chỉ có thể chỉ định id của giá trị đã chọn.

<input type="hidden" 
    id=".." 
    data-bind="..a bunch of array stuff... ,&quot;SelectedRegion&quot;:5}" 
/> 

Xem những gì tôi đã làm ở đó?Tôi thay thế các đối tượng

'SelectedRegion':{'RegionName':'North Central USA','RegionId':5} 

chỉ:

'SelectedRegion':5 

Updated fiddle is here. Nhưng điều này sẽ không giúp đỡ với tình huống hộp văn bản của bạn bởi vì nó sẽ hiển thị ID thay vì văn bản trong hộp văn bản của bạn. Đó là một chút muộn ở đây vì vậy tôi không thực sự chắc chắn làm thế nào để sửa chữa mà tay ra, nhưng bạn có thể xem here cho một số cảm hứng. Chúc may mắn.