如何将参考数据从C#控制器传递到敲除视图模型中,以便它可以将ID解析为其文本值

时间:2019-01-18 16:39:43

标签: asp.net-mvc knockout.js

我有一些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就是user.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';
        });

1 个答案:

答案 0 :(得分:0)

请阅读我的其他信息问题,但这是我要解决的方法之一。

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>