GVKun编程网logo

一步一步封装自己的HtmlHelper组件BootstrapHelper(二)(封装html代码)

11

在本文中,我们将为您详细介绍一步一步封装自己的HtmlHelper组件BootstrapHelper的相关知识,并且为您解答关于二的疑问,此外,我们还会提供一些关于.net–在RazorEngine中

在本文中,我们将为您详细介绍一步一步封装自己的HtmlHelper组件BootstrapHelper的相关知识,并且为您解答关于的疑问,此外,我们还会提供一些关于.net – 在RazorEngine中使用语句(没有来自MVC的HtmlHelper)、/system/helpers/typography_helper.php、6. ASP.NET MVC 5.0 中的HTML Helper【HTML 帮助类】、ADO.NET sqlHelper类(DBHelper类)的有用信息。

本文目录一览:

一步一步封装自己的HtmlHelper组件BootstrapHelper(二)(封装html代码)

一步一步封装自己的HtmlHelper组件BootstrapHelper(二)(封装html代码)

前言:介绍了下封装BootstrapHelper的一些基础知识,这篇继续来完善下。参考HtmlHelper的方式,这篇博主先来封装下一些常用的表单组件。关于BootstrapHelper封装的意义何在,上篇评论里面已经讨论得太多,这里也不想过多纠结。总之一句话:凡事有得必有失,就看你怎么去取舍。有兴趣的可以看看,没兴趣的权当博主讲了个“笑话”吧。

BootstrapHelper系列文章目录

一、新增泛型的BootstrapHelper

上篇博主只定义了一个BootstrapHelper的普通类型去继承HtmlHelper,由于考虑到需要使用lamada的方式去定义组件,博主又增加了一个BootstrapHelper的泛型类型。于是BootstrapHelper变成了这样。

rush:csharp;"> using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Routing;

namespace BootstrapExtensions
{
public class BootstrapHelper : System.Web.Mvc.HtmlHelper
{
///


/// 使用指定的视图上下文和视图数据容器来初始化 BootstrapHelper 类的新实例。
///

/// <param name="viewContext">视图上下文
/// <param name="viewDataContainer">视图数据容器
public BootstrapHelper(ViewContext viewContext,IViewDataContainer viewDataContainer)
: base(viewContext,viewDataContainer)
{ }

///


/// 使用指定的视图上下文、视图数据容器和路由集合来初始化 BootstrapHelper 类的新实例。
///

/// <param name="viewContext">视图上下文
/// <param name="viewDataContainer">视图数据容器
/// <param name="routeCollection">路由集合
public BootstrapHelper(ViewContext viewContext,IViewDataContainer viewDataContainer,RouteCollection routeCollection)
: base(viewContext,viewDataContainer,routeCollection)
{ }
}

///


/// 表示支持在强类型视图中呈现 Bootstrap 控件。
///

/// <typeparam name="TModel">
public class BootstrapHelper : BootstrapHelper
{
///
/// 使用指定的视图上下文和视图数据容器来初始化 <![CDATA[Net.Web.Mvc.BootstrapHelper]]> 类的新实例。
///

/// <param name="viewContext">视图上下文。
/// <param name="viewDataContainer">视图数据容器。
public BootstrapHelper(ViewContext viewContext,viewDataContainer)
{ }

///


/// 使用指定的视图上下文、视图数据容器和路由集合来初始化 <![CDATA[Net.Web.Mvc.BootstrapHelper]]> 类的新实例。
///

/// <param name="viewContext">视图上下文。
/// <param name="viewDataContainer">视图数据容器。
/// <param name="routeCollection">路由集合。
public BootstrapHelper(ViewContext viewContext,routeCollection)
{ }
}
}

我们的Bootstrap对象也定义成泛型对象

rush:csharp;"> public abstract class BootstrapWebViewPage : System.Web.Mvc.WebViewPage { //在cshtml页面里面使用的变量 public BootstrapHelper Bootstrap { get; set; }

///


/// 初始化Bootstrap对象
///

public override void InitHelpers()
{
base.InitHelpers();
Bootstrap = new BootstrapHelper(ViewContext,this);
}

public override void Execute()
{
//throw new NotImplementedException();
}
}

这样做的意义就是为了在cshtml页面里面可以使用@Bootstrap.TextBoxFor(x => x.Name)这种写法。这个后面介绍,这里先埋个伏笔。

二、TextBoxExtensions

TextBoxExtensions.cs的实现代码如下:

