.NET 4.0 is a premiere software development framework that is used for building enterprise applications delivered to end users. Combined together with HTML 5 /JavaScript/JQuery and CSS, the .NET SDK along with its rich support for web application development, offers a top of the line web application development environment.
As promised in last blog I am going to write some syntax/code snippet and architecture flow.
In above architecture we will avoid server side control,we will use client side scripting to give same look and feel.
As per our architecture user first make request from web page on server,so let's see how we will design webpage.
As I mentioned in architecture we will be using HTML5 to design webpage.
there are tags in HTML5 which is being commonly used like:
<header>
<footer>
<section>
<article>
<nav>
<aside>
<progress>
<time>
Now let's see the code snippet by implementing few of them.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Dummy Page</title>
<link href="../Styles/main/style.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/Jquery/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../Scripts/PageJS/page.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<section>
<div ></div>
<header>
<div >
<a id="header1" ><img src="../Images/img1.png"/></a>
</div>
<h1 ><a id="homeLink" href="Home.html">Home</a></h1>
<div id="logindiv">
<a id="loginLink" href="javascript:;">Login</a><br><a><span id="welcomelabel" ></span></a><br><br/>
</div>
<nav id="navdiv">
<ul>
<li><a id="Menu1" href="menu1.html">Menu1 </a></li>
<li><a id="Menu2" href="Menu2.html">Menu2</a></li>
<li><a id="Menu3" href="Menu3.html">Menu3</a></li>
<li><a id="Menu4" href="Menu4.html">Menu4</a></li>
</ul>
</nav>
<div id="divUserWelcomeName" >
<a id="welcomeLoginLink" href="javascript:;"></a>
</div>
<div id="divDetail" style="display:none;" >
<ul>
<li><span id="headerUserEmail" href="javascript:;"></span>
<li><a id="resetpwdlink" href="#divResetPassword">Change Password</a>
<li><a id="headerUserPrivacy" href="javascript:;">Privacy</a>
<li><a id="headerAdminHome" href="javascript:;"></a>
<li><a id="headerLogout" href="javascript:;">Logout</a></li>
</ul>
</div>
</header>
<article id="content">
<div >
<h2 ><span>Feedback </span>Form </h2>
<div >
<form name="post_conversation_form" id="post_conversation_form" action="" method="get" class="niceform">
<table border="0" cellspacing="0" cellpadding="0" width="900"
>
<tr>
<td ></td>
<td class="indicates"><span class="star">*</span> Indicates required field.</td>
</tr>
<tr>
<td ><span class="star">*</span>Title:</td>
<td ><input name="conv_title" id="conv_title" type="text" value=""
maxlength="150" />
<label class="error" for="title" id="title_error" style="display:none;">Please enter a title.</label></td>
</tr>
<tr>
<td style="vertical-align: top"><span >*</span>Location:</td>
<td>
<div style="float:left;">
<select size="1" name="select_Location" id="select_Location"
style="width:374px;color:#7e7e7b; font-size: 14px; " >
<option value="---Select your Location---" selected="selected">---Select your Location---</option>
</select>
</div>
<label class="error" for="Location" id="Location_error" style="display:none;"> Please select a Location.</label>
</td>
</tr>
<tr>
<td style="vertical-align:top;">Comment:</td>
<td><textarea maxlength="2000" rows="" cols="" name="txtComment" id="txtComment"
class="text-box"></textarea>
<label class="error" for="Comment" id="Comment_error" style="display:none;">Please enter a Comment.</label>
<div>
<label class="" style="display:inline-block; font-size:10px; padding-left: 2px;float:left;"></label>
<span style="padding-right: 175px;">Characters left: <span id="counterCount">2000</span></span>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<input name="agree" id="agree" type="checkbox" checked="checked" value="agree" onclick="EnablePost();"/>
I accept and agree all terms and condition
</td>
</tr>
<tr>
<td></td>
<td>
<input id="post_feedback" name="post_feedback" type="button" value="Post feedback"
onclick="Submitfeedback();return false;" />
</td>
</tr>
</table>
</form>
</div>
</div>
</article>
<footer>
<div >Copyright © 2012 <strong ><a href="javascript:;" id="lnk">Rajesh Jha</a></strong> All rights reserved</div><div ><a href="javascript:;" id="lnkPrivacy" >Privacy Policy</a> | <a href="javascript:;" id="lnktnc">Terms and Conditions</a> | <a href="javascript:;" id="lnkAgreement">Registered User Agreement</a> | <a id="lnkContact" href="mailto:raj.kj@hotmail.com">Contact Us</a></div><div class="clear"></div>
</footer>
</section>
</div>
<div>
<h2>
Thanks for sending your feedback</h2>
</div>
</body>
</html>
Now we can write Page.js which will have all logic of data rendering in UI and sending ajax call of WCF REST.
So here this page.js play a crucial role in which we can write ajax call like below:
This call is to fetch the data
var
countryURL = "/application/service/getcountry";
function FillCountry() {
$.ajax({
url: countryURL,
type: "GET",
contentType: "application/json",
dataType: "json",
success: function (data) {
var
countryName = '';
var
countryId = '';
var selectOptions = '';
var jsonData = data.Get
countryListResult;
$.each(jsonData, function (index, item) {
countryName = item.CountryName;
countryId = item.CountryId;
selectOptions = '<option value="' +
countryId + '">' +
countryName + '</option>';
$('#select_country').append(selectOptions);
});
}
});
}
Similer kind of ajax call can be used to insert the data.
Now from here the URI which has been used to in ajax URL value,will trigger the WCF REST call.This is WCF function which lies in class of service layer of architecture.
The code of that service method is below which actually represent that URI.
/// <summary>
/// This method get the Country list. This service allow the user to choose json request format.
/// </summary>
/// <returns>List of object of type <see cref=Country"/></returns>
[WebInvoke(Method = "GET",
ResponseFormat = WebMessageFormat.Json,
BodyStyle = WebMessageBodyStyle.Wrapped,
UriTemplate = "
getcountry ")]
public List<Country> GetCountryList()
{
return ServiceManager.GetCountryList();
}
Now the "ServiceManager" class from above code snippet represents Business Layer class and Country is object layer class.
Now the question is that how URI understand the particuler method of service class,for that we have mapping in ROUTETABLE in global.asax.
The code is below for same.
RouteTable.Routes.Add(new ServiceRoute("service", new WebServiceHostFactory(), typeof(ServiceClass)));
Comments
Post a Comment
Please post your comments