webform导入bootstrap_bootstrap webform - CSDN
精华内容
参与话题
  • Bootstrap 是由 Twitter 所开发的一个免费的网页框架, 它提供了许多从基本到进阶的 CSS 和 JavaScript 功能, 让网页开发者可以很快速地把网页架起来, 同时还兼顾了还算不错的美感。通常, 网页设计师不会、也不懂得...

    Bootstrap 是由 Twitter 所开发的一个免费的网页框架, 它提供了许多从基本到进阶的 CSS 和 JavaScript 功能, 让网页开发者可以很快速地把网页架起来, 同时还兼顾了还算不错的美感。通常, 网页设计师不会、也不懂得美工设计, 所以我们如果只是很单地把网页建立起来, 很不幸的, 这个网页通常不会跟「美观」这两个字有交集。但是有了 Bootstrap, 你的网页很容易就能让人为之惊艳 (尤其是跟之前的做法对比的话)。

    当然, 我不是说 Bootstrap 从此会让美工人员丢掉工作。我相信美工人员也会感谢 Bootstrap 的存在, 这样至少可以让网页在进行layout 时省去一些功夫, 能够早一点下班。其实 Bootstrap 的应用方式并不难, 但是对于完全没有概念的人, 仍然存在着一点门坎。在这里, 让我花点篇幅解释一下。

    Bootstrap 基础

    说穿了, 对初学者而言, 你只需要搞懂两点, 就可以掌扫 Bootstrap 的基础原理。第一点, 就是它的所谓 Grid 系统; 第二点, 就是藉由加入组件的 CSS 类别以更改它的长相。以下, 我会做个简单地说明。

    所谓的 Grid 系统, 你不要顾名思义, 以为它跟 ASP.NET 的 GridView 控件有任何关系。事实上, 这两者一点关系也没有。

    但是如果你把它想象为就是像 Excel 的那种网格线布置, 或者 HTML 的 <table> 组件, 你应该就能立刻进入情况。

    当你打开 Excel 时, 一张空的工作表应该长得像如下的样子:

    []

    这是一张十二栏的表。

    如果你要使用这个表来画你的网页的 Layout 的话, 或许你会这样画:

    []

    这么一来, Header 就是一个横跨十二栏宽的区块, 然后左边的 Navigation 占两个栏宽、Content 占去右边十个栏宽, 而最下方的 Footer 又是横跨十二个栏宽。

    Bootstrap 框架的 Grid 系统就是基于类似的原理而设计的。所以, 你只需要在程序中这样写就行了:

    <!DOCTYPE html>
    <html lang="zh-TW">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Basic Layout</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="Content/bootstrap.css" rel="stylesheet" />
        <link href="Content/bootstrap-responsive.css" rel="stylesheet" />
        <style type="text/css"> div { border: 1px solid; } </style>
    </head>
    <body>
        <div class="container">
            <div class="row-fluid">
                <div class="span12">
                    Header</div></div>
            <div class="row-fluid">
                <div class="span2">
                    Navigator</div>
                <div class="span10">
                    Content</div></div>
            <div class="row-fluid">
                <div class="span12">
                    Footer</div></div></div>
        <script src="Scripts/jquery-1.9.1.js"></script>
        <script src="Scripts/bootstrap.js"></script>
    </body>
    </html>

    程序 1. 套用 Bootstrap 的 HTML 网页

    实际执行结果如下图所示:

    []

    你可以发现, 你可以藉由控制 span* 而决定每个方块有多宽, 其方式则是在 div 元素中加入相对的 CSS 类别。

    在上面程序中, 最重要的部份有如下几点:

    请使用 HTML5 语法标示 (即第一行的 <!DOCTYPE html>)。 加上 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 这一行。 把 bootstrap.css 和 bootstrap-responsive.css 两个档案加上去。在这里, 它的路径是 NuGet 套件指定的; 我待会会再提到。 请注意各个 div 元素的写法。其原则很像 table 元素, 在最外面包一个 div, 其 CSS 类别为 container (模拟为 table), 每一列都是 row (模拟为 tr), 中间则是 span* (模拟为 td – colspan), 每一列不要超过 12 个 span 的宽度就行。 在程序中加上 jquery 和 bootstrap.js 这两个 JavaScript 档案。

    上述这五个注意事项就是一个 bootstrap 网页的基本写法。其中除了 div 群组的写法之外, 其它部份几乎都不需要变动。所以, 你也许可以看出来, 这个框架非常适合以 ASP.NET 的 Master Page 来实作。不过, 为了让这个范例程序容易被了解, 所以我把每个 Div 元素都加上边框。实际上不需要这样做。

    在 ASP.NET 项目中取得 Bootstrap

    你可以从 Bootstrap 官网中下载 Bootstrap, 也可以从 VS2012 中直接下载并安装 (VS2013 建立的 Web Form 项目已经预设会加载 Bootstrap, 无需另外安装)。假设我现在从 VS2012 中新增了一个 ASP.NET 的 Web Form 空白项目, 我可以使用 NuGet 直接搜寻 bootstrap 并且进行安装:

    []

    安装完毕之后, NuGet 会把相关档案拷贝到项目的子目录里面:

    []

    上图中以黄色底色标示的部份, 就是 Bootstrap 会用到的所有档案 (VS2013 预设加载 Bootstrap, 其路径又略有不同, 请读者留意)。你可以发现, NuGet 可能会一并下载 jQuery 1.9.1 的版本, 你可以自行选择是否另外下载 1.10.2 或者 2.0.2 以上的版本。

    在 Bootstrap 官网中, 你可以客制化 Bootstrap 的档案内容以节省空间。如果你下载了这个客制化的版本, 那么你可以把原来的版本覆盖上去, 或者另外找地方放置, 或者改名; 你应该自己想清楚应该如何进行版本的管理。

    值得注意的是, 在 bootstrap.css 中, 如果你搜寻一下 "../img/glyphicons-halflings.png" 和 "../img/glyphicons-halflings-white.png" 这两个档案的路径是错误的; 你最好自己把它们的路径改成 "/Content/images/"。其实在 bootstrap.min.css 中这两个路径也不太正确, 但是当我打算把它改掉时, VS2012 不幸当掉了! 第二次才成功。如果你不修正这两个路径的话, 那么 Bootstrap 提供的 Icons 就无法显示。

    套上 Master Page

    仔细看看程序 1. 的写法, 我们将发现 Bootstrap 的 Grid Layout 很容易套用到 Master Page。

    以下, 我建立一个 Master Page, 内容就是从程序 1 修改而来的:

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Default.master.cs" Inherits="IssueTracking.Content.themes.bootstrap.Default" %>
    <%@ Register Src="~/Content/themes/bootstrap/ucHeader.ascx" TagPrefix="uc1" TagName="ucHeader" %>
    <%@ Register Src="~/Content/themes/bootstrap/ucNavigator.ascx" TagPrefix="uc1" TagName="ucNavigator" %>
    <%@ Register Src="~/Content/themes/bootstrap/ucFooter.ascx" TagPrefix="uc1" TagName="ucFooter" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW">
    <head runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link href="/Content/bootstrap.css" rel="stylesheet" />
        <link href="/Content/bootstrap-responsive.css" rel="stylesheet" />
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <div class="container">
                    <div class="row-fluid text-center">
                        <div class="span12 well">
                            <uc1:ucHeader runat="server" id="ucHeader" />
                        </div>
                    </div>
                    <div class="row-fluid success">
                        <div class="span2 well text-center">
                            <uc1:ucNavigator runat="server" id="ucNavigator" />
                        </div>
                        <div class="span10 well">
                            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span12 well text-center">
                            <uc1:ucFooter runat="server" id="ucFooter" />
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <script src="/Scripts/jquery-1.9.1.js"></script>
        <script src="/Scripts/bootstrap.js"></script>
    </body>
    </html>

    程序 2. 套用 Bootstrap 的 Master Page

    在这个程序中, 其架构几乎是原封不动地从程序 1 搬过来。但是我把 Header、Navigator 和 Footer 分别使用三个 User Control 予以取代, 如此我们只需个别修改这三个 User Control, 在所有网页里就会同时生效。只有 Head 区段以及 Content 部份才套用 ContentPlaceHolder, 以方便个别网页可以加入比较特殊的组件, 例如样式表单或者 JavaScript 等等。

    接着, 我要设计一个套用这个 Master Page 的网页:

    <%@ Page Title="Test Master Page" Language="C#" MasterPageFile="~/Content/themes/bootstrap/Default.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IssueTracking.TestMasterPage" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <h2>Content</h2>
        <p><span class="badge badge-important">3</span> This is Content</p>
    </asp:Content>

    程序 3. 套用 Master Page 的网页

    基本上, 这个网页和另外三个 User Control 的写法是相当类似的。你应该依情况设计自己想要的内容。

    这个网页的长相如下:

    []

    套进 ASP.NET 控件

    当我们把网站套上 Bootstrap 之后, 我们只需对某个 HTML 标签赋予 CSS 类别, 就可以改变该控件的长相或行为。同样的道理对 ASP.NET 的控件也是有效的; 只要我们能够将它套上 CSS 类别就行。例如, 你可以很简单地把一个 Label 控件加上 CSS 类别, 让它变成一个按钮:

    <asp:Label CssClass="btn btn-danger" ID="Literal1" runat="server" >变成按钮</asp:Label>

    以下, 我将使用 GridView 作为例子:

    <asp:GridView ID="GridView1" CssClass="table table-bordered table-hover">
        <Columns>
            <asp:TemplateField ShowHeader="False">
                <EditItemTemplate>
                    <asp:LinkButton CommandName="Update" CssClass="btn btn-info" 
                       Text="<i class=&quot;icon-play&quot;></i> 更新" Width="50px">
                    </asp:LinkButton> 
                <asp:LinkButton CommandName="Cancel" CssClass="btn btn-warning"
                       Text="<i class=&quot;icon-stop&quot;></i> 取消" Width="50px"></asp:LinkButton>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:LinkButton CommandName="Edit" CssClass="btn btn-info"
                        Text="<i class=&quot;icon-edit&quot;></i> 编辑" Width="50px"></asp:LinkButton> 
                <asp:LinkButton CommandName="Delete" CssClass="btn btn-warning"
                    Text="<i class=&quot;icon-remove&quot;></i> 删除" Width="50px"></asp:LinkButton>
                </ItemTemplate>
                <ItemStyle CssClass="text-center" />
            </asp:TemplateField>
            <asp:BoundField>
                <HeaderStyle CssClass="text-center" />
                <ItemStyle CssClass="text-center" />
            </asp:BoundField>
            </asp:TemplateField>
            <asp:TemplateField >
                <HeaderStyle CssClass="text-center" />
            </asp:TemplateField>
        <AlternatingRowStyle BackColor="#f9f9f9" />
        <HeaderStyle BackColor="#dff0d8" Font-Bold="True" />
    </asp:GridView>

    程序 4. 套用 Bootstrap 格式的 GridView 控件

    在上述 GridView 程序代码中, 为求精简, 我把不需要的卷标和属性都拿掉了, 请读者留意。原则上, 只要控件里面有 CssClass 属性, 你就可以把 Bootstrap 的 CSS 类别加上去。不过有时候你必须把某个 BoundField 转换成 TemplateField, 才有办法加上 CSS 类别。但是在某些状况下, ASP.NET 所提供的功能优于使用 Bootstrap; 例如表格的交叉底色, 使用 AlternatingRowSyle 来指定, 会比使用 Bootstrap 的 table-striped 来得好。所以你可以看到我并没有采用 table-striped。

    Bootstrap 学习资源

    到这里为止, 我已经把 Bootstrap 的最重要原理讲述并示范了一遍, 也教你如何套用到 ASP.NET 了。接着, 应该足够你自己试着着手了。

    要学习 Bootstrap, 我找到如下的一系列相当棒的教学影片。虽然这些影片讲得非常的简单, 而且使用英语, 但是, 请相信我, 讲师的英语并没有任何艰涩的单字, 又辅以画面协助, 应该不难听懂才对。由于这些影片已经把最重要基础知识都说了, 所以我在本文中就不多赘述了。

    Twitter Boostrap Tutorial 1 – Navbars

    Twitter Boostrap Tutorial 2 – Fixed Navbars

    Twitter Boostrap Tutorial 3 – Grid Layouts

    Twitter Boostrap Tutorial 4 – Modal Dialogs

    Twitter Boostrap Tutorial 5 – Dynamic Modal Dialogs

    Twitter Boostrap Tutorial 6 – Tooltips

    Twitter Boostrap Tutorial 7 – Table Styles

    Twitter Boostrap Tutorial 8 – Forms

    Twitter Boostrap Tutorial 9 – Tabs

    此外, KKBruce 很佛心地把 Bootstrap 官网义务翻译成了中文。想看中文说明的朋友可以前往参考。

    注意事项

    Bootstrap 框架把太多东西写死在档案里面, 除了上面提过的图文件路径之外, 它甚至连字型都写死为 "Helvetica Neue",Helvetica,Arial,sans-serif。因此, 如果你不想另外写在其它的 CSS 档案里, 那么或许你会想要把 bootstrap.css 和 bootstrap.min.css 改写。不过, 如果你这么做的话, 有两点请特别注意:

    请在标头的批注处注明这个档案已经遭到修改, 并注明为何更改、改了什么等等。 最好把档案的编辑方式从 ANSI 改为 UTF-8, 如此, 假设你把字体改成例如微软正黑体, 它才会生效。 参考数据: davethesoftwaredev 的教学影片 KKBruce.tw Bootstrap 官网


    阅读原文

    展开全文
  • 笔者从事asp.net开发多年,这里把一套基于asp.net的比较完善的网站开源分享给大家,主要是帮助新人学习。本框架包含了诸多功能,在实际项目中使用了超过4年时间,相关的工具和核心代码可靠性相对比较完善。...

    笔者从事asp.NET开发多年,这里把一套基于asp.Net的比较完善的网站开源分享给大家,主要是帮助新人学习。本框架包含了诸多功能,在实际项目中使用了超过4年时间,相关的工具和核心代码可靠性相对比较完善,三层架构也是源于网络回馈网络。部分页面是由删除原业务逻辑得到,会包含有不够简洁的代码,全当样例,具体在自己的项目实施过程中优化。本框架的思想是,简单和快速。


                Author:Eshine Lee

              E-mail:lyx_zhl@hotmail.com

    相关链接

    1. 项目完整源代码:https://github.com/lyxzhl/EshineASPNet
    2. 项目Demo:http://eshine.chinacloudapp.cn:100     用户名及密码:eshine
    3. 框架说明:http://blog.csdn.net/lyx_zhl/article/details/54313495

    使用教程 (教程大部分内容同样适用MVC平台,觉得有帮助的请在github来个Star或者Fork都非常欢迎!)

    1. 多语言与单一登录:http://blog.csdn.net/lyx_zhl/article/details/54342494
    2. 商店门店地图展示:http://blog.csdn.net/lyx_zhl/article/details/54344925
    3. 身份证校验与正则:http://blog.csdn.net/lyx_zhl/article/details/54347849
    4. EXCEL导入与导出:http://blog.csdn.net/lyx_zhl/article/details/54352443
    5. 根据模板发送邮件:http://blog.csdn.net/lyx_zhl/article/details/54375625
    6. 支付机构支付模块:http://blog.csdn.net/lyx_zhl/article/details/54377252
    7. 自动生成代码模块:http://blog.csdn.net/lyx_zhl/article/details/54377962
    8. 公众号开发与框架:http://blog.csdn.net/lyx_zhl/article/details/54378528

    包含功能模块和特色:

    • 前台:
      • 用户登录 - 用户名/邮箱/手机多匹配登陆,md5加密方式,登陆多重定向
      • 幻灯片放映 - 基于jQuery的炫丽切换效果
      • 中英文双语 - 采用公共资源文件的多语言实现
      • 安全中心 - 含忘记密码,安全提问,绑定邮箱更换等
      • 单用户登陆 - 采用Hashtable禁用多点登陆,踢出逻辑
      • 页面超时退出 - 采用Session超时增强安全性
      • 省市区三级联动 - 内置数据库,用于地址输入
      • 百度地图模块 - 根据经纬度在百度地图标注多个门店(支持谷歌地图)
      • 身份证检查 - 严格检查身份证号码每一位确保是正确的身份证号
      • 图片验证码 - 简单字符验证码图片生成
      • 商城模块 - 轻量化的小型电商,含展示页面,购物车,收货地址及结算
      • 支付模块 - 含支付宝即时到账及银行列表
      • 自适应 - 自适应屏幕宽度
      • 发送邮件 - 根据模板发送邮件
    • 后台:
      • 权限管理 - 高可复用的权限-角色-员工模块,权限具体到页面粒度
      • 用户管理 - 用户的编辑、筛选、信息展开
      • 公司管理 - 公司信息的管理
      • 商品管理 - 商场管理
      • 订单管理 - 订单的管理
      • 导入Excel - 自动读取excel多张sheet并存入数据库
      • 导出Excel - 导出gridview数据至excel

    涵盖技术:

    Asp.net Webform,Sql Server,三层架构,用户控件,页面继承

    使用的第三方组件:

    Bootstrap, Kindeditor, Senparc.Weixin

    简单闲聊下为什么是webform而不是MVC,以及三层架构。对于这一点,本框架的思想是简单和快速,用webform的拉控件方式对于大师级工程师或企业级开发团队所不齿,(笔者未来会分享一套基于MVC的方案),不过对于初学者而言这是从学校或自学所积累的只是到真实项目开发最没有压力的一步,而且这个框架也是基于过去分享的一个教科书式三层架构基础的延伸,增加了自动实现BLL、DAL、Model的代码。

    笔者在只是为了验证可行性或制作原型来交流的时候,更倾向webform的形式,因为这个阶段压根不考虑页面刷新的用户体验,页面大小对加载速度的影响等问题。另外,并不是webform就不能用ajax call的形式来做页面交互,而是在可实现所有功能及性能的基础上提供偷懒的可能性。

    对于功能模块,有这个简单的框架可以快速的对设想做技术可行性探索,上面罗列的功能其实只是部分,还有诸多第三方系统的对接,短信的发送等功能都删除了,这个根据情况自行定制即可,样例都在。在对数据库操作,多功能整合,结构分层等都游刃有余以后,采用MVC,学习最前沿的技术才是王道,但不是一蹴而就的。

    最后说一下使用,打包下载github包之后,先到db文件夹,这里有个bak文件可以直接还原到sql server 2012以上的版本,对于低版本的sql server,这里提供了script文件执行一次就可以创建数据库。然后修改web.config里面的connectionstring就可以运行了,have fun!


    展开全文
  • Web表单

    千次阅读 2017-12-18 18:32:36
    pip install flask-wtf ... 4.1 跨站请求伪造保护  默认情况下,Flask-WTF能保护所有表单免受跨站请求伪造(Cross-Site Request Forgery,CSRF)的攻击。恶意网站把请求发送到被攻击者已登录的其他网站时就会引发CSRF攻击...

    pip install flask-wtf

    flask-wtf(https://flask-wtf.readthedocs.io/en/stable/)

    4.1 跨站请求伪造保护

        默认情况下,Flask-WTF能保护所有表单免受跨站请求伪造(Cross-Site Request Forgery,CSRF)的攻击。恶意网站把请求发送到被攻击者已登录的其他网站时就会引发CSRF攻击。

        为了实现CSRF保护,Flask_WTF需要程序设置一个密钥。Flask-WTF使用这个密钥生成加密令牌,再用令牌验证请求中表单数据的真伪。设置密钥的方法如示例4-1所示。

    示例4-1 hello.py:设置Flask-WTF

    app = Flask(__name__)
    app.config['SECRET_KEY'] = 'hard to guess string'

        app.config字典可用来存储框架、扩展和程序本身的配置变量。使用标准的字典句法就能把配置值添加到app.config对象中。这个对象还提供了一些方法,可以从文件或环境中导入配置值。

        SECRET_KEY配置变量是通用密钥,可在Flask和多个第三方扩展中使用。如其名所示,加密的强度取决于变量值的机密程度。不同的程序要使用不同的密钥,而且要保证其他人不知道以所用的字符串。

    4.2 表单类

        使用Flask-WTF时,每个Web表单都由一个继承自Form的类表示。这个类定义表单中的一组字段,每个字段都用对象表示。字段对象可附属一个或多个验证函数。验证函数来验证用户提交的输入值是否符合要求。

    示例4-2是一个简单的Web表单,包含一个文本段和一个提交按钮。

    示例4-2 hello.py:定义表单类

    #coding:utf8
    from flask import Flask
    from flask_wtf import Form
    from wtforms import StringField,SubmitField
    from wtforms.validators import Required
    
    class NameForm(Form):
      name = StringField('What is your name?',validators=[Required()])
      submit = SubmitField('Submit')
    

        这个表单中的字段都定义为类变量,类变量的值是相应字段类型的对象。在这个示例中,NameForm表单中有一个名为name的文本字段和一个名为submit的提交按钮。StringField类表示属性为type="text"的<input>元素。SubmitField类表示属性为type="submit"的<input>元素。字段构造函数的第一个参数是把表单渲染成HTML时使用的标号。

        StringField构造函数中的可选参数validators指定一个由验证函数组成的列表,在接受用户提交的数据之前验证数据。验证函数Required()确保提交的字段不为空。



    4.3 把表单渲染成HTML

        表单字段是可调用的,在模板中调用后会渲染成HTML。假设视图函数把一个NameForm实例通过参数form传入模板,在模板中可以生成一个简单的表单,如下所示:

     

    <form method="POST">
      {{ form.hidden_tag() }}
      {{ form.name.label }} {{ form.name() }}
      {{ form.submit() }}
    </form>

        当然,这个表单还很简陋。要想改进表单的外观,可以把参数传入渲染字段的函数,传入的参数会被转换成字段的HTML属性。例如,可以为字段指定id或class属性,然后定义CSS样式:

    <form method="POST">
      {{ form.hidden_tag() }}
      {{ form.name.label }} {{ form.name(id='my-text-field') }}
      {{ form.submit() }}
    </form>
        Flask-Bootstrap提供了一个非常高端的辅助函数,可以使用Bootstrap中预先定义好的表单样式渲染整个Flask-WTF表单,而这些操作只需一次调用即可完成。使用Flask-Bootstrap,上述表单可使用下面的方式渲染:

    {% import "bootstrap/wtf.html" as wtf %}
    {{ wtf.quick_form(form) }}

        wtf.quick_form()函数的参数为Flask-WTF表单对象,使用Bootstrap的默认样式渲染传入的表单。

    示例4-3 templates/index.html:使用Flask-WTF和Flask-Bootstrap渲染表单

    {% extends "base.html" %}
    {% import "bootstrap/wtf.html" as wtf %}
    {% block title %}Flasky{% endblock %}
    {% block page_content %}
    <div class="page-header">
    <h1>Hello, {% if name %}{{ name }}{% else %}Stranger{% endif %}!</h1>
    </div>
    {{ wtf.quick_form(form) }}
    {% endblock %}

        如果没有定义模板变量name,则会渲染字符串"Hello,Stranger!"。内容区的第二部分使用wtf.quick_form()函数渲染NameForm对象。

    4.4 在视图函数中处理表单

    示例4-4 hello.py:路由方法

    #coding:utf8
    from flask import Flask,render_template
    from flask_wtf import Form
    from wtforms import StringField,SubmitField
    from wtforms.validators import Required
    from flask_bootstrap import Bootstrap
    app = Flask(__name__)
    bootstrap = Bootstrap(app)
    app.config['SECRET_KEY'] = 'hard to guess string'
    
    class NameForm(Form):
      name = StringField('What is your name?',validators=[Required()])
      submit = SubmitField('Submit')
    
    @app.route('/',methods=['GET','POST'])
    def index():
      name = None
      form = NameForm()
      if form.validate_on_submit():
        name = form.name.data
        form.name.data = ''
      return render_template('index.html',form=form,name=name)
    
    if __name__ == '__main__':
      app.run(debug=True)
    
        app.route修饰器中添加的methods参数告诉Flask在URL映射中把这个视图函数注册为GET和POST气你球儿的处理程序。如果没指定methods参数,就只能把视图函数注册为GET请求的处理程序。

        把POST加入方法列表很有必要,因为将提交表单作为POST请求进行处理更加便利。表单也可作为GET请求提交,不过GET请求没有主体,提交的数据以查询字符串的形式附加到URL中,可在浏览器的地址栏中看到。基于这个以及其他多个原因,提交表单大都作为POST请求进行处理。

        局部变量用来存放表单中输入的有效名字,如果没有输入,其值为None。如上述代码所示,在视图函数中创建一个NameForm类实例用于表示表单。提交表单后,如果数据能被所有验证函数接受,那么validate_on_submit()方法的返回值为True,否则返回False。这个函数的返回值决定是重新渲染表单还是处理表单提交数据。

        用户第一次访问程序时,服务器会收到一个没有表单数据的GET请求,所以validate_on_submit()将返回False。if语句的内容将被跳过,通过渲染模板处理请求,并传入表单对象和值为None的name变量作为参数。用户会看到浏览器中显示了一个菜单。

        用户提交表单后,服务器收到了一个包含数据的POST请求。validate_on_submit()会调用name字段上附属的Required()验证函数。如果名字不为空,就能通过验证,validate_on_submit()返回True。现在,用户输入的名字可通过字段的data属性获取。在if语句中,把名字赋值给局部变量name,然后再把data属性设为空字符串,从而清空表单字段。最后一行调用render_template()函数渲染模板,但这一次参数name的值为表单中输入的名字,因此会显示一个针对该用户的欢迎消息。



    4.5 重定向和用户会话

        用户在输入名字提交表单,然后点击浏览器的刷新按钮,会看到一个莫名其妙的警告,要求在再次提交表单之前进行确认。之所以出现这种情况,是因为刷新页面时浏览器会重新发送之前已经发送过的最后一个请求。如果这个请求是一个包含表单数据的POST请求,刷新页面后会再次提交表单。大多数情况下,这并不是理想的处理方式。

        基于这个原因,最好别让Web程序把POST请求作为浏览器发送的最后一个请求。

        这种需求的实现方式是,使用重定向作为POST请求的响应,而不是使用常规响应。重定向是一种特殊的响应,响应内容是URL,而不是包含HTML代码的字符串。浏览器收到这种响应时,会向重定向的URL发起GET请求,显示页面的内容。这个页面的加载可能要多花几微妙,因为要先把第二个请求发送给服务器。除此之外,用户不会察觉到有什么不同。现在,最后一个请求是GET请求,所以刷新命令能像预期的那样正常使用了。这个技巧称为Post/重定向/Get模式。

        但这种方法会带来另一个问题。程序处理POST请求时,使用form.name.data获取用户输入的名字,可是一旦这个请求结束,数据也就丢失了。因为这个POST请求使用重定向处理,所以程序需要保存输入的名字,这样重定向后的请求才能获得并使用这个名字,从而构建真正的响应。

        程序可以把数据存储在用户会话中,在请求之间"记住"数据。用户会话是一种私有存储,存在于每个连接到服务器的客户端中。

    示例4-5是index()视图函数的新版本、实现了重定向和用户会话。

    示例4-5 hello.py:重定向和用户会话

     

    #coding:utf8
    from flask import Flask,render_template,session,redirect,url_for
    from flask_wtf import Form
    from wtforms import StringField,SubmitField
    from wtforms.validators import Required
    from flask_bootstrap import Bootstrap
    app = Flask(__name__)
    bootstrap = Bootstrap(app)
    app.config['SECRET_KEY'] = 'hard to guess string'
    
    class NameForm(Form):
      name = StringField('What is your name?',validators=[Required()])
      submit = SubmitField('Submit')
    
    @app.route('/',methods=['GET','POST'])
    def index():
      form = NameForm()
      if form.validate_on_submit():
        session['name'] = form.name.data
        return redirect(url_for('index'))
      return render_template('index.html',form=form,name=session.get('name'))
    
    if __name__ == '__main__':
      app.run(debug=True)
    

        url_for()函数的第一个且唯一必须指定的参数是端点名,即路由的内部名字。默认情况下,路由的端点是相应视图函数的名字。在这个示例中,处理跟地址的视图函数是index(),因此传给url_for()函数的名字是index。

    4.6 Flash消息

        一个典型的例子是,用户提交了有一项错误的登录表单后,服务器发回的响应重新渲染了登录表单,并在表单上显示了一个消息,提示用户名或者密码错误。

    示例4-6 hello.py:Flash消息

    #coding:utf8
    from flask import Flask,render_template,session,redirect,url_for,flash
    from flask_wtf import Form
    from wtforms import StringField,SubmitField
    from wtforms.validators import Required
    from flask_bootstrap import Bootstrap
    app = Flask(__name__)
    bootstrap = Bootstrap(app)
    app.config['SECRET_KEY'] = 'hard to guess string'
    
    class NameForm(Form):
      name = StringField('What is your name?',validators=[Required()])
      submit = SubmitField('Submit')
    
    @app.route('/',methods=['GET','POST'])
    def index():
      form = NameForm()
      if form.validate_on_submit():
        old_name = session.get('name')
        if old_name is not None and old_name != form.name.data:
          flash('Looks like you have changed you name!')
        session['name'] = form.name.data
        return redirect(url_for('index'))
      return render_template('index.html',form=form,name=session.get('name'))
    
    if __name__ == '__main__':
      app.run(debug=True)
    

    示例4-7 templates/base.html:渲染Flash消息

    {% block content %}
    <div class="container">
    {% for message in get_flashed_messages() %}
    <div class="alert alert-warning">
    <button type="button" class="close" data-dismiss="alert">×</button>
    {{ message }}
    </div>
    {% endfor %}
    {% block page_content %}{% endblock %}
    </div>
    {% endblock %}
    
























    展开全文
  • 〇.开始前先看看效果图吧 一、准备(下载)所需文件 1.js和css文件:下载链接 二、新建项目(不需要新建项目的可以直接看第三步) 本次开发环境VS2015+MSSQL2012 ... 新建 ASP.NET Web 项目大家应该都会所以简单说一下,...

    〇.开始前先看看效果图吧

    在这里插入图片描述

    一、准备(下载)所需文件

    1. js和css文件:下载链接 源码
    2. 本次开发测试数据库:Northwind,安装方法请参考这篇文章
      Northwind表结构

    二、新建项目(不需要新建项目的可以直接看第三步)

    本次开发环境VS2015+MSSQL2012
    为了方便新建项目,笔者这里用了aspx窗体文件做前台,实际上用HTML页面做前台就可以了

    新建 ASP.NET Web 项目大家应该都会所以简单说一下,.NET Framework版本默认就行影响不大,名称随意笔者这里是“BootstrapTable”
    在这里插入图片描述
    然后选择WebForm,这是VS2015的新建过程,不同版本可能操作略微不同
    在这里插入图片描述
    新建完成后,删除一些不必要的文件,然后在script文件中放入所需的js及css文件,最后再根目录创建web窗体文件,上面操作完成后,资源管理器如下:

    新建项目生成的文件可以不删,但是如果要删就删除干净免得报错
    InfoList.aspx是笔者创建的web窗体文件

    在这里插入图片描述

    三、连接(配置)数据库(创建dbml,会的直接下一步)

    我们要先在VS中配置连接一下数据库,在根目录新建一个“DB”文件夹,然后再“DB”文件中添加“新建项”,在数据选项卡中找到“LINQ to SQL类”,名称也随意
    在这里插入图片描述
    然后就是连接数据库了,打开新建的dbml文件,点击“服务器资源管理”
    在这里插入图片描述
    接着在数据连接上右击“添加连接”
    在这里插入图片描述
    在弹出的配置窗口,填写合适的参数,笔者这里使用的是远程的数据库。使用本地数据库的同学,在“服务器地址”上填写 “.”(就一个英文句号),下方选择windows验证登录即可。

    没有数据库或者不方便的同学可以发邮件给我,博主可以提供下面的远程数据库密码,联系方式:957553851@qq.com

    在这里插入图片描述
    可以点击“测试连接”来验证可行性,可以之后点击“确定”可以在“服务器资源管理器”中看到数据库,然后打开表选择要用到的表直接拖拽到右边即可。
    在这里插入图片描述
    保存,关闭就配置完成了。

    四、画表格

    首先导入js和css文件(#中间的代码是在本步骤添加的代码,下同)

    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        ##################################################
        <%--jquery和bootstrap--%>
        <script src="Scripts/jquery.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
        <link href="Scripts/bootstrap.min.css" rel="stylesheet" />
        <%--bootstrp-table--%>
        <script src="Scripts/bootstrap-table.min.js"></script>
        <link href="Scripts/bootstrap-table.min.css" rel="stylesheet" />
        <%--bootstrap-table语言包--%>
        <script src="Scripts/bootstrap-table-zh-CN.min.js"></script>
        ##################################################
    </head>
    <body>
    

    然后再body中添加一个Table,id随意命名

    <body>
        <form id="form1" runat="server">
        <div>
        	##################################################
            <table id="GetInfoTable" style="overflow-x:auto; white-space:nowrap"></table>
            ##################################################
            #overflow-x:指定当内容从元素的内容区域溢出时是否剪切内容
            #white-space:nowrap:不换行
        </div>
        </form>
    </body>
    

    在“/form”前写js脚本

            <table id="GetInfoTable" style="overflow-x:auto; white-space:nowrap"></table>
        </div>
    	#############################################
        <script type="text/javascript">
            $(function () {
                //初始化表格
                var Table = new TableInit();
                Table.Init();
            });
    
            var TableInit = function () {
                //TODO
            };
        </script>
    	##############################################
        </form>
    

    然后实现TableInit方法

    var TableInit = function () {
    			################################################
                var TableInit = new Object();
                //初始化Table
                TableInit.Init = function () {
                    //清空表格数据
                    $('#GetInfoTable').bootstrapTable('destroy');
                    //设置表格属性
                    $('#GetInfoTable').bootstrapTable({
                        url: '',          //请求数据的URL,先空着
                        method: 'get',      //请求方法
                        toolbar: '#toolbar',     //工具栏
                        striped: false,         //表格斑马纹
                        cahce: true,
                        pagination: true,       //分页
                        sortable: true,     //排序
                        sortOrder: "asc",   //排序方式
                        queryParams: TableInit.queryParams,     //要传递的参数,这里是一个方法名,之后实现
                        sidePagination: "server",   //分页的类型“服务端”还是“客户端”
                        pageNumber: 1,      //分页起始页
                        pageSize: 10,       //分页显示的条数
                        pageList: [10, 25, 50, 'All'],  //分页可以显示条数
                        search: true,       //搜索
                        strictSearch: true,
                        showColumns: true,      //设置可以显示的列
                        minimumCountColumns: 2, //最少显示的列数,对应上条
                        showRefresh: true,      //刷新按钮
                        clickToSelect: true,    //点击选择
                        singleSelect: true,     //单选
                        //showToggle:true,
                        showFooter: true,   //设置表底
                        //双击选择方法
                        onDblClickRow: function (row) {
                            Dbclick(row);
                        },
                        //下面是列名,
                        columns: [
                            {
                                field: 'OrderID',   //数据键
                                title: 'OrderID',      //列名
                                sortable: true,     //是否允许排序
                                align: 'center',    //居中
                                footerFormatter: 'Total',   //表底显示
                            }, {
                                field: 'CustomerID',
                                title: 'Customer',
                                sortable: true,
                                align: 'center',
                            }, {
                                field: 'OrderDate',
                                title: 'OrderDate',
                                sortable: true,
                                align: 'center',
                            }, {
                                field: 'RequiredDate',
                                title: 'RequiredDate',
                                sortable: true,
                                align: 'center',
                            }, {
                                field: 'ShippedDate',
                                title: 'ShippedDate',
                                sortable: true,
                                align: 'center',
                            }, {
                                field: 'Freight',
                                title: 'Freight',
                                sortable: true,
                                align: 'center',
                            }, {
                                field: 'ShipName',
                                title: 'ShipName',
                                sortable: true,
                                align: 'center',
                            }, {
                                field: 'ShipAddress',
                                title: 'ShipAddress',
                                sortable: true,
                                align: 'center',
                            }, {
                                field: 'ShipCity',
                                title: 'ShipCity',
                                sortable: true,
                                align: 'center',
                            },{
                                field: 'ShipPostalCode',
                                title: 'ShipPostalCode',
                                sortable: true,
                                align: 'center',
                            }, {
                                field: 'ShipCountry',
                                title: 'ShipCountry',
                                sortable: true,
                                align: 'center',
                            },
                        ],
                    });
                };
    
                return TableInit;
    			################################################
            };
    

    完成后,可以右击在“浏览器中查看”看看效果,如果无误的话,应该如下所示,表的结构已经有了,但是还没有数据。
    在这里插入图片描述

    五、填充表格数据

    在上一步中,我们在设置表的属性的时候,还有几个方法没有实现,现在在设置列名的后面实现

    TableInit.Init = function () {
                    ......
                    , {
                                field: 'ShipCountry',
                                title: 'ShipCountry',
                                sortable: true,
                                align: 'center',
                            },
                        ],
                    });
                };
    			###############################################
                //得到查询的参数
                TableInit.queryParams = function (params) {
                    return {
                        "offset": params.offset,    //从第几条数据开始
                        "limit": params.limit,      //每页显示的数据条数
                        "keyword": params.search,   //搜索框中的条件
                        "sortName": params.sort,    //要排序的列
                        "sortOrder": params.order,  //排序列的排序方式
                    }
                    return params;
                };
    
                //双击选中行的事件
                Dbclick = function (row) {
                    //对象转换为json
                    data = JSON.stringify(row);
                    //控制台输出选中行的数据
                    console.log(data);
                };
                ##############################################
                return TableInit;
            };
    

    完成前台后,来处理后台,现在要做表格请求的URL,在根目录创建文件夹“WebService”,然后右击在文件中添加新建项“一般处理程序(.ashx)”,命名的话也随意,我这里是“getInfo.ashx”
    在这里插入图片描述
    接下来就是获取前台的数据做数据请求,处理数据,返回数据

    这里要额外引入的命名空间
    using BootstrapTable.DB; //这里根据创建时的变成做相应改变
    using Newtonsoft.Json;
    using Newtonsoft.Json.Linq;

    public void ProcessRequest(HttpContext context)
            {
                context.Response.ContentType = "text/plain";
                ##############################################################
                using (var db = new InfoDataContext())
                {
                	//获取前台的信息
                    int limit = Convert.ToInt32(context.Request["limit"]);     //每页显示数量
                    int offset = Convert.ToInt32(context.Request["offset"]);   //从第几条数据开始
                    string keyword = context.Request["keyword"] == null ? "" : context.Request["keyword"].ToString();    //搜索内容
                    string sortName = context.Request["sortName"] == null ? "" : context.Request["sortName"].ToString();
                    string sortOrder = context.Request["sortOrder"] == null ? "" : context.Request["sortOrder"].ToString();
                    //SQL语句--这里GetSql()方法稍后实现
                    string sql = GetSql(keyword, sortName, sortOrder);
                    //数据请求
                    var AssetListAll = db.ExecuteQuery<Orders>(sql).ToList();
                    //处理数据
                    var AssetList = AssetListAll.Skip(offset).Take(limit).ToList();	-----------------var result = JsonConvert.SerializeObject(AssetList.ToArray());	--------------string s = "{\"rows\":" + result + ",\"total\":" + AssetListAll.Count + "}";	----JObject jo = (JObject)JsonConvert.DeserializeObject(s);	---------------------//返回数据
                    context.Response.Write(jo);
                }
                ##############################################################
            }
    

    这里解释一下在处理数据的那一块。
    ①是做数据的筛选,根据当前页和要显示的数据。
    ②③的原因,是把数据格式化,因为BootstrapTable要求返回的数据是由row(数据的合集),total(总数)构成。
    上述中“result”的值如下,“\”是转移字符看的时候忽略就行
    在这里插入图片描述
    简而言之,直接查询得到的数据不是BootstrapTable想要的,我们经过序列化、数据处理、反序列化后得到如下新的JSON对象,row显示当前页面数据,total是表格的总的条数
    在这里插入图片描述
    上图中可以得到当前页面的数据,和总的信息条数。
    接着我们实现GetSql()方法

    public void ProcessRequest(HttpContext context){...}
    
    public bool IsReusable{...}
    
    #############################################################
    /// <summary>
    /// 根据条件生成sql语句
    /// </summary>
    /// <param name="keyword">搜索关键词</param>
    /// <param name="sortName">排序的列名</param>
    /// <param name="sortOrder">排序的方式</param>
    /// <returns>返回要查询的sql语句</returns>
     public static string GetSql(string keyword, string sortName, string sortOrder)
     {
         string sql = @"SELECT * FROM Orders";
         //搜索
         if (keyword != "")
         {
             //先判断sortName是否多值模糊搜索
             //这里目地是实现,用户想多条件搜索时,在搜索栏中用逗号隔开
             //比如用户搜索同时有A和B的信息,那么在搜索栏中输入“A,B”或者“A,B”
             var keywordList = keyword.Split(new char[2] { ',', ',' });
    
             //搜索条件
             for (int i = 0; i < keywordList.Count(); i++)
             {
                 sql += i == 0 ? " WHERE " : " AND ";
                 sql += @"CONCAT(CustomerID,  Freight, OrderDate, OrderID, RequiredDate, ShipAddress, ShipCity, ShipCountry, ShipName, ShipPostalCode, ShippedDate) "
                 + "LIKE '%" + keywordList[i] + "%'";
             }
         }
         //排序
         if (sortName != "")
         {
             //排序条件
             sql += @" ORDER BY '" + sortName + "' " + sortOrder;
         }
         return sql;
     }
     #############################################################
    

    上面语句中“CONVERT(varchar,OrderDate,21)”是因为数据库中的日期需要转换否则读取可能不正常,比如上图三个Date项中的空格都变成了“T”,更多信息可以参考博主的这篇文章

    最后记住在Table属性中把URL补充完全

    //设置表格属性
    $('#GetInfoTable').bootstrapTable({
    	################################
        url: '/WebService/getInfo.ashx',          //请求数据的URL,先空着
        ################################
        method: 'get',      //请求方法
        toolbar: '#toolbar',     //工具栏
        striped: false,         //表格斑马纹
    

    再次运行,功能都正常基本完成。
    在这里插入图片描述
    但是观察日期这里,原本空格的地方被“T”代替了,这是因为数据库中日期的格式是DateTime
    在这里插入图片描述

    更多说明可以参考一下博主的这篇文章

    在这里我们有临时解决的方法
    在日期列中,我们格式化一下输出

    , {
        field: 'OrderDate',
        title: 'OrderDate',
        sortable: true,
        align: 'center',
        ##########################################
        formatter: DateFormatter	//日期格式化方法
        ##########################################
    }, {
        field: 'RequiredDate',
        title: 'RequiredDate',
        sortable: true,
        align: 'center',
        ##########################################
        formatter: DateFormatter	//日期格式化方法
        ##########################################
    }, {
        field: 'ShippedDate',
        title: 'ShippedDate',
        sortable: true,
        align: 'center',
        ##########################################
        formatter: DateFormatter	//日期格式化方法
        ##########################################
    }, 
    

    然后实现该方法

    //得到查询的参数
    TableInit.queryParams = function (params) {...};
    
    //双击选中行的事件
    Dbclick = function (row) {...};
    
    ###################################
    //格式化表格数据
    //把日期中T转换为空格
    function DateFormatter(value) {
        return value.replace('T', ' ');;
    };
    ###################################
    
    return TableInit;
    

    这样只能临时解决问题,比如现在搜索功能只能搜索“1997”或“08”这种年月份,而对于“1997-08”搜索是没有结果的,所以还要从根本上解决。具体操作博主有时间再更新。

    最后别忘了修改一下“bootstrap-table-zh-CN.js”中文字
    在这里插入图片描述

    六、导出数据

    导出数据其实很方便,引用对文件就行了
    需要的文件如下,下载链接
    在这里插入图片描述
    然后引入相关文件

    <script src="../../../Scripts/bootstrap-table-Export/bootstrap-table-export.js"></script>
    <script src="../../../Scripts/bootstrap-table-Export/FileSaver.min.js"></script>
    <script src="../../../Scripts/bootstrap-table-Export/tableexport.js"></script>
    <script src="../../../Scripts/bootstrap-table-Export/xlsx.core.min.js"></script> 
    

    在bootstrap-table的API中设置导出按钮及需要导出的类型

    singleSelect: true,     //单选
    //showToggle:true,
     showFooter: true,   //设置表底
     ####################################
    //导出Excel表
    showExport: true,
    exportDataType: "basic",			//这里有三种类型可以选择“'basic', 'all', 'selected'”分别代表当前页,全部页,选中页
    ####################################
    

    刷一下页面,按钮已经显示了
    在这里插入图片描述
    如果引入脚本没有问题的话,那么下载应该是没有问题的
    在这里插入图片描述

    七、美化表格

    美化不是刚需,这里笔者用的是“material-dashboard”,下载链接
    代码如下:

    <body>
        <form id="form1" runat="server">
        <div class="main-panel" style="width: 100%">
            <%--主表格--%>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header card-header-info">
                                <h4 class="card-title ">BootstrapTable信息表</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                        <table id="GetInfoTable" style="overflow-x:auto; white-space:nowrap"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    ............
    

    当然在这之前引入不能忘了

    <%--material-dashboard样式 --%>
        <link href="../../../Scripts/material-dashboard.css" rel="stylesheet" />
        <script src="../../../Scripts/material-dashboard.js"></script>
    

    在上面的引入中,笔者给的一共有三个文件
    在这里插入图片描述

    “my-material-dashboard.css”是笔者通过“material-dashboard.css”修改得到

    如果出现图标异常的情况,那就试试引入“my-material-dashboard.css”,然后清理一下项目,退出IIS,然后再试一下。
    在这里插入图片描述

    展开全文
  • mvc中如何引入js和css

    千次阅读 2017-12-25 22:22:53
    1 App_Start文件夹中的BundleConfig.cs文件 [csharp] view plain copy using System.Web;  using System.Web.Optimization;  ... public class BundleCon
  • 在早期Bootstrap框架介绍中,我的随笔《结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程》中介绍了利用Bootstrap FieInput插件上传Excel文件到服务器,...
  • ASP.NET MVC实现Excel文件的上传下载

    千次阅读 2018-06-26 09:38:56
    在应用系统开发当中,文件的上传和下载是非常普遍的需求。在基于.NET的C/S架构的项目开发...而在基于.NET的B/S架构的项目开发当中,虽然webform提供了上传控件(HttpPostFile),但用户体验并不好(页面刷新,如果上...
  • 原文:https://www.jianshu.com/p/ae25d0d77011 官方文档:https://docs.microsoft.com/zh-cn/aspnet/signalr/ 实现效果 WebFrom + SignalR 实时消息,聊天室,即时消息 ...1 Micro...
  • 说明:该博客使用的方法我已经不再使用,只是还具有学习价值,所以暂不删除。 不再使用的原因是没有相关js引用,css引用,在VS中没有提示功能,太费力了,与之相比,复制一下其实还轻松一点,只是如果要换就比较...
  • struts 2.0

    千次阅读 2008-10-27 16:36:00
    <INPUT id="__VIEWSTATE" type=hidden name=__VIEWSTATE> //<![CDATA[var theForm = document.forms[Form1];if (!theForm) { theForm = document.Form1;}function __doPostBack(eventTarge
  • 2019年你必须了解的干货集锦

    千次阅读 2020-01-13 19:47:07
    2019年你必须了解的干货集锦 线程池的使用 springboot集成swagger springboot中实现多数据源 阿里云优惠券领取 精美在线icon java中的int与byte的转化 ...使用javamelody进行web监控 最牛程序员最爱逛的10大编程网站...
  • ASP.NET MVC5+EF6+EasyUI 后台管理系统

    千次阅读 2017-12-25 16:51:31
    ASP.NET MVC5+EF6+EasyUI 后台管理系统(1)-前言与目录(持续更新中...) 开发工具:VS2015(2012以上)+SQL2008R2以上数据库 ... 您可以有偿获取一份最新源码联系QQ:729994997 价格 ...
  • 使用技能:Bootstrap,asp.net mvc3,ajax,jQuery,webservice, json,xml,新浪第三方登录接口,腾讯第三方登录接口,.NET 框架 FineUI , javascript图表插件Highcharts,编辑器UEditor。 开发环境:Visual ...
  • 开发工具:VS2015(2012以上)+SQL2008R2以上数据库  您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB  升级后界面效果如下: 日程管理 http://www.cnblogs.com/ymnets/p/7094914.html ...
  • Thrift学习总结

    2017-09-21 20:00:06
    本文转载自喝前摇一摇:http://www.cnblogs.com/enternal/p/5275455.html 目录 前言 1 准备工作 1 一个简单的小程序 3 1、准备工作 3 2小试牛刀 5 深入挖掘 12 ...5服务端类型 
  • web导出excel格式问题

    2017-01-10 14:27:14
    当我们把web页面上的数据导成excel形式时,有时候我们的数据需要以特定的格式呈现出来,这时候我们就需要给cell添加一些样式规格信息。  首先,我们了解一下excel从web页面上导出的原理。当我们把这些数据发送到...
  • Blazor 初体验

    2020-06-25 16:31:10
    什么是Blazor 通过官方的介绍可以知道,Blazor是一个Web端的UI框架。 但与现在流行的UI框架(Angular,VUE等)不同,Blazor 是允许使用C#来代替一些Javascript功能的,而且可以在UI端和服务端共享业务逻辑代码。...
  • 转:Thrift学习总结

    2017-12-22 10:19:44
    Thrift学习总结 目录 前言 1 准备工作 1 一个简单的小程序 3 1、准备工作 3 2小试牛刀 5 深入挖掘 12 1. 架构图 12 2数据类型 15 3协议 16 4传输层 16 ...Thrift学习总结
1 2
收藏数 33
精华内容 13
关键字:

webform导入bootstrap