<div>
<prehttps://www.jb51.cc/tag/rush/" target="_blank">rush:csharp;">
using System;
using System.Collections.Generic;
using System.Linq;
using System.Linq.Expressions;
using System.Reflection;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Html;

namespace BootstrapExtensions
{
///


/// bootstrap TextBox文本框的所有扩展
///

public static class TextBoxExtensions
{
///
/// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本框标签
///

/// <param name="html">扩展方法实例
/// <param name="name">表单元素的name属性值
/// 返回input type='text'标签
public static MvcHtmlString TextBox(this BootstrapHelper html,string name)
{
return InputExtensions.Helper(html,InputType.Text,null,name,false,null);
}

///


/// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本框标签
///

/// <param name="html">扩展方法实例
/// <param name="id">id
/// <param name="name">表单元素的name属性值
/// 返回input type='text'标签
public static MvcHtmlString TextBox(this BootstrapHelper html,string id,id,null);
}

///


/// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本框标签
///

/// <param name="html">扩展方法实例
/// <param name="name">单元素的name属性值
/// <param name="value">表单元素的value值
/// 返回input type='text'标签
public static MvcHtmlString TextBox(this BootstrapHelper html,string name,object value)
{
return InputExtensions.Helper(html,value,null);
}

///


/// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本框标签
///

/// <param name="html">扩展方法实例
/// <param name="name">单元素的name属性值
/// <param name="value">表单元素的value值
/// <param name="placeholder">bootstrap自带的文本框的提示输入值
/// 返回input type='text'标签
public static MvcHtmlString TextBox(this BootstrapHelper html,object value,string placeholder)
{
IDictionary<string,object> attributes = new Dictionary<string,object>();
if (!string.IsNullOrEmpty(placeholder))
{
attributes.Add("placeholder",placeholder);
}
return InputExtensions.Helper(html,attributes);
}

///


/// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本框标签
///

/// <param name="html">扩展方法实例
/// <param name="name">单元素的name属性值
/// <param name="value">表单元素的value值
/// <param name="htmlAttributes">额外属性
/// 返回input type='text'标签
public static MvcHtmlString TextBox(this BootstrapHelper html,object htmlAttributes)
{
IDictionary<string,object> attributes = BootstrapHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
return InputExtensions.Helper(html,attributes);
}

///


/// 通过使用指定的 HTML 帮助器和窗体字段的名称,返回文本框标签
///

/// <param name="html">扩展方法实例
/// <param name="name">表单元素的name属性值
/// <param name="value">表单元素的value值
/// <param name="placeholder">bootstrap自带的文本框的提示输入值
/// <param name="htmlAttributes">额外属性
/// 返回input type='text'标签
public static MvcHtmlString TextBox(this BootstrapHelper html,string placeholder,object> attributes = BootstrapHelper.AnonymousObjectToHtmlAttributes(htmlAttributes);
if (!string.IsNullOrEmpty(placeholder))
{
attributes.Add("placeholder",attributes);
}

public static MvcHtmlString TextBoxFor<TModel,TProperty>(this BootstrapHelper html,Expression<Func<TModel,TProperty>> expression)
{
var model = (TModel)html.ViewData.Model;
string propertyName;
object value;
InputExtensions.GetValueByExpression<TModel,TProperty>(expression,model,out propertyName,out value);
return InputExtensions.Helper(html,propertyName,null);
}

}
}

.net – 在RazorEngine中使用语句(没有来自MVC的HtmlHelper)

.net – 在RazorEngine中使用语句(没有来自MVC的HtmlHelper)

我在没有MVC-Framework的情况下使用RazorEngine.
这意味着我没有用于创建模板的 HtmlHelper.

没关系,我不需要任何方法.
但我需要创建自己的方法,如BeginForm.

现在这些是用HtmlHelper.ViewContext.Writer.Write完成的,我没有.
是否有“开箱即用”的方式,或者我必须在这里做一些魔术吗?

解决方法

RazorEngine设计用于派生您自己的类型以用于引擎本身.

首先创建自己的助手:

public class RazorHtmlHelper
{
    public IEncodedString Partial(string viewName)
    {
        ITemplate template = RazorEngine.Razor.Resolve(viewName);

        ExecuteContext ec = new ExecuteContext();

        RawString result = new RawString(template.Run(ec));

        return result;
    }
}

public class RazorUrlHelper
{
    public string Encode(string url)
    {
        return System.Uri.EscapeUriString(url);
    }
}

接下来创建自己的模板:

