[转载]ASP.NET MVC HtmlHelper用法大全

mikel阅读(939)

[转载]ASP.NET MVC HtmlHelper用法大全 – 城堡没公主 – 博客园.

HTML扩展类的所有方法都有2个参数:
以textbox为例子
public static string TextBox( this HtmlHelper htmlHelper, string name, Object value, IDictionary<string, Object> htmlAttributes )
public static string TextBox( this HtmlHelper htmlHelper, string name, Object value, Object htmlAttributes )
这2个参数代表这个html标签的属性集合。使用方法如下。
1.ActionLink
<%=Html.ActionLink(“这是一个连接”, “Index”, “Home”)%>
带有QueryString的写法
<%=Html.ActionLink(“这是一个连接”, “Index”, “Home”, new { page=1 },null)%>
<%=Html.ActionLink(“这是一个连接”, “Index”, new { page=1 })%>
有其它Html属性的写法
<%=Html.ActionLink(“这是一个连接”, “Index”, “Home”, new { id=”link1″ })%>
<%=Html.ActionLink(“这是一个连接”, “Index”,null, new { id=”link1″ })%>
QueryString与Html属性同时存在
<%=Html.ActionLink(“这是一个连接”, “Index”, “Home”, new { page = 1 }, new { id = “link1” })%>
<%=Html.ActionLink(“这是一个连接”, “Index” , new { page = 1 }, new { id = “link1″ })%>

生成结果为:
<a href=”/”>这是一个连接</a>
带有QueryString的写法
<a href=”/?page=1″>这是一个连接</a>
<a href=”/?page=1″>这是一个连接</a>
有其它Html属性的写法
<a href=”/?Length=4″ id=”link1″>这是一个连接</a>
<a href=”/” id=”link1″>这是一个连接</a>
QueryString与Html属性同时存在
<a href=”/?page=1″ id=”link1″>这是一个连接</a>
<a href=”/?page=1″ id=”link1″>这是一个连接</a>

2.RouteLink
跟ActionLink在功能上一样。
<%=Html.RouteLink(“关于”, “about”, new { })%>
带QueryString
<%=Html.RouteLink(“关于”, “about”, new { page = 1 })%>
<%=Html.RouteLink(“关于”, “about”, new { page = 1 }, new { id = “link1″ })%>

生成结果:
<a href=”/about”>关于</a>
<a href=”/about?page=1″>关于</a>
<a href=”/about?page=1″ id=”link1″>关于</a>
3.Form 2种方法
<%using(Html.BeginForm(“index”,”home”,FormMethod.Post)){%>
<%} %>

<%Html.BeginForm(“index”, “home”, FormMethod.Post);//注意这里没有=输出%>
<%Html.EndForm(); %>

生成结果:
<form action=”/home/index” method=”post”></form>
4.TextBox , Hidden ,
<%=Html.TextBox(“input1”) %>
<%=Html.TextBox(“input2”,Model.CategoryName,new{ @style = “width:300px;” }) %>
<%=Html.TextBox(“input3”, ViewData[“Name”],new{ @style = “width:300px;” }) %>
<%=Html.TextBoxFor(a => a.CategoryName, new { @style = “width:300px;” })%>

生成结果:

<input id=”input1″ name=”input1″ type=”text” value=”” />
<input id=”input2″ name=”input2″ style=”width:300px;” type=”text” value=”Beverages” />
<input id=”input3″ name=”input3″ style=”width:300px;” type=”text” value=”” />
<input id=”CategoryName” name=”CategoryName” style=”width:300px;” type=”text” value=”Beverages” />

5.TextArea
<%=Html.TextArea(“input5″, Model.CategoryName, 3, 9,null)%>
<%=Html.TextAreaFor(a => a.CategoryName, 3, 3, null)%>

生成结果:
<textarea cols=”9″ id=”input5″ name=”input5″ rows=”3″>Beverages</textarea>
<textarea cols=”3″ id=”CategoryName” name=”CategoryName” rows=”3″>Beverages</textarea>

6.CheckBox
<%=Html.CheckBox(“chk1”,true) %>
<%=Html.CheckBox(“chk1″, new { @class=”checkBox”}) %>
<%=Html.CheckBoxFor(a =>a.IsVaild, new { @class = “checkBox” })%>

生成结果:

<input checked=”checked” id=”chk1″ name=”chk1″ type=”checkbox” value=”true” /><input name=”chk1″ type=”hidden” value=”false” />

<input class=”checkBox” id=”chk1″ name=”chk1″ type=”checkbox” value=”true” /><input name=”chk1″ type=”hidden” value=”false” />

<input checked=”checked” class=”checkBox” id=”IsVaild” name=”IsVaild” type=”checkbox” value=”true” /><input name=”IsVaild” type=”hidden” value=”false” />

7.ListBox
<%=Html.ListBox(“lstBox1”,(SelectList)ViewData[“Categories”])%>
<%=Html.ListBoxFor(a => a.CategoryName, (SelectList)ViewData[“Categories”])%>

