DOTNET: February 2015

Saturday, February 28, 2015

Consuming WCF Service USING jquery/ajax

First, we need to Add New Service as shown below.

Click on Add Button

Iservice.cs

using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService" in both code and config file together.
[ServiceContract]
public interface IService
{
[OperationContract]
void DoWork();

[OperationContract]
[System.ServiceModel.Web.WebInvoke(Method = "POST",
ResponseFormat = System.ServiceModel.Web.WebMessageFormat.Json)]
string GetEmployees(string result);

}

Service.cs

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service : IService
{
public void DoWork()
{
}

public string GetEmployees(string result)
{
List<object> emp = new List<object>();
SqlConnection con = new SqlConnection();
con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "select Firstname,Lastname from emp where " +
"Firstname like @result + '%'";
cmd.Parameters.AddWithValue("@result", result);
cmd.Connection = con;
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
emp.Add(new
{
FirstName = dr["Firstname"],
Lastname = dr["Lastname"]
});
}
con.Close();
return (new JavaScriptSerializer().Serialize(emp));
}

}

Now, the service is ready. and we need to consume the service.

Now, add new form and design the form as shown below

<body>
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input id="btnsearch" type="button" value="Search" />
<div id="results"></div>
</form>

</body>

web.config

<system.serviceModel>
<behaviors>
<serviceBehaviors>
<behavior name="ServiceBehavior">
<serviceMetadata httpGetEnabled="true"/>
<serviceDebug includeExceptionDetailInFaults="true"/>
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behavior name="ServiceAspNetAjaxBehavior">
<enableWebScript />
</behavior>
</endpointBehaviors>
</behaviors>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true"/>
<services>
<service behaviorConfiguration="ServiceBehavior" name="Service">
<endpoint address="" binding="webHttpBinding" contract="IService" behaviorConfiguration="ServiceAspNetAjaxBehavior">
<identity>
<dns value="localhost"/>
</identity>
</endpoint>
<endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
</service>
</services>
</system.serviceModel>

Javascript Code:

<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$("#btnsearch").live("click", function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: '<%=ResolveUrl("~/Service.svc/GetEmployees") %>',
data: '{"result": "' + $("#TextBox1").val() + '"}',
processData: false,
dataType: "json",
success: function (response) {
var employees = eval(response.d);

var html = "";
$.each(customers, function () {
html += "<span>FirstName: " + this.FirstName + " Lastname: " + this.Lastname + "</span><br />";
});
$("#results").html(html == "" ? "No Records Found" : html);
},
error: function (a, b, c) {
alert(a.responseText);
}
});
});

</script>

Here ResolveUrl : will get the application folder Name

Output:

Friday, February 27, 2015

REMAINDER SCHEDULAR ALERT USING JQUERY TIMER

Add the following jquery files

You need to download the following files

<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script src="jquery.timers.js"></script>

<script type="text/javascript">

