如何将引用数据从 C# 控制器传递到挖空视图模型中，以便它可以将 ID 解析为其文本值

Question

我有一些c#类需要传递到敲除视图模型中进行查找。显示1000的用户状态或14038的角色是无用的。

我需要能够将这些值解析为它们的文本表示。

我在数据库中填充了一些"参考数据"。最重要的是一些T4转换，它们将参考数据转换为C#代码，例如：

public static class UserStatus
{
#region Members
public const string ClassName = "UserStatus";
public const int Pending = 1000;
public const int Active = 1001;
public const int Inactive = 1002;
public const int Deleted = 1003;
#endregion
}

然后在整个代码中使用这个类为User类赋值，而不是说User。UserStatus=1000它是用户。UserStatus=UserStatus.Pending.

现在来谈谈这个问题

当前发行的

我有一个页面，列出了系统中的用户，列表中的一列是用户的状态。对象中传递的状态是1000，而不是"挂起"。我想做的是能够在淘汰赛中将1000转售给"待定"。问题是因为淘汰是在客户端执行的，它不知道我的C#类。理想情况下，我希望能够在我的控制器中预先弹出一个具有UserStatus的可能值的列表，将其传递到我的淘汰视图模型中，并让它在可能的状态中循环，并根据特定的用户状态来解决它。

HTML代码

<tbody style="display: none;" class="table-body" data-bind="visible: true, foreach: { data: viewData.ClientGroups, as: 'ClientGroup' }">
<tr>
<td><a href="#" data-bind="click: ClientGroup.viewDetails"><span data-bind="html: ClientGroup.Name()"></span></a></td>
<td>TODO: Bind Client</td>
<td><span data-bind="html: ClientGroup.StatusText()"></span></td>
<td><span data-bind="html: ClientGroup.CreatedOnText()"></span></td>
</tr>
</tbody>

创建并绑定淘汰视图模型。

var viewData = {};
require(['main'], function () {
require(['message', 'viewModel/clientGroupViewModel', 'viewModel/clientGroupDetailsViewModel'],
function (message, clientGroupViewModel, clientGroupDetailsViewModel) {
$(document).ready(function () {
// enable ko punches
ko.punches.enableAll();
var json = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model, Newtonsoft.Json.Formatting.None, new IHtmlStringConverter()));
// I'd like to be able to create something here and pass it to my model.
var lookupValues = { blah }
viewData = new clientGroupViewModel(json, lookupValues);
var zdm = new clientGroupDetailsViewModel(json, lookupValues );
ko.applyBindings(viewData, document.getElementById('clientGroupAdmin'));
ko.applyBindings(zdm, document.getElementById('detailsModal'));
});
});
});

在淘汰视图模型中

_self.StatusText = ko.computed(function () {
console.log('user status');
if (ko.utils.arrayFirst(UserStatus, function (value) {
console.log(value);
return value.Id == _self.UserStatus();
}));
return 'false';
});

Answer 1

请阅读我的额外信息问题，但这是我的一种方法。

console.clear();
var $fakeAsync = function (api, result) {
var isEmptyCall = _.isNull(api) || api.length === 0;
dfd = $.Deferred(function () {
setTimeout(function () {
dfd.resolve(isEmptyCall ? null : result);
}, isEmptyCall ? 0 : 50);
});
return dfd.promise();
};
var $fakeData = [
	{Id: 1, Name: 'foo', UserStatus: 1000},
{Id: 2, Name: 'bar', UserStatus: 1001},
{Id: 3, Name: 'stack', UserStatus: 1000},
{Id: 4, Name: 'overflow', UserStatus: 1002}
]
var $fakeUserStates = {
	1000: 'pending',
1001: 'ready',
1002: 'cancelled',
1003: 'banned'
};
function MyViewModel() {
	var self = this;

self.userStates = [];

self.loadMapping = function () {
	return $fakeAsync('api/fakemappingcall', $fakeUserStates).done(function (result) {
console.log('mapping gathered');
	self.userStates = result;
});
};

self.loadData = function () {
	return $fakeAsync('api/fakedatacall', $fakeData);
};

self.method = function () {
	self.loadData().done(function (result){
_.each(result, function (r) { _.extend(r, { 'UserStatusText': self.userStates[r['UserStatus']] }) });
console.log(result);
});
};

self.loadMapping().done(function () {
	self.method();
});
};
ko.applyBindings(new MyViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>