生成结果:
<select id=”lstBox1″ multiple=”multiple” name=”lstBox1″>
<option value=”1″>Beverages</option>
<option value=”2″>Condiments</option>
<option selected=”selected” value=”3″>Confections</option>
<option value=”4″>Dairy Products</option>
<option value=”5″>Grains/Cereals</option>
<option value=”6″>Meat/Poultry</option>
<option value=”7″>Produce</option>
<option value=”8″>Seafood</option>
</select>
<select id=”CategoryName” multiple=”multiple” name=”CategoryName”>
<option value=”1″>Beverages</option>
<option value=”2″>Condiments</option>
<option value=”3″>Confections</option>
<option value=”4″>Dairy Products</option>
<option value=”5″>Grains/Cereals</option>
<option value=”6″>Meat/Poultry</option>
<option value=”7″>Produce</option>
<option value=”8″>Seafood</option>
</select>

8.DropDownList
<%= Html.DropDownList(“ddl1”, (SelectList)ViewData[“Categories”],  “–Select One–“)%>
<%=Html.DropDownListFor(a => a.CategoryName, (SelectList)ViewData[“Categories”], “–Select One–“, new { @class = “dropdownlist” })%>

生成结果:
<select id=”ddl1″ name=”ddl1″>
<option value=””>–Select One–</option>
<option value=”1″>Beverages</option>
<option value=”2″>Condiments</option>
<option selected=”selected” value=”3″>Confections</option>
<option value=”4″>Dairy Products</option>
<option value=”5″>Grains/Cereals</option>
<option value=”6″>Meat/Poultry</option>
<option value=”7″>Produce</option>
<option value=”8″>Seafood</option>
</select>
<select class=”dropdownlist” id=”CategoryName” name=”CategoryName”>
<option value=””>–Select One–</option>
<option value=”1″>Beverages</option>
<option value=”2″>Condiments</option>
<option value=”3″>Confections</option>
<option value=”4″>Dairy Products</option>
<option value=”5″>Grains/Cereals</option>
<option value=”6″>Meat/Poultry</option>
<option value=”7″>Produce</option>
<option value=”8″>Seafood</option>
</select>

9.Partial 视图模板
webform里叫自定义控件。功能都是为了复用。但使用上自定义控件真的很难用好。
<% Html.RenderPartial(“DinnerForm”); %>  看清楚了没有等号的。

[转载]返璞归真 asp.net mvc (8) - asp.net mvc 3.0 新特性之 Model

mikel阅读(1121)

[转载]返璞归真 asp.net mvc (8) – asp.net mvc 3.0 新特性之 Model – webabcd – 博客园.

[索引页]
[源码下载]

返璞归真 ASP.NET mvc (8) – ASP.NET mvc 3.0 新特性之 Model

作者:webabcd

介绍
ASP.NET mvc 之 ASP.NET MVC 3.0 新特性之 Model:

  • 通过 Data Annotations 与 JQuery 的结合实现服务端和客户端的双重验证
  • 双重验证中,使客户端实现远程的异步验证
  • 自定义 Data Annotations 与 JQuery,以实现自定义的双重验证

示例
1、Model 中通过 Data Annotations 与 JQuery 的结合实现服务端和客户端的双重验证
Web.config


<!--         要实现服务端和客户端的双重验证,需要做如下配置,因为双重验证中的客户端验证需要依赖此配置     -->

User.cs

/*
* 在 asp.net mvc 3.0 中支持通过 Data Annotations 来实现服务端和客户端的双重验证,需要 jQuery 的支持
* 所有 Data Annotations 相关的 Attribute 直接用类视图看 System.ComponentModel.DataAnnotations 就行了,详细说明以前写过好多遍了,这里就不重复了
* 另外 System.Web.Mvc 下有一些新增的 Data Annotations
*/

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace MVC30.Models
{
public class User
{
public int ID { get; set; }

[DisplayName("名字")]
[Required(ErrorMessage = "名字不能为空")]
public string Name { get; set; }

[DisplayName("密码")]
[Required(ErrorMessage = "密码不能为空")]
public string Password { get; set; }

[DisplayName("确认密码")]
[Required(ErrorMessage = "确认密码不能为空")]
[Compare("Password", ErrorMessage="两次密码输入不一致")]
public string ConfirmPassword { get; set; }

public DateTime DateOfBirth { get; set; }

// 请求时,允许此字段包含 HTML 标记
[AllowHtml]
public string Comment { get; set; }
}
}

Validation_DataAnnotations.cshtml

@model MVC30.Models.User

@{
ViewBag.Title = "Validation_DataAnnotations";
}
<h2>ClientValidation</h2>
<!--     通过 jQuery 实现客户端验证的逻辑,需要引用此 js -->
<script src="@Url.Content(" type="text/javascript"></script> <!--     服务端验证与客户端验证的一一对应需要引用此 js --> <script src="@Url.Content(" type="text/javascript"></script>

@*
在 MVC3 中实现客户端验证,不需要添加以下代码
@{ Html.EnableClientValidation(); }
*@

@using (Html.BeginForm())
{
<fieldset> <legend>User</legend>
<div class="editor-label">@Html.LabelFor(model =&gt; model.Name)
(测试方法:空着文本框,然后提交)</div>
<div class="editor-field">@Html.EditorFor(model =&gt; model.Name)
@Html.ValidationMessageFor(model =&gt; model.Name)</div>
<input type="submit" value="Create" /></fieldset>
}

2、Model 中通过 Data Annotations 与 jQuery 的结合实现服务端和客户端的双重验证,其中客户端可以实现远程的异步验证
User.cs

