【FineUI自学笔记】2.搭建环境

新项目前端用到了FineUI这个框架，之前接触过一些UI框架，像H-UI,easy-UI。我的理解无非就是基于某种js框架，封装了一些样式和js效果。

反正就当一次全新的学习吧。

FineUI官网：http://fineui.com/index.html

可以在官网上下载空白项目，直接运行即可。但是我还是简单深入下web.config是怎么配置的。

参照官网上的教程，从一个空网站搭建环境(我是用的vs2015)：

1.新建asp.net空网站，添加引用

下载官网的示例项目，引用其中的FineUI.dll

2.复制extjs文件夹到项目

文件夹包含部分js和图片

3.配置web.config

引用FineUI

  <configSections>
    <section name="FineUI" type="FineUI.ConfigSection, FineUI" requirePermission="false" />
  </configSections>

这个节点一定要在<configuration>的第一个节点位置。

配置fineui扩展名

 <system.web>
    <!-- Net4.0以上的项目，一定要为pages节点加上这两个属性：controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID" -->
    <pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">
      <controls>
        <add assembly="FineUI" namespace="FineUI" tagPrefix="f" />
      </controls>
    </pages>

    <!-- 请求正文的最大值： 512000K = 500M  -->
    <httpRuntime maxRequestLength="512000" />
    <customErrors mode="Off" />
    <compilation debug="true" />

  </system.web>

.net 4.0及以上版本需要加上这段：

  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules>
      <add name="FineUIScriptModule" type="FineUI.ScriptModule, FineUI" />
    </modules>
    <handlers>
      <add name="FineUIResourceHandler" verb="GET" path="res.axd" type="FineUI.ResourceHandler, FineUI" />
    </handlers>
  </system.webServer>

配置json

方式1：项目里引用Newtonsoft.json.dll，然后手动在web.config添加如下配置：

 <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-8.0.0.0" newVersion="8.0.0.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>

此方式，json版本一定要和配置文件的版本号相同。

方式2（推荐）：vs安装json扩展

点击安装，配置文件会自动生成相应配置。

完整web.config如下：

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

<!--
  有关如何配置 ASP.NET 应用程序的详细信息，请访问
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->

<configuration>
  <configSections>
    <section name="FineUI" type="FineUI.ConfigSection, FineUI" requirePermission="false" />
  </configSections>

  <FineUI DebugMode="true" />

  <system.web>
    <!-- Net4.0以上的项目，一定要为pages节点加上这两个属性：controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID" -->
    <pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">
      <controls>
        <add assembly="FineUI" namespace="FineUI" tagPrefix="f" />
      </controls>
    </pages>

    <!-- 请求正文的最大值： 512000K = 500M  -->
    <httpRuntime maxRequestLength="512000" />
    <customErrors mode="Off" />
    <compilation debug="true" />

  </system.web>

  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <modules>
      <add name="FineUIScriptModule" type="FineUI.ScriptModule, FineUI" />
    </modules>
    <handlers>
      <add name="FineUIResourceHandler" verb="GET" path="res.axd" type="FineUI.ResourceHandler, FineUI" />
    </handlers>
  </system.webServer>



  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" culture="neutral" />
        <bindingRedirect oldVersion="0.0.0.0-8.0.0.0" newVersion="8.0.0.0" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
</configuration>

4.测试

<form id="form1" runat="server">
        <div>
            <f:PageManager ID="PageManager1" runat="server" />
            <f:Button Text="点击弹出对话框" runat="server" ID="btnHello" OnClick="btnHello_Click">
            </f:Button>
        </div>
    </form>

protected void btnHello_Click(object sender, EventArgs e)
        {
            Alert.Show("你好 FineUI！", MessageBoxIcon.Warning);
        }

5.常见错误

5.1  项目配置成功，编译通过，但是运行结果跑到一个奇怪的网页，网页显示结果为：一个未能加载的图片，如下图：

解决：通过浏览器调试功能看出该网页有一些404错误，说明有些静态内容为找到，添加extjs文件到项目即可解决。

5.2  配置成功，编译通过，运行结果网页一直在加载，显示为一个加载的圈，一直在跑。

解决：引用json.dll

5.3  编译通过，调试项目vs提示引用程序处于中断模式（vs2015），如下：

解决：配置文件错误，主要是<system.webServer>节点。是在不行，用官网的空项目测试吧。

总结：从头开始，林林总总碰到了一些问题，或多或少还是解决了，至少知道了错误的原因，多少也算有所收获。

不过，有一个问题，vs新建网站用fineui控件，没有智能提示，新建web项目不会有此问题，不知道怎么解决。