jQuery


Send AntiForgeryToken via jQuery Ajax in ASP.NET Core

In ASP.NET Core, if we use jQuery Ajax to post data to the server, and we want the ValidateAntiForgeryToken attribute to work. We have to do some tricks. The official document didn't document how to do it via jQuery. Let me show you how to do it. Please do read the official document first: https://docs.microsoft.com/en-us/aspnet/core/security/anti-request-forgery?view=aspnetcore-2. …


jQuery.maskedinput如何验证日期(处理2月份,支持闰年)

我司的系统里最近发现了一个神奇的现象: 呵呵呵呵呵。。。。。 我们用的是jQuery.maskedinput这个插件,插件本身只是为了约束格式,并不做validation。所以我们必须自己搞定。思路很简单,插件提供了completed事件,所以只要在用户输入完成后验证字符串是否为合法日期。重点是一个正则表达式。 用大微软的bing搜索后发现了一个支持mm/dd/yyyy并可以验证闰年的正则: ^((0[13578]|1[02])[\/.]31[\/.](18|19|20)[0-9]{2})|((01|0[3-9]|1[1-2])[\/.](29|30)[\/.](18|19|20)[0-9]{2})|((0[1-9]|1[0-2])[\/.](0[1-9]|1[0-9]|2[0-8])[\/.](18|19|20)[0-9]{2})|((02)[\/.]29[\/.](((18 …


Fine Uploader 3.0 如何知道所有文件都已上传完毕

最近的项目里用到了Fine Uploader,最新版本是3.0。(原先叫做valums file uploader)。它的官网是:https://github.com/valums/file-uploader,下载在:https://github.com/valums/file-uploader/wiki/Releases。详细文档在GitHub:https://github.com/valums/file-uploader。 我们的一个需求是不能选择完文件后立即上传,而要手动去触发,并且,在上传完毕后,我要得到一个消息,以便下一步处理。但在官网的例子里没有这样的demo。所以我自己开荒了一下。JQuery版本的fine uploader我没开荒成功,所以下面的例子都是用“No-Dependency Fine Uploader”做的。 思路是这样的:在用户触发上 …


ASP.NET Web API接受JSON格式复杂对象(嵌套)

上礼拜在公司开荒Web API,被爆出翔了。遇到个具体问题是这样的:Web API中的方法接受的参数是个复杂对象,这个对象里嵌套了另一个对象。但使用API的人不知道如何在JSON里传递复杂对象给Web API。大家一起爆了很久,尝试了各种写法,还是没能解决。 今天我突然想到一个办法,可以获取正确的Nested JSON字符串。并且开荒成功了。与大家分享: 首先,我写的例子是这样的,Product对象里嵌套了一个Category对象,AddProduct的方法接受的是Product对象,我不仅需要Product的信息,也需要被嵌套的Category的信息: [HttpPost] public string AddProduct(Product productModel) { var sb = new StringBuilder(); sb.Append(" …


ASP.NET MVC3如何用JQuery传递数组(集合)类型参数给JsonResult Action

今天在码新版博客的一个功能,有个细节就是要将一个表格里选中的Id传给后台Action。原先用Form做Post的话,这是非常好实现的,然而现在我要用AJAX完成传递,并且网页上没有Form,所以我也不能用Ajax.BeginForm,肿么办呢?经过一番开荒,我终于把它码出来了。 后台Action是个返回JsonResult的方法,签名如下: public JsonResult ExportSelectedPosts(List<string> selectedIds) 用string集合是因为手写AJAX是不走MVC的model bind的,所以通过网页传递过来的数据只能是string。如果这个方法不加selectedIds这个参数其实也是可以的(最后我们会看到用Request对象一样可以取到值)。但为了符合设计规范,我还是建议大家加上的。 前台的View里这样码(硬编码 …


JQuery搞定SyntaxHighlighter v3.x长代码自动换行

长代码换行是SyntaxHighlighter3.0版本之前的功能,但3.0之后就木了,草草草草艹!本人认为主要猿因是gutter(代码行号指示器)的换行难做。因为3.x版是将代码行号和代码部分分开生成HTML的,猿来的老版本是在一起的。这样做是便于直接复制代码,而不会复制到行号上去。 很多人都在想办法让它实现换行,但都卡在代码行号的问题上。我关注这个问题已经差不多一年了,今天终于有了个比较漂亮的解决办法。 首先,强制给代码部分换行的CSS还是要写的: body .syntaxhighlighter .line { white-space: pre-wrap !important; } 这段CSS换行的前提是,pre标签的外边一定要有一个固定宽度的容器对象。比如一个600px宽度的div就可以。 然后,我们需要一段JQuery,用来计算被换行的代码显示在页面上的高度 …


ASP.NET MVC3调用PartialView的几种方式

我们的网页通常会有好几个部分组成,一些公共的区域我们通常会做成PartialView(部分视图),但这些视图并不是完全固定的,所以还是需要特定的Controller来控制。如果只是静态的html,虽然也可以做成PartialView,但意义不大。下面演示一下MVC3中如何调用PartialView。 首先我们创建一个测试用的Controller: TestController public class TestController : Controller { public ActionResult Message() { var testObj = new List<string>() { "aaa", "bbb", "ccc" }; …


JQuery文本框自动完成,通过AJAX调用ASP.NET WebService

最近在搞博客搜索框的自动完成功能,用的是JQuery UI里的autocomplete插件。插件的数据源是用AJAX调用一个WebService,网站后台有个标签库,WebService返回的是符合条件的标签。最终效果如下: 我们先来看WebService的代码,方法很简单: [WebMethod] public List<EdiBlog.Core.DataModel.TagCloud> GetAllTagsForAutoComplete(string tagName) { return optTag.GetModelList().Where(p => p.Name.ToLower().StartsWith(tagName.ToLower())).ToList(); }  这个方法的作用是根据输入的内容,检索所有以tagName开头的标 …


JQuery AJAX读取ASP.NET WebService泛型方法

这几天在研究JQuery和WebService,被泛型返回类型搞死了。查了很多资料做实验终于搞定了。网上很多垃圾文章的作者都不亲手实验就到处拼凑把东西发上来,太不负责了。下面我发的是100%可用的,经过亲手实验的代码。 首先在WebService上要注意一点,一定记得把[System.Web.Script.Services.ScriptService]这行取消注释,这样脚本才可以调用到WebService。如图: 我用来测试的是我网站的友情链接列表,其WebService方法如下: [WebMethod] public List<EdiBlog.Core.DataModel.FriendLink> GetFriendLinks() { return new EdiBlog.Core.FriendLink().GetModelList(); } 经过测 …


ASP.NET中用Ctrl+S触发按钮事件

这个也是上礼拜印度队友给我留的“作业”,今天搞定了。场景是某个页面,用户输入内容后,希望按Ctrl+S直接提交保存。也就是要用Ctrl+S去触发保存按钮的Click事件。然而在浏览器中,Ctrl+S默认是保存网页(Firefox下就是这样),所以需要写一个可以覆盖浏览器自身快捷键的脚本,去触发按钮事件。 我写了个最简单的Demo,效果如下:点击Button后,会显示一句话以及触发时间。现在需要用Ctrl+S来触发这个事件。注意,先得引入JQuery库。 第一种方法是: $(window).keypress(function (event) { if (!(event.which == 115 && event.ctrlKey) && !(event.which == 19)) { return …


JQuery idTabs插件根据URL参数选择Tab

我们的项目用了SunSean的idTabs,但每个tab里的控件会触发postback,或者转到其他页面再转回来,这样当前选中的tab必丢。印度同事不肯用AJAX,无奈今天加班给印度人写个demo,通过回传URL参数来选择tab。 为了做这件事,除了jquery库和idTabs插件,我们还需要下载一个用来搞URL的插件:jquery.url.js,传送门:https://github.com/allmarkedup/jQuery-URL-Parser Tab菜单的HTML代码这样写,每个tab的div自己搞定,不发出来浪费页面了: <div class="tabmenu"> <ul> <li><a href="#idTab1">Dashboard</a></li> <li> …


JQuery操作表格(隔行着色,高亮显示,筛选数据)

最近项目里对表格的操作比较多。以往我们要做一些效果的时候往往通过程序代码来实现,这个努力不值,因为JQuery是完全可以做到的,并且是客户端运行,不经过服务器处理,给用户的反应快,也减少了服务器压力(现在的PC多暴力啊!)。哥查了些资料,写了4个Demo: 1. 隔行着色 $('#table1 tr:odd').addClass('odd'); $('#table1 tr:even').addClass('even'); 效果: 2. 高亮含有特定数据的行 $("#table2 tr:contains('Fuck')").addClass("selected");   3. 筛选数据 $("#filter").click( function(){ $("#table3 .datarow").hide().filter(":contains('ABCDEFG' …


JQuery获取浏览器窗口内容部分高度

有时候我们需要得到浏览器窗口内容部分的高度,而不是整个窗口的高度。我试了下JQuery下的window对象,似乎读的正是内容部分,有点意外,不过恰好满足了我们的要求。 下面是测试代码,记得先引用JQuery库 <script type="text/javascript"> $(document).ready( function() { var h = $(window).height(); alert(h); } ) </script> Firefox下: IE下: 可以发现它获取的却是是窗口的内容部分高度,而不是浏览器窗口的高度。Oh Yeah!


JQuery让页脚部固定在网页底部

一般,在网页上,如果内容较少,页脚就会跑到屏幕中间去,可能会让用户感到蛋疼。 上次看了一篇文章,用CSS的办法来固定页脚到浏览器窗口底部。他优点很明显,不需要JS,并且在调整浏览器窗口大小的时候仍然可以自适应,但写法略复杂,如果项目比较赶进度,就不太能用上了。 今天我就遇到了赶进度的蛋疼事情,所以用JQuery简单搞了一个,但本人前端开发水平很烂,有不完善的地方,高手莫喷。代码如下: // 重定位页脚函数 function repositionFooter(){ var h = $(window).height(); $(".innerBlock").css('min-height',h - 230) }; // 用户调整窗口大小时重定位页脚 var resizeTimer = null; $(window).bind('resize', function(){ …