/*
* System.Web.Mvc.Remote(string action, string controller) - 让客户端可以通过 ajax 的方式远程验证
*     action - 实现验证逻辑的 action,即处理客户端的异步请求的 action
*     controller - 实现验证逻辑的 controller,即处理客户端的异步请求的 controller
*/

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace MVC30.Models
{
public class User
{
public int ID { get; set; }

[DisplayName("名字")]
[Required(ErrorMessage = "名字不能为空")]
[Remote("CheckUserNameExists", "ValidationDemo", ErrorMessage = "名字已存在")]
public string Name { get; set; }

[DisplayName("密码")]
[Required(ErrorMessage = "密码不能为空")]
public string Password { get; set; }

[DisplayName("确认密码")]
[Required(ErrorMessage = "确认密码不能为空")]
[Compare("Password", ErrorMessage="两次密码输入不一致")]
public string ConfirmPassword { get; set; }

public DateTime DateOfBirth { get; set; }

// 请求时,允许此字段包含 HTML 标记
[AllowHtml]
public string Comment { get; set; }
}
}

3、Model 中使用更多的 Data Annotations 以及实现自定义的 Data Annotations 和自定义 jQuery 的相关逻辑
User.cs

/*
* 如何使用更多的 Data Annotation
*     1、在“Tools”中选择“Extension Manager”(安装 NuGet 后会有此选项)
*     2、搜索“DataAnnotationsExtensions”,然后安装“DataAnnotationsExtensions.MVC3”项目
*     3、之后就可以使用此项目所支持的多个新的 Data Annotation
* 如何自定义 Data Annotation
*     详见:IntegerAttribute.cs
*/

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;

namespace MVC30.Models
{
public class User
{
public int ID { get; set; }

[DisplayName("名字")]
[Required(ErrorMessage = "名字不能为空")]
[Remote("CheckUserNameExists", "ValidationDemo", ErrorMessage = "名字已存在")]
public string Name { get; set; }

[DisplayName("密码")]
[Required(ErrorMessage = "密码不能为空")]
[Integer(ErrorMessage = "密码必须是整型")]
public string Password { get; set; }

[DisplayName("确认密码")]
[Required(ErrorMessage = "确认密码不能为空")]
[Compare("Password", ErrorMessage="两次密码输入不一致")]
public string ConfirmPassword { get; set; }

public DateTime DateOfBirth { get; set; }

// 请求时,允许此字段包含 HTML 标记
[AllowHtml]
public string Comment { get; set; }
}
}

IntegerAttribute.cs

/*
* 自定义 Data Annotation,以实现与 jQuery 结合的客户端和服务端双重验证
*/

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.ComponentModel.DataAnnotations;
using System.Text.RegularExpressions;
using System.Web.Mvc;

namespace MVC30.Models
{
// 继承 ValidationAttribute 抽象类,重写 IsValid() 方法,以实现服务端验证
// 实现 IClientValidatable 接口的 GetClientValidationRules() 方法,以实现客户端验证
public class IntegerAttribute : ValidationAttribute, IClientValidatable
{
// 服务端验证逻辑,判断输入是否为整型
public override bool IsValid(object value)
{
var number = Convert.ToString(value);
return Regex.IsMatch(number, @"^[0-9]+$");
}

// 客户端验证逻辑,需要结合客户端验证代码,详见 Validation_Custom.cshtml 文件
public IEnumerable GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
var rule = new ModelClientValidationRule
{
ErrorMessage = this.ErrorMessage,

// ValidationType - 指定一个 key(字符串),该 key 用于关联服务端验证逻辑与客户端验证逻辑。注:这个 key 必须都是由小写字母组成
ValidationType = "isinteger"
};

// 向客户端验证代码传递参数
rule.ValidationParameters.Add("param1", "value1");
rule.ValidationParameters.Add("param2", "value2");

yield return rule;
}
}
}

ValidationDemoController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using MVC30.Models;

namespace MVC30.Controllers
{
public class ValidationDemoController : Controller
{
// 用于演示如何使用更多的 Data Annotations 来实现服务端和客户端的双重验证,以及如何自定义 Data Annotations 来实现服务端和客户端的双重验证
public ActionResult Validation_Custom()
{
var user = new User { ID = 1, Name = "webabcd", DateOfBirth = new DateTime(1980, 2, 14), Comment = "<strong>mvp</strong>" };

return View(new User());
}

[HttpPost]
public ActionResult Validation_Custom(User user)
{
return View(user);
}
}
}

Validation_Custom.cshtml

@model MVC30.Models.User

@{
ViewBag.Title = "ClientValidation";
}
<h2>ClientValidation</h2>
<script src="@Url.Content(" type="text/javascript"></script> <script src="@Url.Content(" type="text/javascript"></script>

<script type="text/javascript">// <!&#91;CDATA&#91;
    // 客户端验证逻辑,判断输入是否为整型
    jQuery.validator.addMethod(
        'checkInteger',
        function (value, element) {
            var reg = new RegExp("^&#91;0-9&#93;+$");
            return (reg.test(value));
        }
    );

    // 将客户端验证逻辑通过 ValidationType 与服务端的相关验证逻辑结合起来
    jQuery.validator.unobtrusive.adapters.add(
        'isinteger', // ValidationType,必须全为小写
        &#91;'param1', 'param2'&#93;, // 接收 ModelClientValidationRule 中的参数信息
        function (options) {
            options.rules&#91;'checkInteger'&#93; = true; // 启用名为 checkInteger 的客户端验证逻辑
            options.messages&#91;'checkInteger'&#93; = options.message; // 发生验证错误后的显示信息
            var param1 = options.params.param1; // ModelClientValidationRule 中的参数信息
            var param2 = options.params.param2; // ModelClientValidationRule 中的参数信息
            alert(param1 + " " + param2);
        }
    );
