Here is the sample program Asp.net with Dust.JS:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DustExample.aspx.cs" Inherits="jqueryexamples.DustExample" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/dust-full-1.2.0.js" type="text/javascript"></script>
<script type="text/javascript">
var samples = {
string: {
source: "Hello World!",
context: {}
},
replace: {
source: "Hello {name}! You have {count} new messages and the div has been replaced.",
context: { name: "Anand", count: 10 }
},
array: {
source: "{#names}{name}{/names}",
context: { names: [
{ name: "Moe" },
{ name: "Larry" },
{ name: "Curly" },
{ name: "Shemp" }
]
}
}
}
dustRender = function (id, name) {
var sample = samples[name],
ctx = sample.context;
dust.loadSource(dust.compile(sample.source, name));
dust.render(name, ctx, function (err, out) {
$("#" + id).html("<b>Replaced with:</b> " + out);
});
};
$(document).ready(function () {
$("#button").click(function () {
$("p").html("Paragraph replaced");
$("#jqueryDiv").html("Div replaced by jQuery")
var name1 = $("#commandinput").val()
var name2 = $("#commandselect").val()
dustRender("dustDiv", name1 || name2);
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="dustDiv">This is a div which will be replaced directly by Dust</div>
<div id="jqueryDiv">This is a div which will be replaced directly by jquery</div>
<p>This is a paragraph which will be replaced.</p>
Command: <input type="text" id="commandinput"/><br/>
<select id="commandselect">
<option value="string">String</option>
<option value="replace">Replace</option>
<option value="array">Array</option>
</select><br/>
<button id="button">Execute</button>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DustExample.aspx.cs" Inherits="jqueryexamples.DustExample" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="Scripts/dust-full-1.2.0.js" type="text/javascript"></script>
<script type="text/javascript">
var samples = {
string: {
source: "Hello World!",
context: {}
},
replace: {
source: "Hello {name}! You have {count} new messages and the div has been replaced.",
context: { name: "Anand", count: 10 }
},
array: {
source: "{#names}{name}{/names}",
context: { names: [
{ name: "Moe" },
{ name: "Larry" },
{ name: "Curly" },
{ name: "Shemp" }
]
}
}
}
dustRender = function (id, name) {
var sample = samples[name],
ctx = sample.context;
dust.loadSource(dust.compile(sample.source, name));
dust.render(name, ctx, function (err, out) {
$("#" + id).html("<b>Replaced with:</b> " + out);
});
};
$(document).ready(function () {
$("#button").click(function () {
$("p").html("Paragraph replaced");
$("#jqueryDiv").html("Div replaced by jQuery")
var name1 = $("#commandinput").val()
var name2 = $("#commandselect").val()
dustRender("dustDiv", name1 || name2);
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="dustDiv">This is a div which will be replaced directly by Dust</div>
<div id="jqueryDiv">This is a div which will be replaced directly by jquery</div>
<p>This is a paragraph which will be replaced.</p>
Command: <input type="text" id="commandinput"/><br/>
<select id="commandselect">
<option value="string">String</option>
<option value="replace">Replace</option>
<option value="array">Array</option>
</select><br/>
<button id="button">Execute</button>
</div>
</form>
</body>
</html>
No comments:
Post a Comment