首页 > 代码库 > 我和小美的撸码日记(3)之一句话搞定MVC表单页数据绑定与提交

我和小美的撸码日记(3)之一句话搞定MVC表单页数据绑定与提交

另外献上在《线体验Demo地址》希望大家也能从中得到一些启发。
地址:http://121.40.148.178:8080/ 、 用户名:guest,密码:123456
QQ技术交流群:239168429


“尼玛哥,你今天有空么?”

“今天周日呀,怎么会没空,你这是要约么?麻辣烫凉皮我都吃,在哪儿,我一会儿就到。”

“约你妹呀,我昨天都加一天班了,东西到现在还没搞完,你给我快点过来呀,我需要你!”

“别急噢,有哥在,这都不叫事儿。”

二十分钟后...

“小美,什么问题搞不定?”

“尼玛哥,MVC这个破东西,一点都不好用,以前我做毕业设计用WebForm里面拖服务器控件可方便了。我这两天在做一个订单管理,以前用服务器控件,拖完控件以后这样写”

 

private void save()
{

string orderNo=txt_OrderNo.Text.Trim();
string orderDate=txt_OrderDate.text.trim();
... ...
SqlHelper.Execute("Insert Into Order...
... ...


}

“表头数据提交这样写,订单明细更好弄了,直接拖个GridView出来数据就可以绑定上去了。你看界面我昨天上午就弄好了,数据按你以前说的,组成Json走Ajax提交到后台这一个个拼,到后台再一个个解,再插数据库要把我搞疯了,表头的还好,明细的会把我搞疯掉!!你看这是我仿其它界面拖出来的界面”

 

 

“不错,不错界面现在画得很不错了,JQgrid用得也很像那么回事。你提交数据的代码是怎么写的?”

“诺,你看”

    //保存事件
    function SubmitOrderForm() {
function (r) {
            if (r) {
                Loading(true, "正在提交数据...");
                window.setTimeout(function () {
                    var postData = http://www.mamicode.com/“{["OrderNo:”+$(txt_OrderNo).val()+ ... ...

                   //明细表格里的都不知道怎么写了!!!!!
                    AjaxJson("/ExampleModule/Order/SubmitOrderForm?KeyValue=http://www.mamicode.com/" + KeyValue, postData, function (data) {>, data.Code);
                        ThisCloseTab();
                    });
                }, 200);
            }
        });
    }

“看起来倒是像这么回事的,订单明细表格里的一样把值取出来拼Json呀怎么不会了?”

“表格里面我也不知道用户填了多少行数据,知道的话我还可以写个for循环。”

“小美,我看你事业线纵深也不怎么样呀,你这脑子怎么还是这么笨呢!你看表格一共有多少行你这样循环去取,不就好了吗?”

“可是你没看到这上面不是有空行么!”

“都说女人胸大无脑,我觉得你现在肯定还是没发育,以后肯定比柳岩身材好。有空行,遇到空行你跳出循环不就好了!你这代码这样写也太乱了,就算写完了也容易出异常,我给你个取页面数据的函数,你自己拿去套着用”

/*
自动获取页面控件值
*/
function GetWebControls(element) {
    var reVal = "";
    $(element).find(‘input,select,textarea‘).each(function (r) {
        var id = $(this).attr(‘id‘);
        var value = http://www.mamicode.com/$(this).val();
        var type = $(this).attr(‘type‘);
        switch (type) {
            case "checkbox":
                if ($(this).attr("checked")) {
                    reVal += ‘"‘ + id + ‘"‘ + ‘:‘ + ‘"1",‘
                } else {
                    reVal += ‘"‘ + id + ‘"‘ + ‘:‘ + ‘"0",‘
                }
                break;
            default:
                if (value =http://www.mamicode.com/= "") {
                    value = " ";
                }
                reVal += ‘"‘ + id + ‘"‘ + ‘:‘ + ‘"‘ + $.trim(value) + ‘",‘
                break;
        }
    });
    reVal = reVal.substr(0, reVal.length - 1);
    return jQuery.parseJSON(‘{‘ + reVal + ‘}‘);
}

 “尼玛哥,真看不出来呀,别看你人不怎么样,写出来的代码还真灵活,就这几句话,我刚套到代码里Alert一下,把界面上的控件和值全拼成了Json,我只要在后台把控件名改成字段名,就可以直接调后台方法把Json转成实体,直接插数据库啦。”

 “小美,你真是得了柳岩的病没有柳岩的命呀!你怎么这么蠢呢,前台代码也是你写的,你界面上的控件名跟字段名一致,不就不用转了么,Json提交后台,转实体插数据库一气呵成,直接可以封闭成公用方法了。”

 “有些代码我是用代码生成器生成的呀!”

 “你就不会改下代码生成器么!把生成前台界面上的txt_、select_。。。这些该死的东西拿掉不就好了,不管加控件减控件套这代码的话,一个代码都不用改呀!”

 “恩,也是噢,我先写写看。”

 一小时后... ...

“尼玛哥,好了,那代码真好用我直接封闭到函数库去了,提交后台就一句话。”

“就这么点东西,你还折腾了一小时,你也是个人才。”

“切,我把明细提交,表单提交一起写完了,以前是我JS用得不熟,其实JS也跟C#一样,也可以遍历也一样可以对控件赋值取值,一样有对象的概念。我刚刚把明细转成Json后,后台就转List了,批量插入,带事务也方便。页面编辑其实就是取值相反的操作,那就是从后台取到值,实体转成Json,再把你方法这么一改,就好了”

/*
自动给控件赋值
*/
function SetWebControls(data) {
    for (var key in data) {
        var id = $(‘#‘ + key);
        var value = http://www.mamicode.com/$.trim(data[key]).replace(" ", "");
        var type = id.attr(‘type‘);
        switch (type) {
            case "checkbox":
                if (value =http://www.mamicode.com/= 1) {
                    id.attr("checked", ‘checked‘);
                } else {
                    id.removeAttr("checked");
                }
                $(‘input‘).customInput();
                break;
            default:
                id.val(value);
                break;
        }
    }
}

“把这两个函数封装一下,前台页面要加载数据或者保存数据,一句话就能搞定呀,尼玛哥!这次代码是我写好的,要不要给网友们发一份呀”

“别,你那代码是直接用到项目里的,项目里面有些公司Logo链接什么的,容易让别人误会是搞推广。”

“恩,好的,晚点我有时间的时候,把公司、项目信息全去掉,再来上传源码。”

另外献上在《线体验Demo地址》希望大家也能从中得到一些启发。


地址:http://121.40.148.178:8080/ 、 用户名:guest,密码:123456


QQ技术交流群:239168429







 

我和小美的撸码日记(3)之一句话搞定MVC表单页数据绑定与提交