Axial,用.NET语言来写JavaScript代码
Axial 是CodePlex上一个开源项目，使用它我们可以以C#或VB.NET的方式来实现JavaScript功能，然后它会自动将相应的JavaScript输出到客户端。一些表单控件的输入验证、一些JS特效以及Ajax等等,我们都可以用它来实现。Axial现在还封装了jQuery，使我们可以用C#或者VB.NET来使用jQuery。
Axial包含几个服务器控件：
- WFServerScript
- WFScript
- WFValidator
- WFStartupScript
- WFClass
- Canvas
- WFScriptButton
Axial的使用很简单：
1、添加Axial.dll引用，并将其添加到Visual Studio控件工具箱中
2、在后台写相关JavaScript的.NET方法，方法必须为public
using Axial;
using Axial.jQuery;
using Axial.DOM;
namespace AxialWeb
{
public partial class jQueryTest : System.Web.UI.Page
{
public void HtmlTheDivs() {
JQuery.jQuery("div.empty").html("in a div");
JQuery.get("viaajax.txt", "",
(response) => { JQuery.jQuery("div.empty:first").html((string)response); });
JQuery.jQuery("div.notempty").children().html("when two divs love each other very much
");
JQuery.jQuery("div.notempty").children().css("padding", "3px");
JQuery.jQuery("div.notempty").children().each(AlertPadding);
}
public void AlertPadding() {
Window.Alert(JQuery.This.css("padding"));
}
}
}
using Axial.jQuery;
using Axial.DOM;
namespace AxialWeb
{
public partial class jQueryTest : System.Web.UI.Page
{
public void HtmlTheDivs() {
JQuery.jQuery("div.empty").html("in a div");
JQuery.get("viaajax.txt", "",
(response) => { JQuery.jQuery("div.empty:first").html((string)response); });
JQuery.jQuery("div.notempty").children().html("when two divs love each other very much
");JQuery.jQuery("div.notempty").children().css("padding", "3px");
JQuery.jQuery("div.notempty").children().each(AlertPadding);
}
public void AlertPadding() {
Window.Alert(JQuery.This.css("padding"));
}
}
}
3、在前台ASPX页面里拖一个相应的控件，设置MethodName属性
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>jQuery Test</title>
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="empty" style="border: 1px solid red;"></div>
<div class="empty" style="border: 1px solid blue;"></div>
<div class="notempty" style="border: 1px solid green;">
<div style="border: 1px solid purple;"></div>
</div>
<asp:Button runat="server" ID="btnRun" Text="Run" OnClientClick="HtmlTheDivs(); return false;" />
<axial:WFScript runat="server" ID="wfsHTD" MethodName="HtmlTheDivs" />
</form>
</body>
</html>
<head runat="server">
<title>jQuery Test</title>
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="empty" style="border: 1px solid red;"></div>
<div class="empty" style="border: 1px solid blue;"></div>
<div class="notempty" style="border: 1px solid green;">
<div style="border: 1px solid purple;"></div>
</div>
<asp:Button runat="server" ID="btnRun" Text="Run" OnClientClick="HtmlTheDivs(); return false;" />
<axial:WFScript runat="server" ID="wfsHTD" MethodName="HtmlTheDivs" />
</form>
</body>
</html>
下面是自动生成的js代码
<script type="text/javascript">
//<![CDATA[
function HtmlTheDivs()
{
$('div.empty').html('in a div');
if (!null)
$.get('viaajax.txt', '', function(arg0)
{
$('div.empty:first').html();
}
);
$('div.notempty').children().html('when two divs love each other very much');
$('div.notempty').children().css('padding', '3px');
$('div.notempty').children().each(AlertPadding);
}
function AlertPadding()
{
window.alert($(this).css('padding'));
}
//]]>
</script>
//<![CDATA[
function HtmlTheDivs()
{
$('div.empty').html('in a div');
if (!null)
$.get('viaajax.txt', '', function(arg0)
{
$('div.empty:first').html();
}
);
$('div.notempty').children().html('when two divs love each other very much
');$('div.notempty').children().css('padding', '3px');
$('div.notempty').children().each(AlertPadding);
}
function AlertPadding()
{
window.alert($(this).css('padding'));
}
//]]>
</script>
Axial需要.NET Framework 3.5,关于它的详细使用，请到CodePlex下载源代码，里面包含详细的代码示例。