// &#93;&#93;></script>

@using (Html.BeginForm())
{
<fieldset> <legend>User</legend>
<div class="editor-label">@Html.LabelFor(model =&gt; model.Name)</div>
<div class="editor-field">@Html.EditorFor(model =&gt; model.Name)
@Html.ValidationMessageFor(model =&gt; model.Name)</div>
<div class="editor-label">@Html.LabelFor(model =&gt; model.Password)
(测试方法:在文本框中输入非整型的字符串)</div>
<div class="editor-field">@Html.EditorFor(model =&gt; model.Password)
@Html.ValidationMessageFor(model =&gt; model.Password)</div>
<input type="submit" value="Create" /></fieldset>
}

源码下载:
[源码下载]

转载asp.net MVC中使用自定义HtmlForm控件动态生成表单

mikel阅读(787)

转载asp.net MVC中使用自定义HtmlForm控件动态生成表单 – zhoujie – 博客园.

经测试System.Web.UI.HtmlControls下的HtmlForm类,也就是我们在传统的ASP.NET中使用的Form表单对象,不适合动态生成Html代码。

于是自定义了一个简单的HtmlForm容器控件,只需要几行代码。看来ASP.NET在封装Html元素方面还是很有优势的,微软为我们定义了

大量的基础结构,很容易扩展使用。

public class myHtmlForm:HtmlContainerControl
{
public myHtmlForm()
: base("form")
{

this.Attributes.Add("method", "post");
}

public string Action
{
set
{
Attributes.Add("action", value);
}
}
}

使用很简单,直接new,然后向Controls集合中添加控件即可。

myHtmlForm form = new myHtmlForm();
form.ID = "myform";
form.Action = "test.aspx";
HtmlInputHidden hidf= new HtmlInputHidden();
hidf.ID = hidf.Name = "hidden";
form.Controls.Add(hidf);

最后在View中,输出HTML代码到响应流。

form.RendControl(Writer);

结论:

动态生成HTML表单就是这么简单明了。我以前可是自己拼接过HTML,然后Write啊。善于利用框架提供的类可以有效的提高开放效率,

并且使代码的可读性良好。尤其是在做表格控件时,善用System.Web.UI.WebControls.Table控件,会很有帮助。很想知道PHP或其他

语言是否也有这些好用的基础设施呢?

[转载]非常棒的 ASP.NET Web Forms 和 ASP.NET MVC 免费培训视频

mikel阅读(877)

[转载]非常棒的 ASP.NET Web Forms 和 ASP.NET MVC 免费培训视频! – 冠军 – 博客园.

原文名称:Great Free Video Training on ASP.NET Web Forms and ASP.NET MVC

原文地址:http://weblogs.asp.net/scottgu/archive/2011/05/15/great-free-video-training-on-asp-net-web-forms-and-asp-net-mvc.aspx

最近我们在 http://asp.net 站点上发布了许多很棒的 ASP.NET 培训视频。

这些很棒的视频由  Pluralsight (一 个很棒的 .NET 培训公司) 创建,现在免费提供以供学习或者更新你的 ASP.NET Web Forms4 和 ASP.NET MVC 知识。每个课程由一个培训讲师讲授,提供了从始至终的学习课程(从基本的概念到使用新的 EF 代码优先、安全、发布和测试)。

下面是这周末我们发布的这两个免费培训课程的一些详细介绍,包括如何观看的链接。

ASP.NET MVC3 培训

这周末我们发布了由 K Scott Allen 讲授的新的 ASP.NET MVC3 培训课程,这个课程由 10 个部分组成,现在你可以从 http://asp.net 页面免费观看整个系列的课程(在页面左边的 Essential Videos 部分)。

下面是 ASP.NET MVC3 这个课程系列的十个部分:

  1. 介绍 (35 分钟)
  2. 控制器 (35 分钟)
  3. Razor 视图引擎 (45 分钟)
  4. 使用数据: Entity Framework 代码优先 (39 分钟)
  5. 使用数据: 验证和映射 (33 分钟)
  6. Javascript, jQuery and Ajax (47 分钟)
  7. 安全 (43 分钟)
  8. 缓存, 本地化, 资源和诊断 (34 分钟)
  9. 单元测试 (37 分钟)
  10. 发布和配置 (37 分钟)

ASP.NET Web Forms 4 培训

Dan Wahlin 开发了一套很棒的 ASP.NET Web Forms 4 课程。

你可以从 http://asp.net/web-forms 页面免费观看这个系列的课程(在左边的 Essential Videos 部分)。

下面是 ASP.NET Web Forms 系列的九个部分:

  1. ASP.NET 简介 (64 分钟)
  2. ASP.NET Web Forms 特性 (111 分钟)
  3. 使用数据 (75 分钟)
  4. Entity Framework (47 分钟)
  5. 母版页 (24 分钟)
  6. JavaScript and Ajax (62 分钟)
  7. 安全(很快提供)
  8. 使用 ASP.NET 动态数据 (很快提供)
  9. Web 发布 (很快提供)

