刚接触Salesforce,过程的确是比较艰难了,中文资料几乎没有,看英文资料学的效率却不高,不过看了一段时间的英文资料发现自己英语水平挺高不少啊,现在看都不用工具翻译,早知道就再次尝试报个6级,看下能过不,嘻嘻。。。。Salesforce的开发也是MVC模式,asp.net的MVC就玩的比较多了,换个平台一下子没适应过来,不过原理都一样,接下来就介绍一下最近的学习成果吧,来看一下SF中MVC模式下视图与控制器之间的交互,先贴控制器和视图的代码,下面有详细讲解。

apex视图代码如下:

<apex:page Controller="SendMessageController">
<apex:stylesheet value="{!URLFOR($Resource.jQuery,  'jquery-ui.css')}" /><apex:stylesheet value="{!URLFOR($Resource.jQuery,  'mystyle.css')}" /><apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-2.1.1.min.js')}"/><apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery-ui.js')}"/>
<apex:form ><apex:pageBlock title="视图与控制器的交互"><apex:pageBlockSection title="Ajax请求提示区"><apex:outputPanel ><apex:actionStatus startStyle="font-size:40px;color:red;" stopStyle="font-size:30px;" startText="正在添加" id="adding" stopText="添加完成"/></apex:outputPanel><apex:outputPanel ><apex:actionStatus startStyle="font-size:40px;color:red;" stopStyle="font-size:30px;" startText="正在删除" id="deleting" stopText="删除完成"/></apex:outputPanel></apex:pageBlockSection><apex:pageBlockSection title="功能区"><input type="button" onclick="OpenDialog()" id="addUser" value="选择微信用户(按钮)"/><apex:outputPanel id="AjaxBlock"><apex:variable value="{!0}" var="rowNum"/><apex:pageBlockTable value="{!wechatuserList}" var="wu"><apex:column headerValue="序号"><apex:outputText value="{0}"><apex:param value="{!rowNum+1}"/></apex:outputText></apex:column><apex:column headerValue="操作"><apex:commandLink value="删除" action="{!deleteRow}" reRender="AjaxBlock" status="deleting" style="color:blue"><apex:param name="rowIndex" value="{!rowNum}"/></apex:commandLink></apex:column><apex:column headerValue="昵称"><apex:outputField value="{!wu.Name}"/></apex:column><apex:column headerValue="微信号"><apex:variable var="rowNum" value="{!rowNum+1}"/><apex:outputField value="{!wu.openid__c}"/></apex:column><apex:column headerValue="是否有效"><apex:outputField value="{!wu.validornot__c}"/></apex:column></apex:pageBlockTable></apex:outputPanel></apex:pageBlockSection></apex:pageBlock><apex:actionfunction reRender="AjaxBlock" status="adding" immediate="true" action="{!GetChoose}" name="GetChoose" ><apex:param name="ChooseParam" assignTo="{!Choose}" value=""/></apex:actionfunction><div id="SelectWechatUser" style="height:470px;overflow-Y:auto;"><apex:outputPanel ><input type="button" value="确认选择" onclick="ComfirmChoost()" class="btn"/></apex:outputPanel><apex:pageBlock ><apex:variable value="{!0}" var="rowNum2"/><apex:pageBlockTable value="{!GetUserList}" var="glist"><apex:column headerValue="选择" style="width:5%"><input type="checkBox" value="{!glist.Id}" name="checkedPro"/></apex:column><apex:column headerValue="序号" style="width:5%;text-align:center;"><apex:outputText value="{0}" ><apex:param value="{!rowNum2+1}"/></apex:outputText></apex:column><apex:column headerValue="昵称" style="width:30%"><apex:outputField value="{!glist.Name}" style="width:100%"/></apex:column><apex:column headerValue="微信号" style="width:30%"><apex:outputField value="{!glist.openid__c}" style="width:100%"/><apex:variable var="rowNum2" value="{!rowNum2+1}"/></apex:column><apex:column headerValue="是否有效" style="width:30%"><apex:outputField value="{!glist.validornot__c}" style="width:100%"/></apex:column></apex:pageBlockTable></apex:pageBlock></div>
</apex:form><script>var dialog;$(function () {dialog=jQuery("#SelectWechatUser").dialog({autoOpen: false,height:550,width: 900,modal: true});});function OpenDialog(){jQuery("#SelectWechatUser").dialog("open");}function ComfirmChoost(){var choose=[];var allPro=document.getElementsByName("checkedPro");for(var i=0;i<allPro.length;i++){if(allPro[i].checked){choose.push(allPro[i].value);}}if(choose.length==0){alert("请选择微信用户");return;}else{jQuery("#SelectWechatUser").dialog("close");GetChoose(choose.join(';'));}}</script>
</apex:page>