public class RazorTemplateBase<T> : TemplateBase<T>
{
    private RazorUrlHelper _urlHelper = new RazorUrlHelper();

    private RazorHtmlHelper _htmlHelper = new RazorHtmlHelper();

    public RazorUrlHelper Url
    {
        get
        {
            return this._urlHelper;
        }
    }

    public RazorHtmlHelper Html
    {
        get
        {
            return this._htmlHelper;
        }
    }
}

在解析之前设置TemplateServiceConfiguration:

Razor.SetTemplateService(new TemplateService(
  new TemplateServiceConfiguration()
  {
    BaseTemplateType = typeof(RazorTemplateBase<>)
  };
));

result = RazorEngine.Razor.Parse(templateText,model);

现在,RazorEngine在视图中提供了@ Html.Partial()和@ Url.Encode().

/system/helpers/typography_helper.php

/system/helpers/typography_helper.php

 

<?php if ( ! defined(''BASEPATH'')) exit(''No direct script access allowed'');/** * CodeIgniter * * An open source application development framework for PHP 5.1.6 or newer * * @package CodeIgniter * @author ExpressionEngine Dev Team * @copyright Copyright (c) 2008 - 2011, EllisLab, Inc. * @license http://codeigniter.com/user_guide/license.html * @link http://codeigniter.com * @since Version 1.0 * @filesource */// ------------------------------------------------------------------------/** * CodeIgniter Typography Helpers * 对library(''typography'')所做的一个调用类,也就是助手类 * @package CodeIgniter * @subpackage Helpers * @category Helpers * @author ExpressionEngine Dev Team * @link http://codeigniter.com/user_guide/helpers/typography_helper.html */// ------------------------------------------------------------------------/** * Convert newlines to HTML line breaks except within PRE tags * 除了PRE标签内换行符转换HTML换行符 * @access public * @param string * @return string */if ( ! function_exists(''nl2br_except_pre'')){ //nl2br_except_pre($str) function nl2br_except_pre($str) { $CI =& get_instance(); $CI->load->library(''typography''); return $CI->typography->nl2br_except_pre($str); }}// ------------------------------------------------------------------------/** * Auto Typography Wrapper Function * 自动排版包装函数 * * @access public * @param string * @param bool whether to allow javascript event handlers * 是否允许JavaScript事件处理程序 * @param bool whether to reduce multiple instances of double newlines to two * 是否减少两个双换行的多个实例 * @return string */if ( ! function_exists(''auto_typography'')){ function auto_typography($str, $strip_js_event_handlers = TRUE, $reduce_linebreaks = FALSE) { $CI =& get_instance(); $CI->load->library(''typography''); return $CI->typography->auto_typography($str, $strip_js_event_handlers, $reduce_linebreaks); }}// --------------------------------------------------------------------/** * HTML Entities Decode * HTML实体解码 * This function is a replacement for html_entity_decode() * 这个函数是一个更换html_entity_decode() * @access public * @param string * @return string */if ( ! function_exists(''entity_decode'')){ function entity_decode($str, $charset=''UTF-8'') { global $SEC; return $SEC->entity_decode($str, $charset); }}/* End of file typography_helper.php *//* Location: ./system/helpers/typography_helper.php */
登录后复制

  

6. ASP.NET MVC 5.0 中的HTML Helper【HTML 帮助类】

6. ASP.NET MVC 5.0 中的HTML Helper【HTML 帮助类】

https://www.cnblogs.com/caofangsheng/p/10462494.html

         这篇文章,我将带领大家学习HTML Helper。【PS:上一篇-->5.ASP.NET MVC 中的Area【区域】是什么】

HTML Helpers是用来创建HTML标签进而创建HTML控件的。HTML Helper仅仅是一个返回HTML字符串的方法。ASP.NET MVC 中有三种HTML Helpers:

1.Inline HTML Helper(内联HTML Helper):主要是通过使用Razor语法中的@helper标记来创建。内联HTML Helper仅仅只能在同一个视图中,被重复使用。如果想要在所有的视图中都能使用,有办法可以解决。待会会介绍。

2.Built-In-HTML Helpers(内置的HTML Helpers):这类的HTML Helper是HtmlHelper类的扩展方法,进一步分为3类:

    2.1 标准HTML Helper【Standard HTML Helpers】:用来创建最常用得HTML标签。

    2.2 强类型的HTML Helpers【Strongly Typed HTML Helpers】:这种是HTML通过Model类的属性生成,使用Lambda表达式来生成HTML。

  2.3 模板化的HTML Helpers 【Templated HTML Helpers】:这种helper生成的HTML取决于Model类的属性。