即将提供更多内容

关注 http://asp.net/web-formshttp://asp.net/mvc,在接下来的几个月中,培训中心将会发布更多的文字和视频培训内容。每个培训中心现在都提供了良好的内容结构,可以快速查找和学习 ASP.NET 是如何工作的,今后,我们将会不断的扩展和完善其中的内容。

希望这会有所帮助

Scott

[转载]分享20个很不错的UI图标集资源

mikel阅读(878)

[转载]分享20个很不错的UI图标集资源 – 梦想天空(山边小溪) – 博客园.

这次,我为大家收集了20个用户界面图标集资源,这些图标集特别适合用于Web和智能手机的用户界面设计。如果你有更多更好的素材,欢迎与我们分享。

1. Iconza

PixeloPhilia2

2. PixeloPhilia2

Function Icon Set

3. Function Icon Set

Facebook UI Icons

4. Facebook UI icons

Weby Icons

5. Weby Icons

DowgHouseDesign

6. DowgHouseDesign

App Bits

7. App Bits

Nixus Icon Pack

8. Nixus Icon Pack

Peculiar

9. Peculiar

Ice Joy Icons

10. Ice Joy Icons

Tango Icons

11. Tango Icons

Glyphish

12. Glyphish Icons

Mini Icons

13. Mini Icons

Icojoy Icons

14. Icojoy Icons

Iconeden

15. Iconeden

developpers Icons

16. Developpers Icons

PC.DE Icons

17. PC.DE Icons

Iconik

18. Iconik

WooFunction Icons

19. WooFunction Icons

Basic Set Icons

20. Basic Set Icons

[转载]jQuery 版“元素拖拽改变大小”原型

mikel阅读(1061)

[转载][分享] jQuery 版“元素拖拽改变大小”原型 – 小吴同学 – 博客园.

“元素拖拽改变大小”其实和“元素拖拽”一个原理,只是所动态改变的对象不同而已,主要在于 top、left、width、height 的运用,相对实现起来也非常容易。以下附出源码原型,弄明白了原理再扩展其他实际应用,思路就变得简单、清晰得多了。

在引入 JQuery.js 后:

<script type="text/javascript">// <!&#91;CDATA&#91;
    $(function(){
        //绑定需要拖拽改变大小的元素对象
        bindResize(document.getElementById('test'))
    });

    function bindResize(el){
        //初始化参数
        var els = el.style,
            //鼠标的 X 和 Y 轴坐标
            x = y = 0;
        //邪恶的食指
        $(el).mousedown(function(e){
            //按下元素后,计算当前鼠标与对象计算后的坐标
            x = e.clientX - el.offsetWidth,
            y = e.clientY - el.offsetHeight;
            //在支持 setCapture 做些东东
            el.setCapture ? (
                //捕捉焦点
                el.setCapture(),
                //设置事件
                el.onmousemove = function(ev){
                    mouseMove(ev || event)
                },
                el.onmouseup = mouseUp
            ) : (
                //绑定事件
                $(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp)
            )
            //防止默认事件发生
            e.preventDefault()
        });
        //移动事件
        function mouseMove(e){
            //宇宙超级无敌运算中...
            els.width = e.clientX - x + 'px',
            els.height = e.clientY - y + 'px'
        }
        //停止事件
        function mouseUp(){
            //在支持 releaseCapture 做些东东
            el.releaseCapture ? (
                //释放焦点
                el.releaseCapture(),
                //移除事件
                el.onmousemove = el.onmouseup = null
            ) : (
                //卸载事件
                $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
            )
        }
    }
// &#93;&#93;></script>

width 和 height 的中不允许出现负数的值,否则会报错,那么根据这个需求简单扩展了一个“限制最小高宽”的小实例:

<script type="text/javascript">// <!&#91;CDATA&#91;
    $(function(){
        //绑定需要拖拽改变大小的元素对象
        bindResize(document.getElementById('test'),200,100);
    });
    //绑定需要拖拽改变大小的元素对象
    //el 元素对象
    //minW 最小宽度
    //minH 最小高度
    function bindResize(el,minW,minH){
        //初始化参数
        var els = el.style,
            //鼠标的 X 和 Y 轴坐标
            x = y = Xm = Ym = 0;
        //邪恶的食指
        $(el).mousedown(function(e){
            //按下元素后,计算当前鼠标与对象计算后的坐标
            x = e.clientX - el.offsetWidth,
            y = e.clientY - el.offsetHeight;
            //在支持 setCapture 做些东东
            el.setCapture ? (
                //捕捉焦点
                el.setCapture(),
                //设置事件
                el.onmousemove = function(ev){
                    mouseMove(ev || event)
                },
                el.onmouseup = mouseUp
            ) : (
                //绑定事件
                $(document).bind("mousemove",mouseMove).bind("mouseup",mouseUp)
            )
            //防止默认事件发生
            e.preventDefault()
        });
        //移动事件
        function mouseMove(e){
            //宇宙超级无敌运算中...
            Xm = e.clientX - x,
            Ym = e.clientY - y;
            //限制高宽
            Xm <= minW && (Xm = minW),
            Ym <= minH && (Ym = minH);
            //设置大小
            els.width = Xm + 'px',
            els.height = Ym + 'px'
        }
        //停止事件
        function mouseUp(){
            //在支持 releaseCapture 做些东东
            el.releaseCapture ? (
                //释放焦点
                el.releaseCapture(),
                //移除事件
                el.onmousemove = el.onmouseup = null
            ) : (
                //卸载事件
                $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
            )
        }
    }