然后下面是控制器的代码:

public class SendMessageController {public List<wechatuser__c> GetUserList { get; set; }public String Choose{get;set;}public List<String> chooseIds{get;set;}public List<wechatuser__c> wechatuserList { get; set; }public SendMessageController(){wechatuserList=new List<wechatuser__c>();GetUserList=[select id,Name,openid__c,validornot__c from wechatuser__c];}public void GetChoose(){                              if(Choose !=null ){chooseIds = Choose.split(';');System.Debug('长度:'+wechatuserList.size());for(wechatuser__c model : [select id,Name,openid__c,validornot__c from wechatuser__c WHERE id IN :chooseIds]){             wechatuserList.add(model);                                            }System.Debug('长度:'+wechatuserList.size());}}public void deleteRow() {Integer rowIndex;rowIndex = Integer.valueOf(ApexPages.currentPage().getParameters().get('rowIndex'));wechatuserList.remove(rowIndex);}
}

大概效果图就如下:

大致描述下这个页面和控制器做了什么,首先点击选择微信用户,然后出现一个dialog选择框(jQuery ui风格),选上对应的微信用户后,便会在上图右下角出现对应的选择,点击删除操作,便会删除掉对应行,在向控制器get数据和post请求的时候(Ajax),请求的时候在请求提示区会有对应的正在请求数据的提示。整个过程都是AJAX,却完全不是用js做到的,相当方便,当然也支持通过js去完成,最后也大致说明下。

当点击选择微信号按钮出现一个dialog,这个就不多讲,直接js打开,只不过前面需要引用jquery ui的js和css

dialog的代码是这样构成的。

<div id="SelectWechatUser" style="height:470px;overflow-Y:auto;"><apex:outputPanel ><input type="button" value="确认选择" onclick="ComfirmChoost()" class="btn"/></apex:outputPanel><apex:pageBlock ><apex:variable value="{!0}" var="rowNum2"/><apex:pageBlockTable value="{!GetUserList}" var="glist"><apex:column headerValue="选择" style="width:5%"><input type="checkBox" value="{!glist.Id}" name="checkedPro"/></apex:column><apex:column headerValue="序号" style="width:5%;text-align:center;"><apex:outputText value="{0}" ><apex:param value="{!rowNum2+1}"/></apex:outputText></apex:column><apex:column headerValue="昵称" style="width:30%"><apex:outputField value="{!glist.Name}" style="width:100%"/></apex:column><apex:column headerValue="微信号" style="width:30%"><apex:outputField value="{!glist.openid__c}" style="width:100%"/><apex:variable var="rowNum2" value="{!rowNum2+1}"/></apex:column><apex:column headerValue="是否有效" style="width:30%"><apex:outputField value="{!glist.validornot__c}" style="width:100%"/></apex:column></apex:pageBlockTable></apex:pageBlock></div>

apex中是通过上面这样的写法进行数据填充的,其中<apex:pageBlockTable value="{!GetUserList}" var="glist">   value中的值便是对应到控制器中的GetUserList,这个变量类型是List<wechatuser__c>,所以当页面加载完的时候,如果GetUserList有值的话,便会循环填充满pageBlockTable了,控制器在构造函数中便已经查了数据库,并赋值在这个变量中,另外<apex:variable value="{!0}" var="rowNum2"/>这个我个人理解是一个会根据pageBlockTable中记录条数,进行递增的一个变量,这里我就用来给每条记录一个序号,删除对应的行也是通过这个变量去取得rowIndex来操作的。另一个pageBlockTable的原理也是一样的。

