第一:在View中手写html控件。优点是非常直观,缺点是增加代码量。
第二:在View中利用System.Web.Mvc.Html下的HtmlHelper的完成大部分控件的客户端输出。
HtmlHelper的功能:先看下它的源码大致结构。
namespace System.Web.Mvc.Html
{
public static class FormExtensions//表单相关扩展方法,例如创建表单标签等。
public static class InputExtensions//这里包含了所有input,例如:text,button,readiobutton等等。
public static class LinkExtensions//链接相关方法
public class MvcForm : IDisposable//与客户端控件无关
public static class RenderPartialExtensions//这是输出PartialView
public static class SelectExtensions//输出下拉框
public static class TextAreaExtensions//输出多行文本框
public static class ValidationExtensions//输出相关表单元素验证。
}
{
public static class FormExtensions//表单相关扩展方法,例如创建表单标签等。
public static class InputExtensions//这里包含了所有input,例如:text,button,readiobutton等等。
public static class LinkExtensions//链接相关方法
public class MvcForm : IDisposable//与客户端控件无关
public static class RenderPartialExtensions//这是输出PartialView
public static class SelectExtensions//输出下拉框
public static class TextAreaExtensions//输出多行文本框
public static class ValidationExtensions//输出相关表单元素验证。
}
示例:创建留言的View,有意思的是这里在创建表单时,应用了using,和C#是的写法一样,但它的目的是不显示调用Html.EndForm()方法,会在作用域最后自动添加了结束标签。
<% using (Html.BeginForm())
{%>
<fieldset>
<p>
<label for="Title">
标题:</label>
<%= Html.TextBox("sTitle", Model.sTitle)%>
</p>
<p>
<label for="EventDate">
内容:</label>
<%=Html.TextBox("sContent", Model.sContent)%>
</p>
<p>
<input type="submit" onclick ="return check();" value="Save" />
</p>
</fieldset>
<% }
%>
{%>
<fieldset>
<p>
<label for="Title">
标题:</label>
<%= Html.TextBox("sTitle", Model.sTitle)%>
</p>
<p>
<label for="EventDate">
内容:</label>
<%=Html.TextBox("sContent", Model.sContent)%>
</p>
<p>
<input type="submit" on
</p>
</fieldset>
<% }
%>
System.Web.Mvc.Html下的HtmlHelper只能完成大部分html控件的输出,但像img标签默认是没有提供的,这里需要我们自行来扩展下Helper,毕竟上面的众多方法都是扩展出来的。
扩展Helper,我们可以利用TagBuilder,它能输出所有标签及属性。TagBuilder提供下如下重要方法:
// Methods
public TagBuilder(string tagName);
public void AddCssClass(string value);//增加样式
public void GenerateId(string name);//设置控件ID
private string GetAttributesString();
public void MergeAttribute(string key, string value);//设置属性值
public void MergeAttribute(string key, string value, bool replaceExisting);
public void MergeAttributes<TKey, TValue>(IDictionary<TKey, TValue> attributes);
public void MergeAttributes<TKey, TValue>(IDictionary<TKey, TValue> attributes, bool replaceExisting);
public void SetInnerText(string innerText);//设置显示文本
public override string ToString();
public string ToString(TagRenderMode renderMode);//输出控件html
public TagBuilder(string tagName);
public void AddCssClass(string value);//增加样式
public void GenerateId(string name);//设置控件ID
private string GetAttributesString();
public void MergeAttribute(string key, string value);//设置属性值
public void MergeAttribute(string key, string value, bool replaceExisting);
public void MergeAttributes<TKey, TValue>(IDictionary<TKey, TValue> attributes);
public void MergeAttributes<TKey, TValue>(IDictionary<TKey, TValue> attributes, bool replaceExisting);
public void SetInnerText(string innerText);//设置显示文本
public override string ToString();
public string ToString(TagRenderMode renderMode);//输出控件html
1:创建ImageHelper,利用TagBuilder部分方法最终输出img标签。
public static class ImageHelper
{
public static string Image(this HtmlHelper helper, string id, string url, string alternateText)
{
return Image(helper, id, url, alternateText, null);
}
public static string Image(this HtmlHelper helper, string id, string url, string alternateText, object
htmlAttributes)
{
// 创建IMG标签
var builder = new TagBuilder("img");
// 增加ID属性
builder.GenerateId(id);
// 增加属性
builder.MergeAttribute("src", url);
builder.MergeAttribute("alt", alternateText);
builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));
// 输出完整的img标签
return builder.ToString(TagRenderMode.SelfClosing);
}
}
{
public static string Image(this HtmlHelper helper, string id, string url, string alternateText)
{
return Image(helper, id, url, alternateText, null);
}
public static string Image(this HtmlHelper helper, string id, string url, string alternateText, object
htmlAttributes)
{
// 创建IMG标签
var builder = new TagBuilder("img");
// 增加ID属性
builder.GenerateId(id);
// 增加属性
builder.MergeAttribute("src", url);
builder.MergeAttribute("alt", alternateText);
builder.MergeAttributes(new RouteValueDictionary(htmlAttributes));
// 输出完整的img标签
return builder.ToString(TagRenderMode.SelfClosing);
}
}
2:页面调用。
<%= Html.Image("img1", "http://a.lakequincy.com/img/633820582974214892.jpg", "这是一张图片", new
{border="4px"})%>
{border="4px"})%>
总结:有了System.Web.Mvc.Html和TagBuilder,页面控件输出已全部解决。