事实证明 sf-selected-ids 属性的值需要采用 JSON 数组格式。例如 [productId1, productId2, productId3]。否则后端服务会抛出该异常。但是,选择器本身将字符串创建为 product1、product2、product3。即没有括号。(您可以在设计器的高级视图中看到这一点)。
所以这里是详细的步骤:
这是设计器视图中的选择器 (DesignerView.Simple.cshtml):
<sf-list-selector sf-dynamic-items-selector sf-provider="properties.ProductProviderName.PropertyValue" sf-item-type="properties.ProductType.PropertyValue" sf-multiselect="true" sf-sortable="true" sf-master="true" sf-selected-ids="productIds" />
您需要设计器 JS 文件来回进行 JSON 转换。所以我把它保存在 MVC/Scripts/[WidgetName]/designer-simple.json 中:(Simple 是设计器视图的名称)
(function ($) {
var designerModule = angular.module('designer');
angular.module('designer').requires.push('sfSelectors');
designerModule.controller('SimpleCtrl', ['$scope', 'propertyService', function ($scope, propertyService) {
$scope.feedback.showLoadingIndicator = true;
propertyService.get().then(function (data) {
if (data) {
$scope.properties = propertyService.toAssociativeArray(data.Items);
}
},
function (data) {
$scope.feedback.showError = true;
if (data)
$scope.feedback.errorMessage = data.Detail;
}).finally(function () {
$scope.feedback.showLoadingIndicator = false;
});
$scope.$watch('properties.ProductIds.PropertyValue', function (newValue, oldValue) {
if (newValue) {
$scope.productIds = JSON.parse(newValue);
}
});
$scope.$watch('productIds', function (newValue, oldValue) {
if (newValue) {
$scope.properties.ProductIds.PropertyValue = JSON.stringify(newValue);
}
});
}]);
})(jQuery);
最后,我在与 DesignerView.Simple.cshtml 相同的文件夹中添加了 DesignerView.Simple.json 文件:
{
"priority": 1,
"scripts": [
"client-components/selectors/common/sf-selected-items-view.js"
],
"components" : ["sf-dynamic-items-selector"]
}
小部件控制器具有 ProductIds 属性。其值将采用 [productId1、productId2 等] 格式。我使用 JSON 反序列化器为控制器 Index 操作获取一系列产品:
public class ProductListController : Controller
{
private string productProviderName = WebConfigurationManager.AppSettings["productProviderName"];
private string productTypeName = WebConfigurationManager.AppSettings["productTypeName"];
public string ProductIds { get; set; }
public string ProductType
{
get { return productTypeName; }
set { productTypeName = value; }
}
public string ProductProviderName
{
get { return productProviderName; }
set { productProviderName = value; }
}
public ActionResult Index()
{
var selectedProducts = string.IsNullOrEmpty(this.ProductIds) ? new Guid[0] : JsonConvert.DeserializeObject<Guid[]>(this.ProductIds);
// ... rest of your controller index action
}
}