MVC4 前后台数据交互问题


想要实现的功能:
有一张用户表,想要管理此用户表(暂且只查询--分页查询)
查询用户表并将其显示在页面上,10条记录分一页。
大致如下(python实现的,布吉岛怎么在win server部署,遂改用C# MVC4):


我的方法:
使用的前端框架:bootstrap3.3.5
数据绑定:knockout
1、查询数据库获取所需值
2、将其转化为json对象
3、返回到*.js文件,绑定数据
js文件处理大致如下(python返回的是一个dict(),可直接操作~~):

/** 
* 获取所有用户信息 
*/
function get_all_users(current_page) {
    $.ajax({
        type: "POST",
        url: "/auth/query_all_user",
        data: {
            "_xsrf": getCookie("_xsrf"),
            "current_page": current_page
        },
        success: function (data) {
            if (data["status"] == "success") {
                total_pages = parseInt(data["info"].total_pages);
                if (total_pages == 0) {
                    total_pages = 1;
                }

                if (viewModel == undefined) {
                    viewModel = ko.mapping.fromJS(data["info"].current_data);
                    model = ko.toJS(viewModel);
                    ko.applyBindings(viewModel);
                    twbsPagination();
                }
                else {
                    if (page_size != total_pages) {
                        $('#pagination_zc').remove();
                        $("#pagination_box").append('<ul id="pagination_zc" class="pagination-sm"></ul>');
                        twbsPagination();
                    }
                    ko.mapping.fromJS(data["info"].current_data, viewModel);
                    model = ko.toJS(viewModel);
                }
                $("#table_title").html("用户列表 (" + data["info"].total_count + ")");
                page_size = total_pages;
            }
        },
        error: function () {
            errNotify("可能为网络异常,请检查您的网络!");
        }
    });
}


问题:
数据库表:

/***************************************************/
/*******************    用户表    ******************/
/***************************************************/
IF object_id('users','u') is not null
DROP TABLE [users]
GO
CREATE TABLE [users]
(
[user_id]   UNIQUEIDENTIFIER PRIMARY KEY, -- ID
[user_name]   NVARCHAR(16) UNIQUE, -- 用户名
[password]   NVARCHAR(32), -- 密码 32位 MD5
[role_id]   TINYINT, -- 角色
[status]   BIT,     -- 用户是否可用状态
[create_user_id]  UNIQUEIDENTIFIER, -- 创建人ID
[create_at]   DATETIME, -- 创建时间
[update_user_id]  UNIQUEIDENTIFIER, -- 更新人ID
[update_at]   DATETIME -- 更新时间
)
GO

INSERT INTO [users] ([user_id], [user_name], [password], [role_id], [status], [create_at]) values (NEWID(),
'Jakey.Chen', '202CB962AC59075B964B07152D234B70', 0, 1, GETDATE())
INSERT INTO [users] ([user_id], [user_name], [password], [role_id], [status], [create_at]) values (NEWID(),
'Prince.Chen', '202CB962AC59075B964B07152D234B70', 1, 1, GETDATE())
GO

我现在从数据库查询数据,查询到用户表数据,DataTable和2个整形数据,总页数和总记录数。
我要如何将其转化成我上面js文件可用的对象返回呢?谢谢!

我的实现(没有完成想要的功能):
用实体类来数据直接转化,但是不知道UNIQUEIDENTIFIER和BIT类型该对应什么类型呢?
我好像实体类弄错了,始终转不对。

private Int32 _total_pages = 0;
private Int32 _total_count = 0;
private List<user_info> _current_data = null;

/// <summary>
 /// 总页数
/// </summary>
  public Int32 total_pages
 {
            get { return _total_pages; }
            set { _total_pages = value; }
 }。。。
user_info是具体的记录信息,类型分别为string(user_id) string(user_name) Int32(role_id) bool(status)

可能描述的有点乱,若有其他方法可以实现也是极好的~~万分感谢~

6 个解决方案

#1


暂时解决了,不返回对象,直接返回json字符串,在js里面再把字符串转为Json对象。

#2


引用 1 楼 u011062542 的回复:
暂时解决了,不返回对象,直接返回json字符串,在js里面再把字符串转为Json对象。



基本都是这么处理的。

#3


这跟 asp.net mvc 还是别的什么没有关系,服务端本身就是序列化对象为json格式的字符串返回的。你要是使用asp.net,那么使用ashx是最为通用和一致的写法,跟asp.net或者别的什么服务端基本无关。

#4


另外,你的 js 函数有点“惨”。代码缩进没有对齐,逻辑上冗余没有看清楚,而且像 total_count、total_page、分页内容等,都应该定义在 model 中,然后界面通过 ko 绑定来自动化地改变。你的 js 中不长的这几行代码有80%是多余的,而且这些多余说明了对于 mvvm 模式应用设计思路基本上还没有理解。

#5


拿  http://knockoutjs.com/examples/gridEditor.html 这里的 demo 为例,当使用 ajax 来获取 json 数组数据(假设使用数组变量array引用)之后,只要写一条语句 viewModel.gifs(array) 来更新就行了,那么界面就会自动改变。在 mvvm 模式下,只应该更新 viewmodel 中的数据,而不应该在 success 回调中去直接访问 dom。

#6


引用 5 楼 sp1234 的回复:
拿  http://knockoutjs.com/examples/gridEditor.html 这里的 demo 为例,当使用 ajax 来获取 json 数组数据(假设使用数组变量array引用)之后,只要写一条语句 viewModel.gifs(array) 来更新就行了,那么界面就会自动改变。在 mvvm 模式下,只应该更新 viewmodel 中的数据,而不应该在 success 回调中去直接访问 dom。

谢谢。
智能推荐

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告