// &#93;&#93;></script>

下载:实例原型

[转载]如何应用firebug突破新浪ishare下载限制

mikel阅读(983)

[转载]本人原创,如何应用firebug突破新浪ishare下载限制 – hh54188 – 博客园.

电子书是个好东西,但自从百度,豆瓣,大幅度收费后,免费的资源越来越难找。而且一定要在他们的网站上浏览让人颇为不爽。

新浪的ishare算是后起之秀,是除csdn下载频道之后为数不多的一片净土。这个星期因为机缘偶然发现了新浪ishare的这个bug,能够突破一些下载的限制,在这里分享给大家。

我们看到新浪ishare有三种下载方式:

1.免费,很好,那就直接下载吧

2.需要积分,也没关系,注册账号可以送积分,实在不行上传些垃圾文件也行。

3.被上传者设为“仅供本人和好友下载”,如图所示:

这个是最致命的,我着手解决的就是这个问题。

正文开始

首先我们找到一个可以下载和一个不可以下载的:

要接下来必须下载火狐浏览器,opera和chrome和safari浏览器应该也没有问题,请注意只有这四种浏览器可以办到,让ie见鬼去吧

在安装好了之后再安装Firefox的一个插件,在插件页面找到firebug插件,并安装

安装好之后,重启火狐就可以使用firebug了

选择可以下载那个文件,找到下载按钮,右键单击”查看元素“:

这样就启动了firebug。或者按”F12“键,启动firebug(在在chrome中右键单击”审查元素“),再按图示中的按钮,选择元素:

这样我们就找到了源代码,但注意它的父元素中有个class为pl20,如荧光注释所示:

以同样的方式打开不能下载的那个提示框(同样在按钮的位置):

注意到也同样有pl20这个元素。ok,可能你已经猜到了,用可以下载pl20替换不可以下载的pl20

在不能下载的那个页面进行以下操作,删除pl20源代码:

编辑它的父元素td

荧光位置就是我们要插入的能下载的pl20

我们再次回到能下载的页面,复制能下载的那个pl20按钮:

在上上图的荧光位置黏贴该代码:

再单击左上角的”编辑“按钮,以结束编辑,上图中黑线之上就是后来加入的代码

这样在不能下载的页面也出现了一个下载按钮

是不是很神奇,但这并不代表能下载,点击后你会发现下载的仍然是复制源页面的那个文件,于是我猜想肯定有参数决定下载的是哪一个文件,对,接下来修改参数

找到pl20子元素中的form标签:

在action中fileid中的参数就是决定你下载的是哪一个文件,比如这里复制来的是”1234567“

而实际上不能下载页面的参数是7654321,从地址栏就可以看出来:

于是我们只要把复制来的pl20中的1234567改为本页面得7654321:

OK,大功告成,当你再点击时,发现已经可以下载了

本贴仅供学习研究之用,不得用于非法途径,由此产生的相关责任本人概不负责。

[转载]android开发列表界面

mikel阅读(1027)

[转载]android开发列表界面 – skyme – 博客园.

Android开发列表界面,上边是一个显示题目,下边显示的是图标,中间显示的是列表。

看一下效果吧

当鼠标点击上之后出现背景图,下面看一下如何做出这样的效果吧。

1.创建Android工程

修改main.xml中的内容如下:

<!--?xml version="1.0" encoding="utf-8"?-->

<!-- 中间的列表 -->

在这里边用了两个布局

RelativeLayout:children是相互之间相关位置或者和他们的parent位置相关,常用在form中

LinearLayout:children排列成一行多列或者一列多行的形式,这种layout最常见

GridView 显示的是网格的布局,一般可以加入各种adapter,这是适配器的典型实现。android中面向对象做的真的不错。。。

2.添加GridViewAdapter.java类

输入内容如下:

public class GridViewAdapter extends BaseAdapter{
//存放各个元素
private List listItem = new ArrayList();

// 将一个xml文件转化成视图
LayoutInflater inFlater;

public GridViewAdapter(Context context){
this.inFlater = LayoutInflater.from(context);
init();
}

private void init(){
//先在这里初始化,以后放到数据库里
ViewItem vi1 = new ViewItem();
vi1.setName("记录账目");
vi1.setImgName(R.drawable.img1);
ViewItem vi2 = new ViewItem();
vi2.setName("记录账目");
vi2.setImgName(R.drawable.img2);
ViewItem vi3 = new ViewItem();
vi3.setName("记录账目");
vi3.setImgName(R.drawable.img3);
ViewItem vi4 = new ViewItem();
vi4.setName("记录账目");
vi4.setImgName(R.drawable.img4);
ViewItem vi5 = new ViewItem();
vi5.setName("记录账目");
vi5.setImgName(R.drawable.img5);
ViewItem vi6 = new ViewItem();
vi6.setName("记录账目");
vi6.setImgName(R.drawable.img6);
listItem.add(vi1);
listItem.add(vi2);
listItem.add(vi3);
listItem.add(vi4);
listItem.add(vi5);
listItem.add(vi6);
}

public int getCount() {
// TODO Auto-generated method stub
return listItem.size();
}

public Object getItem(int arg0) {
// TODO Auto-generated method stub
return arg0;
}

public long getItemId(int arg0) {
// TODO Auto-generated method stub
return arg0;
}

public View getView(int arg0, View arg1, ViewGroup arg2) {
// TODO Auto-generated method stub
View view = inFlater.inflate(R.layout.gv_item, null);
TextView tv = (TextView) view.findViewById(R.id.gv_item_appname);
ImageView iv = (ImageView) view.findViewById(R.id.gv_item_icon);

tv.setText(listItem.get(arg0).getName());
iv.setImageResource(listItem.get(arg0).getImgName());

return view;
}

}