在打开的dialog对话框选择了对应的条目后,js便把选择了的id传到控制器,使用的是actionfunction

<apex:actionfunction reRender="AjaxBlock" status="adding" immediate="true" action="{!GetChoose}" name="GetChoose" ><apex:param name="ChooseParam" assignTo="{!Choose}" value=""/></apex:actionfunction>

在actionfunction中可以定义apex: param 参数传递过去,而assignTo这个attribute则是对应到了控制器里面的Choose变量,变量有get和set方法,这样,当调用GetChoose(choose.join(';')) 便把想传递的参数直接到了控制器里面的Choose去,这里是我个人觉得挺有趣的。紧接着便是调用数据库把对应记录查出来,然后wechatuserList.add(model); 这样视图这边便会刷新AjaxBlock中的数据,这里就要注意了,如果你觉得仅仅更新wechatuserList便会让视图绑定了这个变量的table也进行刷新的话,你就错了,没有进行过处理的话,是会刷新整个页面,那么页面是新的,数据也就是新的了,刚才传过去的id数据也对应丢失,这样当然不是我们想要的。

在ajax请求的过程中,如果实现 1.让用户知道正在请求数据,页面不刷新  2.请求完后,仅仅刷新想要刷新的部分呢。 第一个问题:在actionfunction中不是有一个status属性吗,注意看 它对应的是

<apex:outputPanel ><apex:actionStatus startStyle="font-size:40px;color:red;" stopStyle="font-size:30px;" startText="正在添加" id="adding" stopText="添加完成"/></apex:outputPanel>

看属性也就很明显,在Ajax请求过程中status属性是用来通知用户浏览器正在请求某个操作(如果网络卡的话,不卡当然这个信息也不会看到),startText和stopText的值便是通过改变对应的值来告知ajax请求的过程和完成的状态。问题二:对于actionfunction中的reRender属性,便是指定需要ajax刷新的区域,类似这个例子,考虑ajax请求完成后,更新了wechatuserList的值,而视图中的pageBlockTable刚好绑定了这个变量,如此,ajax请求完后,我们希望刷新这个pageBlockTable来显示最新的状态,于是我用一个div或者ouputPanel来包住这个table,然后赋值一个id,再把这个id给到actionfunction的attribute  reRender。这样,在actionfunction执行完后,便会刷新对应的区域,实现了Ajax的请求。

一样的道理,点击commandLink 带上了apex: param 参数,带上需要删除的行rowIndex,在点击了删除按钮后,也是删除List<wechatuser__c>的值,然后ajax刷新AjaxBlock。

总结一下,当视图需要访问控制器的某个方法或者变量(变量需要get和set),只需要{!函数名(或者变量名)}  这样便可以访问控制器,如果需要带上参数便在标签中带上<apex: param>  可以通过绑定控制器的变量和视图中的pageblocktable来实现数据的同步,如果改变了对应的值,刷新视图对应的部分便可以。当然除了这样的方法实现控制器和视图的通讯和Ajax请求,我们也可以通过js来完成,下面代码便是在js中调用控制器的函数,并在回调函数中进行对应的处理。

