Rumah > Artikel > hujung hadapan web > Contoh terperinci penggunaan gabungan angularjs dan ajax_AngularJS
Ini adalah artikel tentang penggunaan easyui dengan ajax Ia juga memperkenalkan penggunaan angularjs dan membolehkan anda merasai kuasa angularjs. Terdapat banyak artikel mengenai ajax di Internet. Saya tidak akan mula menulis terus dari js objek httpxmlrequest asli. Membaca perkara seperti itu hanya untuk memahami bagaimana perkara peringkat tinggi datang dan apa prinsipnya Apabila anda benar-benar melakukannya, tulis perkara seperti itu. Jika anda memanfaatkan kemahiran anda, anda boleh gunakan kod semacam itu untuk menulis keseluruhan tapak. Perkara seperti html js tidak difikirkan sepenuhnya apabila ia mula-mula direka, dan ia hanya omong kosong. Nasib baik, terdapat pelbagai rangka kerja yang boleh membantu kita membuat najis ini lebih lazat dengan lebih mudah. Nasib baik, disebabkan oleh promosi industri Internet, perkara-perkara ini di bahagian pelayar berkembang ke arah piawaian bersatu.
Mari buat halaman borang web HelloAjaxNet.aspx. Mari kita bercakap tentang ajax dahulu. Di sini saya menggunakan AjaxPro.2.dll yang disebarkan secara meluas di Internet. sangat mudah digunakan. Pada asalnya, asp.net baharu datang dengan kaedah bahagian pelayan yang diisytiharkan menggunakan atribut kaedah web dan kaedah akses pagemethods sisi klien Pelbagai objek juga boleh didigitalkan dalam json, dan fungsinya adalah sama seperti di atas. Microsoft datang dengan kod di belakang aspx Kaedah kod mesti statik Bagi webconfig, tidak perlu mengkonfigurasinya dalam versi baharu persekitaran pembangunan vs2013 webconfig akan dilengkapkan secara automatik. Kemudian halaman pelayan dimuatkan dalam ScriptManager .GetCurrent(Page).EnablePageMethods = true; pelayan"> ca6b66ce984e7a13d89428526c49237a Kemudian pelanggan boleh menggunakan cara pagemethods untuk mengakses.
Saya masih rasa yang di atas lebih berguna. Saya tidak akan bercakap banyak tentang prinsipnya Apabila halaman dimuatkan, objek pelayan didaftarkan, dan kemudian halaman html yang dijana mempunyai beberapa ayat lagi
<script type="text/javascript" src="/ajaxpro/prototype.ashx"></script> <script type="text/javascript" src="/ajaxpro/core.ashx"></script> <script type="text/javascript" src="/ajaxpro/converter.ashx"></script> <script type="text/javascript" src="/ajaxpro/WebApplication.StudentsInfo,WebApplication.ashx"></script> <script type="text/javascript" src="/ajaxpro/WebApplication.Grad,WebApplication.ashx"></script> <script type="text/javascript" src="/ajaxpro/WebApplication.NewFolder.HelloAjaxNet,WebApplication.ashx"></script> <script type="text/javascript" src="/ajaxpro/WebApplication.DataEntity,WebApplication.ashx"></script>Mengapa? Ini untuk merujuk fail js ajaxpro/WebApplication1.NewFolder2.HelloAjaxNet,WebApplication1.ashx
Kemudian anda akan faham bahawa skrip ini untuk anda memanggil js pada klien dijana secara automatik oleh pelayan dan mempunyai nama yang sama dengan pelayan anda Kemudian anda boleh memanggil semula kaedah pelayan pada klien mengenainya. Ya, kami ingin menggunakan ciri ini dan kemudahan data json untuk mencapai pemindahan data pelayan pelanggan yang lancar.
Mengenai siri data json Pada masa lalu, anda hanya boleh menggunakan perpustakaan json luaran atau milik Microsoft sendiri untuk penghuraian manual:
Pelayan:
public string ServerProcerMethod(string stu) { //System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); //StuInfo s= jsSerializer.Deserialize<StuInfo>(stu); System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); List<StuInfo> s = jsSerializer.Deserialize<List<StuInfo>>(stu); if (s != null && s.Count > ) { StuInfo stu= s[]; StringBuilder sb = new StringBuilder(); jsSerializer.Serialize(stu, sb); return sb.ToString(); } else return null; }
//javascript 字符串转json对象: var obj = JSON.parse(str); //javascript json 对象转字符串: JSON.stringify(obj);Mengenai hubungan antara AjaxPro.2.dll dan ajax.dll, dikatakan di Internet bahawa mereka adalah berbeza, pada dasarnya, saya rasa. Sila muat turun ajaxpro dari laman web di atas Ini adalah versi yang sempurna
Selepas merujuk fail dll, anda perlu mengkonfigurasi httphandler webconfig Fungsinya adalah untuk memindahkan permintaan ashx di atas ke kod ajaxpro kami, dan kemudian membenarkan pelanggan kami untuk memanggil kaedah pelayan secara terus.
<system.webServer> <directoryBrowse enabled="true"/> <handlers> <add verb="*" path="*.ashx" name="myhandler" type="AjaxPro.AjaxHandlerFactory,AjaxPro."/> <!--<add verb="POST,GET" path="ajax/*.ashx" name="myhandler" type="Ajax.PageHandlerFactory, Ajax" />--> </handlers> </system.webServer>Kemudian saya tidak akan bercakap banyak lagi, saya akan melihat terus pada kod pelayan nanti.
Anda boleh memahami easyui sebagai sekumpulan kawalan lanjutan. Sama seperti jquery, anda membungkus objek js dan kawalan html asli dengan bahannya, dan kemudian anda boleh mengklik pada beberapa kaedah yang ditulis untuk anda untuk membantu anda memproses data dengan mudah. Dan ia juga mempunyai penampilan kawalan lalai yang okay, yang sangat bagus untuk perisian pengurusan perusahaan untuk perisian lain, anda boleh haha. Muat turun fail easyui dan masukkan ke dalam projek dan perkenalkan fail js dan gaya berkaitan easyui dan jquery:
<script type="text/javascript" src="../jquery-easyui-../jquery.min.js"> </script> <link rel="stylesheet" type="text/css" href="../jquery-easyui-../themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="../jquery-easyui-../themes/icon.css" /> <script type="text/javascript" src="../jquery-easyui-../jquery.easyui.min.js"></script>Kemudian, anda boleh menggunakan easyui untuk menjadikan kawalan html asli menjadi kawalan easyui melalui gaya css atau kod js seperti yang diperkenalkan pada halaman utama easyui
<div class="easyui-dialog" style="width:px;height:px" data-options=" title:'My Dialog', iconCls:'icon-ok', onOpen:function(){}"> dialog content. </div> <input id="cc" style="width:px" /> $('#cc').combobox({ url: ..., required: true, valueField: 'id', textField: 'text' });Ya, sangat mudah. Malah, terdapat beberapa penulis JS yang baik di China. Mereka telah mencipta beberapa UI seperti ini dan itu. Anda boleh memilih antara mereka, jadi mari kekal dengan yang ini. Keperluan yang paling biasa digunakan ialah paging sebelah pelayan ajax Mari kita selesaikan.
Mari kita bincangkan datagrid easyui ini terlebih dahulu Untuk memburukkan lagi, letakkan teg jadual dalam html klien: 16431938812a1ada99e05ed4bffa024df16b1740fad44fb09bfe928bcc527e08 '# studb').datagrid() akan menjadikannya sebagai kawalan grid data easyui untuk anda Anda boleh melakukan ini dalam document.ready(). Jadual data kami perlu diisi dengan data Dari manakah data ini dipaparkan? Easyui menerima sekumpulan parameter dalam bentuk objek json di banyak tempat, seperti datagrid ini:
具体看loader 和columns ,loader用于定义你以什么形式载入数据 定义了loader上面的url就没有必要了。
我这里的WebApplication1.NewFolder2.HelloAjaxNet.BindData(param.keyword, param.page, param.rows) 自然也是服务端的方法 用于检索数据的 。
关于这三个param.keyword, param.page, param.rows 是我们用于实现loader时 easyui那种设计方式故意暴露给我们的参数 方便我们使用。
param.keyword 是我们上面定义的 我们点搜索的时候需要往服务端传一个查询关键词 queryParams: { keyword: keywordStr }
param.page 是easyui自己的参数表示当前第几页 param.rows表示每页行数,每当你 点表格的 上一页 下一页 的时候 就会自动往loader 发翻页的参数 这个是自动的。
然后就从服务端获取数据填充表格 ,就是这么一个工作过程。 还有colums 我就不说了就是定义显示哪些列 和自定义列 那个很容易看懂。
easyui控件有属性 方法,调用方法 的形式总算像这样 :$('#studb').datagrid('reload') 这就相当于调用了#studb这个表格控件的reload方法了 然后数据就会自动刷新,每个控件的具体见文档。
服务端数据处理我们还是用entityframework 我一般都用codefirst的方式 这东西跟他自己的mssql数据库 结合的很好 用起很方便。
服务端代码:
//查询(带分页 [AjaxPro.AjaxMethod] public static WebApplication.DataEntity BindData(string keyword, int page, int rows) { //, ref int pageIndex, out int totalPage if (keyword == null) keyword = ""; int pageIndex = ; int pageSize = ; int totalPage; if (page != ) pageIndex = page; if (rows != ) pageSize = rows; MyDb db = new MyDb(); var data = from studentInfo in db.Students where studentInfo.name.Contains(keyword) select new { stuNo = studentInfo.stuNo, name = studentInfo.name, age = studentInfo.age, gradName = studentInfo.grad.gradName }; //var data = from studentInfo in db.Students where studentInfo.name.Contains(keyword) select studentInfo; totalPage = data.Count() % pageSize == ? data.Count() / pageSize : data.Count() / pageSize + ; if (pageIndex > totalPage) pageIndex = totalPage; else if (pageIndex < ) pageIndex = ; //var dt = DataList<object>.Create(data.OrderBy(r => r.stuNo), new StudentsInfo(), pageIndex, pageSize).Value; object dt=null ; if(data.Count()>) dt= DataList<object>.Create(data.OrderBy(r => r.stuNo), new { stuNo = , name = "", age = , gradName = "" }, pageIndex, pageSize).Value; WebApplication.DataEntity result = new WebApplication.DataEntity(); result.total = data.Count(); result.rows = dt; return result; }
关于数据部分 和EF linq 分页那些我就不贴出来了 完整示例下载里面有。走走看吧 试试看吧 完全无刷新 服务端分页,感觉棒棒哒
搜索那个我也不想说了哈 就是重新载入下数据而已,删除是通过自定义 列的方式 传id到js函数 然后调用服务端删除。然后要说下 录入功能 以及easyui自带 的表单验证也是相当方便的。
新建一个div 作为弹出层 里面有一个录入信息的表格 各种html控件 只要写上easyui对应的样式 就自动渲染了 看弹出层的 class="easyui-dialog" data-options="closed:true,title:'新学生注册',modal:true"
其实很简单噻看字面意思就明白了 这些参数 都在easyui的文档里有。验证 也是在html元素上写data-options 就可以了, :
<div id="addBox" class="easyui-dialog" data-options="closed:true,title:'新学生注册',modal:true" style="width: px; height: px"> <table class="auto-style"> <tr> <td>学生姓名:</td> <td> <input id="stuname" class=" easyui-textbox" data-options="required:true,missingMessage:'必填项!',validType:'email',invalidMessage:'email格式不正确!'" type="text" /></td> </tr> <tr> <td>班级: </td> <td> <input class="easyui-combobox" id="grad" name="grad" data-options="valueField:'id',textField:'gradName',required:true,missingMessage:'必填项!'" /></td> </tr> <tr> <td> <input id="saveBtn" onclick="saveClick()" type="button" value="保存" /></td> <td> <input id="Button" type="button" onclick="$('#addBox').dialog('close');" value="关闭" /></td> </tr> </table> </div>
新建按钮:
注意千万别用button 元素 就是这种 bb9345e55eb71822850ff156dfde57c8新加的65281c5ac262bf6d81768915a4a77ac0 这是个坑 ,折腾了好久。
保存按钮调用 的js函数:
//保存信息 function saveClick() { var isvaliok = $("#addBox").form('validate');//包起来的需要提交信息的那个div框的id if (isvaliok == false) { $.messager.show({ title: '提示', msg: '请完善不正确的项后再提交', showType: 'show' }); return; } var stu = {}; stu.name = $("#stuname").val(); stu.age = ; stu.GradId = $("#grad").combobox('getValue'); stu.gradName = $("#grad").combobox('getValue'); if (isNaN(stu.GradId)) stu.GradId = null; var rst = WebApplication.NewFolder.HelloAjaxNet.addStu(stu); if (rst.value == "ok") { $('#addBox').dialog('close'); $('#studb').datagrid('reload'); var gradData = WebApplication.NewFolder.HelloAjaxNet.getGrad().value; $('#grad').combobox({ data: gradData }).combobox('reload'); } else { $.messager.show({ title: '提示', msg: rst.error.Message + rst.value, showType: 'show' }); } }
注意到了噻:
var isvaliok = $("#addBox").form('validate');//包起来的需要提交信息的那个div框的id if (isvaliok == false) { $.messager.show({ title: '提示', msg: '请完善不正确的项后再提交', showType: 'show' }); return; }
在easyui里进行验证很简单噻 只要在html代码里把验证格式定义好了 ,只需要传入一个最外面容器控件的id $("#addBox").form('validate') 就自动帮我们验证了。并且界面上还有提示 焦点自动放到第一个验证不通过的控件上去了 完全不需要我们动手。
当然我们在客户端 document.ready()的时候 必须要绑定表格和下拉框的数据:
$(function () { //页面初始化 //载入表格数据 bindDataToTb(); //载入班级下拉框 var gradData = WebApplication.NewFolder.HelloAjaxNet.getGrad().value; $('#grad').combobox({ data: gradData }).combobox('reload'); var fd = new FormData(); });
服务端保存的代码:
//添加 [AjaxPro.AjaxMethod] public string addStu(StudentsInfo stu) { MyDb db = new MyDb(); if(stu.GradId==null) { if (string.IsNullOrEmpty(stu.gradName) == false) { Grad grd = new Grad(); grd.gradName = stu.gradName; Grad grdOld = db.grads.FirstOrDefault(r => r.gradName == stu.gradName); if(grdOld!=null) { return "类别已存在"; } else { db.grads.Add(grd); stu.grad = grd; } } } db.Students.Add(stu); db.SaveChanges(); return "ok"; }
服务端代码 如果我们没有这个id的类别我们就认为这个类别是新的 ,新加一个类别 然后立即绑定 perfect 完美 ,棒棒哒
看上去是不是有模有样。做管理类软件还行。
这样ui 那样ui当你需要自定义样式的时候发现什么ui都是浮云,例如我说的国内的写js比较牛的 就已经造出来很多ui了 ,表格是很漂亮 很强大。 其实很多功能你还是用不到 你想改还很困难 当然我的js也是很菜的。 当你用到另一套ui 的时候又要熟悉它那一套 。我只想用个简简单单的自定义分页表格而已 或者像asp.net里的服务器控件repeat 流式布局 四个数据一行那种 你怎么做。 还是自己动手吧。php里面有前端模板。
我这里只是简单从实际需求了解下angular的威力 php里面模板什么的都是浮云 新建一个webform HelloAjaxNetAngular.aspx
注意这个例子 服务端代码我一律用上面的丝毫都不会变 只是前端变了,angularjs 的主打思想是mvvm 模式 就是wpf里面那种依赖属性 动态绑定 ,不知道你们用过没 反正我用过 感觉就一个字 爽 ,做这种数据库平台程序 mfc winform 都是渣。
angularjs 的基础我就不介绍了 哈 直接从需求入手 做一个分页表格 加 信息更新 功能
angularjs的网站是 http://www.angularjs.org/ 这个网址在国内也是访问不了的。一些相关的其他人的学习笔记有 http://www.angularjs.cn/ http://www.zouyesheng.com/angular.html
反正这两个教程看了下对我没 对我没起到啥作用 感觉跟嚼木渣样的 ,angularjs的理念虽然是mvvm 但是angularjs本身还是感觉晦涩难懂。
我就在这样一个半懂不懂的状态下写了这个例子 ,所有的操作 几乎都完全不需要向jquery那样动dom 。真心感觉到了他的强大。前端就一个controller函数 管整个页面,怎么一个一个的分 我也不明白 只知道controller 跟html限定一样的树状结构。没在范围的html元素不能访问其controller里的 变量。
我们来看这个controller 函数 ,我写的时候也没什么感觉 。就是感觉很存粹 就只感觉到两个东西存在 。业务逻辑在操作数据。 就像在写c#数据操作代码样:
function myCtr($scope) { var mod = [{ name: 'xiang', age: }, { name: 'xiang', age: }, { name: 'xiang', age: }]; $scope.data = mod; $scope.curobj = {}; $scope.pageEntity = { total: , rows: , page: , pgmsg: '' } //初始化默认第一页 $scope.initPage = function () { var firstPage = WebApplication.NewFolder.HelloAjaxNetAngular.BindData($("#txtkeyword").val(), $scope.pageEntity.page, $scope.pageEntity.rows); $scope.data = firstPage.value.rows; var pageEntityMod = {}; pageEntityMod.total = firstPage.value.total; pageEntityMod.rows = $scope.pageEntity.rows; pageEntityMod.page = $scope.pageEntity.page; var totalpage = pageEntityMod.total % pageEntityMod.rows == ? parseInt(pageEntityMod.total / pageEntityMod.rows) : parseInt(pageEntityMod.total / pageEntityMod.rows) + ; pageEntityMod.pgmsg = "共 " + pageEntityMod.total + "条记录 每页 " + pageEntityMod.rows + "条,共 " + totalpage + "页 ,当前第 " + pageEntityMod.page + "页"; $scope.pageEntity = pageEntityMod; $scope.curobj = {}; } //更新当前 选定的 $scope.modifyCur = function () { var rst = WebApplication.NewFolder.HelloAjaxNetAngular.updateStu($scope.curobj) //刷新表格 当前选中信息 复原 $scope.initPage(); alert(rst.value); } //下翻页 $scope.nextPage = function () { var totalpage = $scope.pageEntity.total % $scope.pageEntity.rows == ? parseInt($scope.pageEntity.total / $scope.pageEntity.rows) : parseInt($scope.pageEntity.total / $scope.pageEntity.rows) + ; var pagenewnum = $scope.pageEntity.page + ; if (pagenewnum <= totalpage) $scope.pageEntity.page += ; $scope.initPage(); } //上翻页 $scope.previousPage = function () { var pagenewnum = $scope.pageEntity.page - ; if (pagenewnum >= ) $scope.pageEntity.page -= ; $scope.initPage(); } //搜索 $scope.search = function () { } //选中一行 $scope.del = function (sender, curobj) { //所有行的颜色还原//设置选中那一行的颜色 var rows = $(sender.target).parent().parent().parent().find("tbody").find("tr"); for (var i = ; i < rows.length; i++) { $(rows[i]).css("background", "white"); } $(sender.target).parent().css("background", "#ffed"); $scope.curobj = curobj; } //首次先调用下 以获取第一页 $scope.initPage(); }
界面部分:
<div ng-controller="myCtr" id="mygrid"> <input id="txtkeyword" type="text" /><input ng-click="initPage()" type="button" value="搜索" /> <br /> <br /> <div style="height: px"> <table cellspacing="" border="" class="gridtable"> <thead> <th width="px">name</th> <th width="px">age</th> </thead> <tbody ng-repeat="stu in data"> <tr ng-click='del($event,stu)' style="background-color: white"> <td>{{stu.name}}</td> <td>{{stu.age}}</td> </tr> </tbody> </table> </div> <div id="pager"> <a href="#" ng-click="previousPage()">上一页</a> <a href="#" ng-click="nextPage()">下一页</a> <span>{{pageEntity.pgmsg}}</span> </div> <div> 姓名:<input type="text" value="{{curobj.name}}" ng-model="curobj.name" /><br /> 年龄:<input type="text" value="{{curobj.age}}" ng-model="curobj.age" /> <input id="Button" type="button" ng-click="modifyCur()" value="更改" /> </div> </div>
Saya melihat bahawa saya membuat sendiri fungsi mengikat data Rujuk kepada pemuat datagrid di easyui. Selepas permintaan pertama untuk mendapatkan maklumat paging, saya serta-merta mengikat data ke jadual Anda boleh melihat bahawa ia betul-betul seperti membuat templat, dan kemudian memulakan kawalan paging saya sendiri. Apabila ng-click digunakan, klik klien dicetuskan seperti sebelumnya, dan kemudian kaedah dalam pengawal dipanggil untuk mengemas kini data Ambil perhatian bahawa data hanya dikemas kini mengikut logik perniagaan, dan tidak perlu melakukan apa-apa lain. Jika anda tidak memahami dua keping kod di atas, anda boleh menyemaknya sendiri Bermula dengan angularjs dan pengikatan data mengambil masa kurang daripada 10 minit,
Disebabkan mekanisme pengikatan dua hala seperti WPF, apabila data model data dikemas kini, kandungan halaman akan berubah secara automatik dengan sewajarnya. Anda juga dapat melihat bahawa apabila saya mengedit data dalam kotak teks di bawah, data dalam jadual di atas berubah sebelum diserahkan Kerana data mereka datang dari tempat yang sama, rasanya seperti ajax.
Kod sumber projek semua contoh di atas boleh dimuat turun dan dijalankan secara terus, tetapi disebabkan pengenalan beberapa perpustakaan luaran, ia hampir terlalu besar untuk dimuatkan dalam 10MB
Sesuatu untuk diperkatakan
Sebenarnya, jika Internet terus berkembang seperti ini, bahagian hadapan akan bersatu, dan bahagian hadapan akan menjadi raja Pada masa itu, halaman web akan menjadi sistem dan pelanggan. Bahagian belakang hanya bertanggungjawab untuk data dan keselamatan. Bukankah HTML5 kini hampir menjadi standard industri beberapa peranti terbenam menyokongnya
Buat masa ini, saya telah melihat beberapa orang di taman blog bercakap tentang mod MVC di mana bahagian hadapan dan bahagian belakang beroperasi pada model yang sama Apabila bahagian hadapan mengemas kini atribut, terdapat mekanisme yang secara automatik kemas kini bahagian belakang untuk kegigihan Pergi ke pangkalan data atau kemas kini atribut tertentu model di bahagian belakang, dan nilai halaman html bahagian hadapan akan berubah secara automatik. Ia bukan tidak boleh dilakukan Lagipun, terdapat begitu ramai orang yang berbakat, jadi saya fikir ia sekurang-kurangnya belum stabil.
Pelbagai UI termasuk easyui ligerui fineui miniui Devexpress dan banyak rangka kerja js seajs memerlukan JavaScriptMVC tulang belakang avalonjs knockout angular jquery jqueryui js benar-benar buruk, saya tidak dapat menghabiskan pembelajaran semua jenis rangka kerja
Terutamanya industri perisian berubah setiap hari Terdapat terlalu banyak teknologi berdasarkan rangka kerja dan platform Jika anda tidak mahir dalam teknologi tertentu, tidak mengapa jika anda boleh menggunakannya , anda mesti mahir dalam sekurang-kurangnya satu atau satu teknologi Jika tidak, sayangnya anda hanya seorang yang bodoh. Menulis kod perniagaan bermakna menggunakan pengalaman satu tahun selama sepuluh tahun Menulis kod perniagaan adalah tugasnya Selepas bekerja, dia perlu mempunyai sedikit tenaga untuk menyiasat intipati sesuatu selagi pengaturcara yang baik telah mengusahakan sistem pangkalan data ini untuk masa yang lama, dia akan tahu cara melakukannya sendiri Membangunkan beberapa rangka kerja kecil yang boleh dibangunkan dengan cepat untuk mengumpul beberapa perpustakaan alat dan pengalaman anda sendiri.
Jangan berat sebelah di tempat kerja Selagi dia boleh menulis kod perniagaan setiap hari, pembangunan perisian hanyalah satu profesion.
Saya secara peribadi tidak begitu menggemari js juga sangat teruk Apabila perkara ini direka pada asalnya, ia tidak sempurna dan menyebabkan pelbagai halangan untuk kami menggunakannya. Tiada prasangka terhadap mereka yang melakukan kerja bahagian hadapan di sini Terima kasih kepada mereka yang mempunyai pengetahuan menyeluruh tentang bahagian hadapan, seperti Situ Zhengmei, kerana mencipta alatan ini untuk memudahkan kami menyiapkan program tapak web ini.