3.自定义的HTML helpers【Custom HTML Helpers】:你可以通过使用HtmlHelper扩展方法,或者在工具类中使用静态方法来创建自定义的helper 方法。

 

1.先来看看内联的HTML Helper

创建项目HTMLHelpersWithMVC,同时新建一个Home控制器,和Index视图:

 视图页面:

运行一下:【效果图】

 

 现在假如,我还有一个Test页面,也要显示这个,怎么办呢?我们直接在Test页面写一下看看:

 

 

 看,报错了噢,内联方法只能在声明的视图页面使用噢,怎么办呢?我们可以这样做:

右键项目创建一个App_Code文件夹:

 

 在App_Code文件夹下,创建一个分布视图:

 

然后,把刚才在Home控制器Index页面的内联Html Helper方法声明全部弄过来:

然后运行项目:看:

咋回事还是报错了,现在Index页面也报错了,哪里出问题了???

我们这样改:把App_Code文件夹下的视图页面,属性改成嵌入的资源和如果较新则复制

然后视图页面修改如下:

然后接着运行看看两个页面的效果:

看这样就实现了,可以在多个页面实现【内联HTML Helpers】Inline HTML Helpers了。

2.1 现在来看看,内置的HTML Helpers中的标准 HTML Helpers了

运行效果如下:

 2.2 现在开始学习 【Built-In HTML Helpers】内置的HTML之强类型HTML Helpers了

在Models文件夹下创建一个UserInfo类

为了演示这个强类型的,我新建一个控制器Account,并创建Index视图:

运行程序:

2.3 现在看看模板化的HTML Helpers怎么做:

我们在Account控制器中,添加一个Temp方法:并创建Temp视图:

 

 

 

 运行到Temp页面:

 

 发现@Html.EditorForModel()自动为我们创建了控件。

3.最后我们来看看,怎么创建自定义HTML Helpers

创建一个Custom控制器:

创建一个CustomClass:

复制代码

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

namespace HTMLHelpersWithMVC.Common
{
    public static class CustomClass
    {
        /// <summary>
        /// 扩展方法实现方式--创建提交按钮
        /// </summary>
        /// <param name="helper">扩展类对象</param>
        /// <param name="name">按钮名称</param>
        /// <param name="value">按钮值</param>
        /// <returns></returns>
        public static MvcHtmlString CreateSubmit(this HtmlHelper helper, string name, string value)
        {
            var btn = "<input type='submit' name='"+name+"' value='"+value+"'/>";
            return new MvcHtmlString(btn);
        }
        /// <summary>
        /// 静态类实现方式--创建提交按钮
        /// </summary>
        /// <param name="name">按钮名称</param>
        /// <param name="value">按钮值</param>
        /// <returns></returns>
        public static MvcHtmlString CreateSubmit(string name, string value)
        {
            var btn = "<input type='submit' name='" + name + "' value='" + value + "'/>";
            return new MvcHtmlString(btn);
        }

    }
}

复制代码

 

注意这个类CustomClass类必须要在程序根目录下创建,在视图中才能点出来【有智能提示】

正确的:

复制代码

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

namespace HTMLHelpersWithMVC
{
    public static class CustomClass
    {
        /// <summary>
        /// 扩展方法实现方式--创建提交按钮
        /// </summary>
        /// <param name="helper">扩展类对象</param>
        /// <param name="name">按钮名称</param>
        /// <param name="value">按钮值</param>
        /// <returns></returns>
        public static MvcHtmlString CreateSubmit(this HtmlHelper helper, string name, string value)
        {
            string btn = "<input type='submit' name='" + name + "' value='" + value + "'/>";
            return new MvcHtmlString(btn);
        }
        /// <summary>
        /// 静态类实现方式--创建提交按钮
        /// </summary>
        /// <param name="name">按钮名称</param>
        /// <param name="value">按钮值</param>
        /// <returns></returns>
        public static MvcHtmlString CreateSubmit(string name, string value)
        {
            string btn = "<input type='submit' name='" + name + "' value='" + value + "'/>";
            return new MvcHtmlString(btn);
        }

    }
}

复制代码

在Custom控制器的Index视图中:

 

 运行程序:

 

 好了,这篇文章到此为止就介绍完了,ASP.NET MVC HTML Helpers了,学会了么?

ADO.NET sqlHelper类(DBHelper类)

ADO.NET sqlHelper类(DBHelper类)