$(document).everyTime(10000, function (i) {
$.ajax({
type: "POST",
url: "popup.aspx/GetUserInfoData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert("Failure Details : " + response.d);
},
error: function (response) {
alert("Error Details: " + response.d);
}
});
});
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var users = xml.find("Table");
if (users.length >= 1) {
$("#div1").dialog({
title: "Hi Welcome",
width: 600,
height: 400,
modal: true,
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
}
}

</script>

Design:

<body>
<form id="form1" runat="server">
<div>
<div id="div1" style="display: none">
<b>Welcome to this World</b>
</div>
</div>
</form>

</body>

protected void Page_Load(object sender, EventArgs e)
{

}

[WebMethod]
public static string GetUserInfoData()
{

SqlConnection con = new SqlConnection(" ");
SqlCommand cmd = new SqlCommand("select * from fdfd", con);
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
return ds.GetXml();

}

Output:

Wait for 15 seconds, then the pop up will be displayed automatically.

Thursday, February 26, 2015

Test Browser Supports Cookies Are Not

Design the form as follows:

<head runat="server">
<title></title>
<script type="text/javascript">
function checkcookies() {
if (navigator.cookieEnabled)
alert("Cookies are Enabled");
else
alert("Cookies are Disabled");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="checkcookies();" />
</div>
</form>

</body>

Output:

Creating ZIP File

First download the dll Ionic.Zip from the following URL.

https://dotnetzip.codeplex.com/releases/view/68268

And, then add the dll( by Using Add Reference)

Design the form as follows:

<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnFileUpload" runat="server" Text="ZipFile" OnClick="btnFileUpload_Click" />
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
</div>
</form>
</body>

Add, the following Namespace:

using Ionic.Zip;

protected void Page_Load(object sender, EventArgs e)
{

}
protected void btnFileUpload_Click(object sender, EventArgs e)
{
try
{
string FileName = string.Empty;
if (FileUpload1.HasFile)
{
FileName = FileUpload1.FileName;
string path = Server.MapPath("~/Files/" + FileName);
FileUpload1.SaveAs(path);
ZipFile obj = new ZipFile();
obj.AddFile(path);
obj.Save(Server.MapPath("~/Files/File.zip"));
lblMessage.Text = "Upload Successfully";
}
}
catch (Exception)
{
throw;
}

}

output:

Wednesday, February 25, 2015

Gridview using jQuery in ASP.NET

Design the form the as follows:

<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdActivation" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Userid" HeaderText="Userid" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Emailid" HeaderText="Emailid" />
</Columns>
</asp:GridView>
</div>
</form>

</body>

javascript Function:

<script src="jquery-1.7.min.js"></script>

<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "Default9.aspx/GetUserInfoData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert("Failure Details : " + response.d);
},
error: function (response) {
alert("Error Details: " + response.d);
}
});
});

function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var users = xml.find("Table");
var row = $("[id*=grdActivation] tr:last-child").clone(true);
$("[id*=grdActivation] tr").not($("[id*=grdActivation] tr:first-child")).remove();

$.each(users, function () {
$("td", row).eq(0).html($(this).find("Userid").text());
$("td", row).eq(1).html($(this).find("Name").text());
$("td", row).eq(2).html($(this).find("Emailid").text());
$("[id*=grdActivation]").append(row);
row = $("[id*=grdActivation] tr:last-child").clone(true);
});
}

</script>

.cs Page:

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindEmptyRow();
}
}

private void BindEmptyRow()
{
DataTable dt = new DataTable();
dt.Columns.Add("Userid");
dt.Columns.Add("Name");
dt.Columns.Add("Emailid");
dt.Rows.Add();
grdActivation.DataSource = dt;
grdActivation.DataBind();
}

[WebMethod]
public static string GetUserInfoData()
{
SqlConnection con = new SqlConnection("------------");
SqlCommand cmd = new SqlCommand("select * from sdfsf", con);
DataSet ds = new DataSet();
SqlDataAdapter da=new SqlDataAdapter(cmd);
da.Fill(ds);
return ds.GetXml();

}

output:

in case if , you want to apply styles to the rows alternative color than add below lines of javascript code.

var index= 1;
$.each(users, function () {
$("td", row).eq(0).html($(this).find("Userid").text());
$("td", row).eq(1).html($(this).find("Name").text());
$("td", row).eq(2).html($(this).find("Emailid").text());
$("[id*=grdActivation]").append(row);
row = $("[id*=grdActivation] tr:last-child").clone(true);

if index= == 1 || index= % 2 != 0)) {
$(row).css("background-color", "colorcode");
}
else {
$(row).css("background-color", "colorcode");
}
index= index+ 1;
row = $("[id*=grdActivation] tr:last-child").clone(true);
});

CALLING JQUERY CODE FROM SERVER SIDE

Design the form as follows:

<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
</head>

<form id="form1" runat="server">
<div>
<asp:Button ID="btnjquery" runat="server" Text="callingjquerycode" OnClick="btnjquery_Click" />
</div>
</form>

.cs page:

protected void Page_Load(object sender, EventArgs e)
{

}
protected void btnjquery_Click(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder();
sb.Append("$(document).ready(function(){");
sb.Append("alert('hi welcome to this world.');");
sb.Append("});");
Page.ClientScript.RegisterStartupScript(this.GetType(), "Script",sb.ToString(), true);
}

Output:

Tuesday, February 24, 2015

JQUERY TIPS (jQuery selectors)

ID Selector

$(document).ready(function () {
$('#divClassusingID').css('background', '#000567');
});

Code:

<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#divClassusingID').css('background', '#000567');
});
</script>

<div>
<div id="divClassusingID" style="width:400px">
adf
</div>
</div>

Class Selector

$(document).ready(function () {
$('.divClassusingID').css('background', '#000567');
});

Code:

<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.divClassusingID').css('background', '#000567');
});
</script>

<div>
<div class="divClassusingID" style="width:400px">
hi uday
</div>
</div>

Element Selector

$(document).ready(function () {
$('.divClassusingID').css('background', '#000567');
});

Code:

<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('p').css('font-size', '40px');
});
</script>

<div>
<div class="divClassusingID" style="width:400px">
<p> hi uday</p>
</div>
</div>

output:

Apply css to Form Selector

<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('form *').css('color', '#FF99CC');
});
</script>
</head>

<body>
<form id="form1" runat="server">
<div>
<div class="divClassusingID" style="width:400px">
<p> hi uday</p>
adsfasf
</div>
</div>
</form>
</body>

Select Multiple Elements

$('p, div').css('color', '#FF99CC');

It applys css color to paragraph and div

<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('p, div').css('color', '#FF99CC');
});

</script>
</head>

<body>
<form id="form1" runat="server">
<div>
<div class="divClassusingID" style="width:400px">
<p> hi uday</p>
<div> hi uday</div>
</div>
</div>
</form>
</body>

</html>

Output:

The parent > child (immediate child element)

$(document).ready(function () {
$('div > p').css('color', '#FF99CC');

})

It is going to apply styles to paragraph in div.

<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('div > p').css('color', '#FF99CC');
});

</script>
</head>

<body>
<form id="form1" runat="server">
<div class="divClassusingID" style="width:400px">
<p> hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
</div>
<p>hi uday </p>
</form>
</body>

</html>

Output:

:first and :last

:first : It will find the first element.
:last : It will find the last element

<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('p:first').css('color', '#FF99CC');
$('p:last').css('color', '#FF99CC');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="divClassusingID" style="width:400px">
<p> hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
<p>hi uday </p>
</div>
<p>hi uday </p>
</form>
</body>

output:

:even and :odd
Now, i want to find out the even and odd elements.
Here , the index starts with 0.

<head runat="server">
<title></title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('tr:even').css('color', '#FF99CC');
$('tr:odd').css('color', '#0000FF');
});
</script>
</head>

<body>
<form id="form1" runat="server">
<div class="divClassusingID" style="width:400px">
<table>
<tr><td>hi uday</td></tr>
<tr> <td>hi uday</td> </tr>
<tr> <td>hi uday</td> </tr>
<tr><td>hi uday</td> </tr>
<tr><td>hi uday</td></tr>
<tr><td>hi uday</td></tr>
<tr> <td>hi uday</td></tr>
<tr><td>hi uday</td> </tr>
</table>
</div>
</form>

Output:

show and hide methods()

javascript code:

<script type="text/javascript">
$(document).ready(function () {
$('#visibleoncheck').hide();
$('#CheckBox1').live('click', function () {
if ($(this).is(':checked')) {
$('#visibleoncheck').show();

} else {
$('#visibleoncheck').hide();
}
});
});

</script>

<div>
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td>Hi Uday </td>
<td>HI</td>
</tr>
<tr>
<td>Check Required</td>
<td> <asp:CheckBox ID="CheckBox1" runat="server" /></td>
</tr>
<tr id="visibleoncheck">
<td>Visible</td>
<td><asp:Label ID="Label2" runat="server" Text="Visible "></asp:Label></td>
</tr>
</table>

</div>

output:

DOTNET