SendMessageController.AutoAjax(Param,function(result, event){if (event.status) {
                                     //这里是请求完成处理的事情}
                               //这里是当请求状态不正常(错误或者网络延迟),处理区域
                            },{escape: true}//这个是html编码的转义开关,之前的一篇博客有讲过);

js方法中SendMessageController便是控制器名,.后面的便是对应的方法名,控制器的方法前需要带上@RemoteAction标签,函数第一个便是传过去的参数,如果有多个参数,用逗号隔开便可以,有function的便是回调函数,最后那个是html转义的标志,前面有讲到,大概的控制器和视图交互就是这样,应该还不全,也是研究了一个星期的成果而已,后面再慢慢完善吧。

转载于:https://www.cnblogs.com/xmfdsh/p/4511045.html

Salesforce视图与控制器之间的交互相关推荐

  1. SDN入门第五篇——交换机与控制器之间的交互流程

    1.原理 sdn交换机与控制器之间采用Openflow协议进行通信. openflow 交换机和控制器之间的交互步骤 SDN交换机和控制器在建立TCP连接的基础上,进行如下通信: 1.首先互相发送He ...

  2. PN532和控制器之间的交互

    PN532和控制器之间的交互 如图所示,pn532和控制器之间是cmd-cmd_ack的模式进行交互. 图示的第一次交互是控制器向PN532发指令帧,此时PN532(记为A)会对这条指令返回一个ack ...

  3. ASP.NET MVC视图和控制器之间的传值总结(一)

    一.Control往View传递值  1.1 ViewBag ViewBag的后面接的是动态对象,它会在程序运行的时候动态解析.具体用法为ViewBag.Key,Key为Data在View中的唯一识别 ...

  4. adb指令通过uid控制_AB PLC | LOGIX 5000控制器之间通过MSG指令实现数据交互

    前言: AB PLC控制器系列很多,主要分为小型MicroLogix和Micro800系列.中型CompactLogix系列.大型ControlLogix系列,而大.中型又统称为LOGIX 5000控 ...

  5. AngularJs-指令和指令之间的交互(动感超人)

    前言: 上节我们学习到了指令和控制器之间的交互,通过给指令添加动作,调用了控制器中的方法.本节我们学习指令和指令之间是如何交互的,我们通过一个小游戏来和大家一起学习,听大漠老师说这是国外的人写的dem ...

  6. 在视图控制器之间传递数据

    我是iOS和Objective-C以及整个MVC范例的新手,但我坚持以下几点: 我有一个充当数据输入表单的视图,我想给用户选择多个产品的选项. 这些产品在另一个带有UITableViewControl ...

  7. [翻译:ASP.NET MVC 教程]理解模型、视图和控制器

    本篇教程为你提供了ASP.NET MVC的模型.视图和控制器的高级概述.换句话说,即本文向你解释了在ASP.NET MVC中"M"."V"和"C&qu ...

  8. ASP.NET MVC教程:理解模型、视图和控制器(1)

    本文对ASP.NET MVC的模型.视图和控制器做一次高级概述,换句话说,就是解释ASP.NET MVC中的"M""V""C".阅读完本文后 ...

  9. 了解模型、视图和控制器

    了解模型.视图和控制器 本教程对 ASP.NET MVC 的模型.视图和控制器提供了高层面的概述.换句话说,它解释了 ASP.NET MVC 中的 'M'.'V'和'C'. 阅读本教程后,您将会了解 ...

最新文章

  1. 一名英文不好的程序员的救赎
  2. 8-14-Exercise
  3. python简单项目-4个Python经典项目实战,练手必备哦!
  4. Oracle中删除数据的一个小技巧
  5. Qt5 使用 #pragma 加载 lib 文件的注意事项
  6. springboot做网站_Github 上 Star 最多的个人 Spring Boot 开源学习项目
  7. NET问答: ThreadStatic 和 ThreadLocalT 哪一个更好 ?
  8. 推荐系统整体框架概览
  9. ICCV 2019 | 旷视研究院提出文字检测新方法:像素聚合网络PAN
  10. UILabel常见属性
  11. python利用字典破解WIFI密码
  12. CAD工具——导出JPG
  13. 缺什么知识就补什么知识
  14. 考研英语-旧题高频词(齐雪妮老师)-2020-02-27,03-05,03-12,03-19
  15. 草坪护理产品行业调研报告 - 市场现状分析与发展前景预测(2021-2027年)
  16. JavaWeb综合案例——商品后台管理系统
  17. 最专业逻辑图和最专业项目文档制作实战讲解
  18. 循环冗余校验-CRC
  19. 前端实现“查看更多”效果
  20. PRACH, preamble, RO 的关系与区别

热门文章

  1. JDK,JRE,JVM及设置PATH
  2. python中%是什么意思_python中%代表什么意思?
  3. 解决Redis超卖问题
  4. python知识:用turtle绘制樱桃树
  5. MATLAB-循环类型相关(for while break continue)
  6. 常量元素记忆口诀_人体中的常量元素与微量元素
  7. 【深度学习】pytorch-tensorflow-anaconda笔记
  8. faster rcnn源码理解(二)之AnchorTargetLayer(网络中的rpn_data)
  9. Ubuntu15.0.4下Torch安装教程
  10. Spring Boot【快速入门】