案例背景
本文将介绍如何通过一行代码实现下图中的功能。
红色框中是http://blog.csdn.net/cheny_com/article/details/7234619提到的AjaxValue,也只有一行代码,看上去类似一个下拉菜单,但能从内部把Ajax功能执行完毕并显示到屏幕上。
现在要做的业务需求是:在上述任务分配界面,做右边红框边点选人员并调整名字后,左边的蓝框中整个页面要更新。这是常见的一种业务操作,没有什么新奇之处,本文讨论的是:能否只用一行代码实现?
当然,这里所说的一行代码,是指在调用处只需要一行代码(因此以后这类功能都只需一行代码),后台则需要一些储备。
传统实现步骤
1. 在左边调整人员后调用某个JS函数
2. 这个函数调用后台的一个函数,产生需要填充左边蓝框的内容
3. 将内容用Ajax填充到蓝框中。
本人上个月刚看明白JS是什么东西,还不会做上面的步骤2,所以不得不用下面的方法:
1. 在左边调整人员后调用某个JS函数(现成的,我做的SFCUI.AjaxValue中有OnSuccess能指定调用什么刷新函数)
2.1 这个“刷新”函数实际上会点击一个刷新链接,这个链接是asp.net的MVC自带的Ajax.Link,它会把指定Url中的参数更新到指定ID的DIV中。
2.2 在刷新链接下面,放置一个DIV,准备接收传来的内容。
确切说,这个DIV在页面初始化后、人员没有调整时时,里边也已经放了基本相似的内容,因此会造成重复代码,下面会提到,也会提到如何消除。
3. 将内容用Ajax填充到蓝框中。
传统实现的代码
因为这些代码有些都已经删除了,所以简单复原一下,说明一下思路。
整个初始页面的代码:
@SFCUI.Link会产生一个AjaxLink,如果被点击,就能完成后面<dl>内容的刷新;script中包含一个freshLeft函数,会在右边红框修改完成时被调用,完成点击动作。(我尝试了网上直接用JS而无需绕道Ajax.Link的方法,没调试通。)下面<dl>中的内容,首先被初始化在这里,然后还会出现在Ajax的返回的View中,是一段重复代码。
点击Link后,会执行下面的Controller中的第二段代码:
上面展示了两个函数,第一个是第一生成初始页面的函数,第二个是Ajax刷新的函数,除了返回的View‘不同,其他都一样,也是重复代码。
而如果看Ajax返回的AjaxRefreshAssignItemsLeftPad.cshtml,其内容则完全是上面的<dl>中的内容,因为他的目的就是刷新dl,因此代码也相同。
之二将提到如何删除这些代码,并且甚至让 JS消失,所有调用除了剩下的必须的controller中的代码,在cshtml 里边只剩下一行代码。