配置适配器,并且将xml转化成视图处理。

继承BaseAdapter,并且实现里面的方法。

3.修改主布局文件类


public class AccountMain extends Activity {
/** Called when the activity is first created. */
private GridView gv;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// 去除title
requestWindowFeature(Window.FEATURE_NO_TITLE);
// 全屏
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);

setContentView(R.layout.main);

gv = (GridView) this.findViewById(R.id.gv_apps);

gv.setAdapter(new GridViewAdapter(AccountMain.this));
}
}

先是实例化GridView,然后将对应的适配器信息传入,这样就得到了上面的效果!

其中ImageButton的属性android:src如果设置的图片较大则全部显示,解决的办法是要么用android:background,要么干脆换成ImageView。

这只是其中的一个界面的演示,这块的init部分可以再做进一步的处理,可以做动态的配置。

可以将配置信息配置到配置文件中或者将对应信息配置到数据库中,即SQLLite中。

[转载]分享13款非常有用的 jQuery 插件

mikel阅读(996)

[转载]分享13款非常有用的 jQuery 插件 – 梦想天空(山边小溪) – 博客园.

JQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果。这篇文章与大家分享13款非常有用的 JQuery 插件。

ImageLens: a jQuery plug-in for Lens Effect Image Zooming
Image Len 是一款用于为图片添加镜头放大效果的 jQuery 插件。

Javascript-306 in Useful JavaScript and jQuery Tools, Libraries, Plugins

diagonalFade jQuery plugin
Diagonal fade 是一款易于定制淡入、淡出、方向及其它组合选项的 jQuery 插件,适合用于显示分组元素。

Javascript-308 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Lettering.js – A jQuery Plugin for Radical Web Typography
Lettering 是一款用于实现激进的网页排版的 jQuery 插件,可以帮助你在网站中加入丰富多彩的文字效果。

Javascript-160 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Wijmo jQuery UI Widgets
Wijmo 是一个功能很强大的图表插件。

Javascript-267 in Useful JavaScript and jQuery Tools, Libraries, Plugins

sausage.js
Sausage 是一款实现内容分页的 jQuery 插件。

Javascript-283 in Useful JavaScript and jQuery Tools, Libraries, Plugins

jQuery Waypoints
Waypoints 可以帮助你很容易的实现滚动到某个元素的时候执行某项功能,根据用户拖动滚动条的位置来实现特定的布局模式。

Javascript-234 in Useful JavaScript and jQuery Tools, Libraries, Plugins

jslide
jslide 是一款为列表元素添加滑动效果的 jQuery 插件。

Javascript-201 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Isotope: A jQuery Plugin for Magical Layouts
Isotope 是一款精致的 jQuery插件,用于创建单纯用 CSS 无法实现的智能的、动态的布局,非常强大。

Javascript-131 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Better Check Boxes with jQuery and CSS
一款简单的实现替代浏览器默认选择框的jQuery插件,可以帮助你丰富表单的表现形式,在JavaScript失效的时候回恢复为默认控件。

Javascript-286 in Useful JavaScript and jQuery Tools, Libraries, Plugins

Thumbnails Navigation Gallery with jQuery
一个很漂亮的全屏滚动相册,效果很好的滑动导航。

Javascript-270 in Useful JavaScript and jQuery Tools, Libraries, Plugins

DataTables (table plug-in for jQuery)
一款很灵活的基于 jQuery 编写的数据表格插件。

Javascript-262 in Useful JavaScript and jQuery Tools, Libraries, Plugins

jQuery Tags Input
一款基于 jQuery 编写的很棒的标签输入插件。

Javascript-274 in Useful JavaScript and jQuery Tools, Libraries, Plugins

jquery.timepickr.js
一款实现方便的日期选择的 jQuery 插件。

Javascript-224 in Useful JavaScript and jQuery Tools, Libraries, Plugins

[转载]Asp.net MVC3.0 入门指南 6 审视编辑方法和视图

mikel阅读(901)

[转载]Asp.net MVC3.0 入门指南 6 审视编辑方法和视图 – cn_大斌哥 – 博客园.

在这一节中,您将审视movie控制器生成的响应方法和视图。然后您将添加

一个自定义搜索页面。

运行程序并通过在URL追加/Moives浏览movie控制器。把鼠标悬停在Edit

链接上,看看它执行的URL.

Edit的链接由视图Views\Movies\Index.cshtml Html.ActionLink方法生成。