1.配置文件

1   <connectionStrings>
2     <add name="constr" connectionString="Data Source=.;Initial Catalog=NovelDitle;Integrated Security=True"/>
3   </connectionStrings>

2.静态类 命名空间的引入等 

这里我只写了主要要用到的命名空间

1 using System.Configuration;
2 using System.Data;
3 using System.Data.SqlClient;

 

3.私有连接字符串 全局变量

//私有连接字符串 
       private static string conStr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;

4.写静态方法

这里的三个参数分别指的是:sql语句 存储过程 可变参数(防sql注入)

①//离线查询 返回datatable

 1     public static DataTable ExecuteDataTable(string sql,CommandType cmdType, params SqlParameter[] par)
 2         {
 3             //datatable对象
 4             DataTable dt = new DataTable();
 5 
 6             //用于处理非托管对象。某些类型的非托管对象有数量限制或很消耗系统资源。为了及时释放资源,使用using语句可以确保这些资源适当地处置(dispose)
 7             using (SqlDataAdapter adapter = new SqlDataAdapter(sql, conStr))
 8             {
 9                 //存储过程赋值
10                 adapter.SelectCommand.CommandType = cmdType;
11                 //判断参数不为空 长度>0
12                 if (par != null)
13                 {
14                     //向数组参数中添加值
15                     adapter.SelectCommand.Parameters.AddRange(par);
16                 }
17                 //填充数据
18                 adapter.Fill(dt);
19                 return dt;//返回值
20             }
21         }

②//在线查询,返回SqlDataReader

 1  public static SqlDataReader ExecuteDataReader(string sql,CommandType cmdType, params SqlParameter[] par)
 2         {
 3             //SqlConnection要始终保持打开状态 不能使用using释放资源
 4             SqlConnection conn = new SqlConnection(conStr);
 5             
 6             using (SqlCommand com = new SqlCommand(sql, conn))
 7             {
 8                 //存储过程赋值
 9                 com.CommandType = cmdType;
10 
11                 //判断参数不为空
12                  if (par != null)
13                  {
14                     //传入参数
15                      com.Parameters.AddRange(par);
16                  }
17                 try
18                 {
19                     //如果连接状态关闭
20                     if (conn.State==ConnectionState.Closed)
21                     {
22                         //打开连接
23                         conn.Open();
24                     }
25                     //返回结果  参数:当关闭reader时也关闭SqlConnection
26                     return com.ExecuteReader(CommandBehavior.CloseConnection);
27                 }
28                 catch (Exception)
29                 {
30                     //关闭连接
31                     conn.Close();
32                     //释放资源
33                     conn.Dispose();
34                     throw;//抛出异常
35                 }     
36             }
37         }

③增删改操作

 1  public static int ExecuteNonQuery(string sql,CommandType cmdType,params SqlParameter[] par)
 2         {
 3             using (SqlConnection conn = new SqlConnection(conStr))
 4             {
 5                 using (SqlCommand com=new SqlCommand(sql,conn))
 6                 {
 7                     com.CommandType = cmdType;
 8 
 9                     if (par!=null)
10                     {
11                         com.Parameters.AddRange(par);
12                     }
13                     conn.Open();
14 
15                     return  com.ExecuteNonQuery();
16                 }
17             }
18         }

④返回单个值

 1  public static object ExecuteScalar(string sql,CommandType cmdType,params SqlParameter[] par)
 2         {
 3             using (SqlConnection conn = new SqlConnection(conStr))
 4             {
 5                 using (SqlCommand com = new SqlCommand(sql, conn))
 6                 {
 7                     com.CommandType = cmdType;
 8 
 9                     if (par != null)
10                     {
11                         com.Parameters.AddRange(par);
12                     }
13                     conn.Open();
14 
15                     return com.ExecuteScalar();
16                 }
17             }
18         }

 

今天关于一步一步封装自己的HtmlHelper组件BootstrapHelper的分享就到这里,希望大家有所收获,若想了解更多关于.net – 在RazorEngine中使用语句(没有来自MVC的HtmlHelper)、/system/helpers/typography_helper.php、6. ASP.NET MVC 5.0 中的HTML Helper【HTML 帮助类】、ADO.NET sqlHelper类(DBHelper类)等相关知识,可以在本站进行查询。

本文标签:

上一篇一步一步封装自己的HtmlHelper组件BootstrapHelper(三)(封装html代码)

下一篇BootStrap glyphicon图标无法显示的解决方法(bootstrap glyphicon 图标)