@Html.ActionLink("Edit", "Edit", new { id=item.ID })

Html对象是一个助手,它是WebViewPage基类暴露的属性。助手的ActionLink方法可以很容易的生成

HTML超级链接,它指向控制器的响应方法。ActionLink的第一个参数超级链接的文本呈现(比如:

<a>Edit Me</a>),第二个参数是要调用的响应方法的名称,最后一个参数生成路由数据的匿名对象

anonymous object,这里指ID=4)。

您可以使用查询字符串(query string)传递参数给响应方法。比如URL

http://localhost:xxxxx/Movies/Edit?ID=4传递ID=4给Movies控制器的Edit方法。

打开Movies控制器。有两个Edit方法,如下所示:

//
// GET: /Movies/Edit/5

public ActionResult Edit(int id)
{
Movie movie = db.Movies.Find(id);
return View(movie);
}

//
// POST: /Movies/Edit/5

[HttpPost]
public ActionResult Edit(Movie movie)
{
if (ModelState.IsValid)
{
db.Entry(movie).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(movie);
}

注意第二个Edit方法前面是HttpPost属性。它表明这个重载的Edit方法只能被POST

请求调用。您也可以给第一个Edit方法采用HttpGet属性,但是这不是必须的,应为

方法默认为HttpGet(响应方法隐含的了HttpGet属性将被认为是HttpGet方法)。

HttpGet方法将电影的ID作为参数,并使用实体框架的Find方法查找电影,然后返回被找

到的电影给视图模板。当架构体系创建编辑模板是,它检查Movie类并为每个属性生成

代码去呈现<label><input>元素。下面的代码展示了自动生成的Edit视图模板:


注意第二个Edit方法前面是HttpPost属性。它表明这个重载的Edit方法只能被POST

请求调用。您也可以给第一个Edit方法采用HttpGet属性,但是这不是必须的,应为

方法默认为HttpGet(响应方法隐含的了HttpGet属性将被认为是HttpGet方法)。

HttpGet方法将电影的ID作为参数,并使用实体框架的Find方法查找电影,然后返回被找

到的电影给视图模板。当架构体系创建编辑模板是,它检查Movie类并为每个属性生成

代码去呈现<label><input />元素。下面的代码展示了自动生成的Edit视图模板:</label>

@model MvcMovie.Models.Movie

@{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
<script src="@Url.Content(" type="text/javascript"></script> <script src="@Url.Content(" type="text/javascript"></script>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset> <legend>Movie</legend>@Html.HiddenFor(model =&gt; model.ID)
<div class="editor-label">@Html.LabelFor(model =&gt; model.Title)</div>
<div class="editor-field">@Html.EditorFor(model =&gt; model.Title)
@Html.ValidationMessageFor(model =&gt; model.Title)</div>
<div class="editor-label">@Html.LabelFor(model =&gt; model.ReleaseDate)</div>
<div class="editor-field">@Html.EditorFor(model =&gt; model.ReleaseDate)
@Html.ValidationMessageFor(model =&gt; model.ReleaseDate)</div>
<div class="editor-label">@Html.LabelFor(model =&gt; model.Genre)</div>
<div class="editor-field">@Html.EditorFor(model =&gt; model.Genre)
@Html.ValidationMessageFor(model =&gt; model.Genre)</div>
<div class="editor-label">@Html.LabelFor(model =&gt; model.Price)</div>
<div class="editor-field">@Html.EditorFor(model =&gt; model.Price)
@Html.ValidationMessageFor(model =&gt; model.Price)</div>
<input type="submit" value="Save" /></fieldset>
}
<div>@Html.ActionLink("Back to List", "Index")</div>

form>中的<input>元素别用来回传页面到电影的编辑地址/Movies/Edit

当点击Edit按钮时,页面的数据被回传到服务器。

处理POST请求

由架构体系生成的属性为HttpGet的Edit方法没有检查传给它的ID的有效性。

如果用户删除URL的ID片段,错误信息如下所示:

用户还可以传递一个不存在的ID,比如:http://localhost:xxxxx/Movies/Edit/1234.您可以给

HttpGet Edit方法做两点修改来限制URL。首先,把ID参数改为默认值为0 (id不是必须传递)。

您也可以在回传电影对象给视图模板之前,检查Find方法是否真正的找到了电影信息。

public ActionResult Edit(int id = 0)
{
Movie movie = db.Movies.Find(id);
if (movie == null)
{
return HttpNotFound();
}
return View(movie);
}

如果没有找到,HttpNotFound方法被调用。

所有的HttpGet方法都遵循类似的模式。它们获取一个电影对象(在Index中返回对象列表),

然后传递模型给视图。Create方法传递一个空电影对象给Create视图。所有的方法(创建、

编辑、删除)都有一个HttpPost的重载方法

在HTTP GET方法中修改数据存在安全风险,在博客

ASP.NET MVC Tip #46 – Don’t use Delete Links because they create Security Holes

中有描述。在HTTP GET方法中修改数据违反了HTTP的最佳实践REST架构模式(其中规定,

GET请求不应改变应用程序状态)。换句话,执行GET操作应该是一个无副作用的安全操作。

下一节:ASP.NET MVC3.0 入门指南 7 展示查找页面

微笑

原文网址:http://www.asp.net/mvc/tutorials/getting-started-with-mvc3-part6-cs