Rehan Parvez

Friday, February 15, 2013

Calling Web Service using Ajax JQuery

Calling Web Service using Ajax JQuery

Below is Ajax Function Calling Code Behind method for Saving the Data
this 3 StudentId, Date, Status parameter that passing value to code behind

function PopulateData(StudentId, Date, Status) {
var pageUrl = '<%=ResolveUrl("MonthlyAttendence.aspx")%>'
//alert(StudentId + ' , ' + Date);
$.ajax({
type: "POST",
url: pageUrl + '/SaveData',
data: "{ 'StudentID':'" + StudentId + "', Date:'" + Date + "', Status:'" + Status + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnCitiesPopulated,
failure: function (response) {
alert(response.d);
}
});
}

SaveData are Web Method at Code Behide

.cs Page

[WebMethod]
static public string SaveData(string StudentID, string Date, string Status)
{
string[] batch = HttpContext.Current.Session["BatchIds"].ToString().Split(',');
string BatchID;
string[] dt = Date.Split('_');
if (dt[1] == "0") BatchID = batch[0];
else BatchID = dt[1];

Parameter(StudentID, dt[0], Status, BatchID);
return null;
}

Tuesday, February 12, 2013

how to rotate the Control at Mouse hover

how to rotate the Control at Mouse hover

First make Div with followinf property

.rightdiv
{
margin: 5px 0 10px 5px;
border: 1px solid Black;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-transition: width 2s, height 2s, background-color 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s, background-color 2s, -o-transform 2s;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}

Code at Mouse Hover

.rightdiv:hover

{

background-color: Black;

color: White;

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-o-transform: rotate(360deg);

transform: rotate(360deg);

}

Saturday, February 9, 2013

Add image in the gridview and zoom it on click

Here is a sample to show image in the gridview and zoom it on mouse click. The filename of the image and imageurl is placed in the xml file.
Step 1: Create an Image.xml with FileName and ImageURL attribute. This XML will be datasource to gridview.

<?xml version="1.0" encoding="utf-8" ?>
<Images>
            <Image FileName="Suzuki-Swift.jpg"ImageURL="images/Suzuki-Swift.jpg"></Image>
            <Image FileName="Aston_Martin-V12_Vantage_2010.jpg"ImageURL="images/Aston_Martin-V12_Vantage_2010.jpg"></Image>
            <Image FileName="Honda-CR-Z_2011.jpg"ImageURL="images/Honda-CR-Z_2011.jpg"></Image>
            <Image FileName="Hummer-H3_Alpha_2008.jpg"ImageURL="images/Hummer-H3_Alpha_2008.jpg"></Image>
            <Image FileName="Mercedes-Benz-SL63_AMG_2009.jpg" ImageURL="images/Mercedes-Benz-SL63_AMG_2009.jpg"></Image >
            <Image FileName="Seat-Altea_TDI_2005.jpg"ImageURL="images/Seat-Altea_TDI_2005.jpg"></Image>
</Images>
Step 2: Place a gridview in the aspx page with a BoundField and TemplateField.

<asp:GridView ID="gvImage" runat="server"AutoGenerateColumns="false"OnRowDataBound="gvImage_RowDataBound">
            <Columns>
                        <asp:BoundField HeaderText="FileName"DataField="FileName"></asp:BoundField>
                        <asp:TemplateFieldHeaderText="Image">
                                    <ItemTemplate>
                                                <div>
                                                            <asp:ImageID="Image1" Height="80" Width="80" ToolTip="Click to enlarge" runat="server" ImageUrl='<%# Eval("ImageURL") %>' />
                                                </div>
                                                <div id="divImg"runat="server" style ="float: left;">
                                                </div>
                                    </ItemTemplate>
                        </asp:TemplateField>
            </Columns>
            <HeaderStyle HorizontalAlign="Left" Height="0px"BackColor="#880015" ForeColor="#ffffff" Font-Bold="true"Font-Size=".75em" BorderColor="Black"BorderStyle="Solid" BorderWidth="1px" />
            <AlternatingRowStyle BackColor="#eeeeee"/></asp:GridView>
Step 3: Create GetImageData() method to load XML data to GridView.
private void GetImageData()
{
            string xmlImageFilePath = Server.MapPath(@"Image.xml");
            if (File.Exists(xmlImageFilePath))
            {
                        using (DataSet ds = new DataSet())
                        {
                                    ds.ReadXml(xmlImageFilePath);
                                    gvImage.DataSource = ds;
                                    gvImage.DataBind();
                        }
            }
}

Step 4: gvImage_RowDataBound will add onclick javascript event on each image in a cell, on click of image EnlargeImage javascript will be invoked
protected void gvImage_RowDataBound(object sender,GridViewRowEventArgs e)
{
            if (e.Row.RowType ==DataControlRowType.DataRow)
            {
                        HtmlGenericControl divImg = (HtmlGenericControl)e.Row.Cells[1].FindControl("divImg");
                        Image img = (Image)e.Row.Cells[1].FindControl("Image1");
                        img.Attributes.Add("onclick", "return ElargeImage('" + divImg.ClientID + "','" + img.ImageUrl +"');");

         }
}

Step 5: Add EnlargeImage and CloseImage javascript method in the aspx page. EnlargeImage will enlarge the image in the same cell and CloseImage will close enlarged image.

<script language="javascript" type="text/javascript">
            function EnlargeImage(divid, src) {
                        eDiv = document.getElementById(divid);
                        eDiv.innerHTML = "<table><tr><td><a href="#" onclick=CloseImage('" + divid + "');>Close</a></td></tr><tr><td><img src=\"" + src + "\"/ height="500" width="750"></td></tr><tr><td><a href="#" onclick=CloseImage('" + divid + "');>Close</a></td></tr></table>";
            }
            function CloseImage(divid) {
                        eDiv = document.getElementById(divid);
                        eDiv.innerHTML = ';
            }

</script>
Live Demo

Zoom image onmousover using jquery

In this article we will explore how to leverage animate feature of jquery to zoom an image on mouseover. Download jquery fromhttp://jquery.com/

JQuery Zoom Image

Lets see how we can do this.

Step 1: Dowload jquery from the above mentioned url and add it in the head section of the page.

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

Step 2: Add below style in the head section of the page

<style type="text/css">
      .imgThNail
      {
            height: 150px;
            width: 150px;
      }
</style>

Step 3: Add below jquery in the page.

<script type="text/javascript">
      $(function() {
            $("img.imgThNail").mouseover(function(e) {
                  var newImg = '<img src=' + $(this).attr("src") + '></img>';
                  $('#sourceDiv')
                        .html($(newImg)
                        .animate({ height: $(this).width() + 40, width: ($(this).width() + 40) }, 10));
            var left = ($(this).position().left - 20) + "px";
            var top = ($(this).position().top - 20) + "px";
            $("#sourceDiv").css({
                  position: 'absolute',
                  zIndex: 2,
                  left: left,
                  top: top,
                  display: 'block'
            });
      });
      $("#sourceDiv").mouseout(function(e) {
            $("#sourceDiv").css({
                  display: 'none'
                  });
            });
      });
      document.onclick = check;
      function check(e) {
            $("#sourceDiv").css({
                  display: 'none'
            });
      }
</script>

Step 4: Add below images on the page

<div style="padding:40px">
      <asp:Image ID="imgA" class="imgThNail" runat="server" ImageUrl="images/Aston_Martin-V12_Vantage_2010.jpg" />
      <asp:Image ID="imgB" class="imgThNail" runat="server" ImageUrl="images/Hummer-H3_Alpha_2008.jpg" />
      <asp:Image ID="imgC" class="imgThNail" runat="server" ImageUrl="images/Mercedes-Benz-SL63_AMG_2009.jpg" />
      <asp:Image ID="Image1" class="imgThNail" runat="server" ImageUrl="images/Suzuki-Swift.jpg" />
      <div id="sourceDiv" style="display: none; border: Solid 1px White;">
      </div></div>

Live Demo

Rehan Parvez

jQuery-Change image on mouseover

In this article we will explore how to change image on mouse over using jQuery

Let's start writing the example.

Step 1: Add jquery-1.4.2.min.js and style in the header section of the aspx page.

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<style type="text/css">
      .divImage
      {
            width: 576px;
            height: 352px;
            display: block;
            padding-bottom: 20px;
      }

      .imgThNail
      {
            height: 29px;
            width: 47px;
      }
      .span
      {
            padding: 2px;
      }
</style>

Step 2: Add a div with two asp.net image control. First image control will be used to show processing while image is getting loaded. Second image control will be used to load the image.

<div id="bigImage" class="divImage">
      <asp:Image ID="Img1" src="Kizashi/processing.gif" Style="padding-left: 250px; padding-top: 150px;display: none;" runat="server" />
      <asp:Image ID="loadImage" src="Kizashi/2010_suzuki_kizashi_30_2_cd_gallery.jpg" Style="padding-left: 7px;padding-top: 10px;" runat="server" />
</div>

Step 3: Add a div which will contain all the thumbnails. Reduce the size of thumbnail image to load it faster. I have reduced the size of the thumbnail images and postfixed it by "-s".

<div>
      <span>
            <asp:Image ID="imgJ" class="imgThNail" runat="server"ImageUrl="Kizashi/2010_suzuki_kizashi_30_2_cd_gallery-s.jpg" />
      </span><span>
            <asp:Image ID="imgB" class="imgThNail" runat="server"ImageUrl="Kizashi/2010_suzuki_kizashi_13_2_cd_gallery-s.jpg" />
      </span><span>
            <asp:Image ID="imgC" class="imgThNail" runat="server"ImageUrl="Kizashi/2010_suzuki_kizashi_15_2_cd_gallery-s.jpg" />
      </span><span>
            <asp:Image ID="imgD" class="imgThNail" runat="server"ImageUrl="Kizashi/2010_suzuki_kizashi_19_2_cd_gallery-s.jpg" />
      </span><span>
            <asp:Image ID="imgE" class="imgThNail" runat="server"ImageUrl="Kizashi/2010_suzuki_kizashi_2_2_cd_gallery-s.jpg" />
      </span><span>
            <asp:Image ID="imgF" class="imgThNail" runat="server"ImageUrl="Kizashi/2010_suzuki_kizashi_20_2_cd_gallery-s.jpg" />
      </span><span>
            <asp:Image ID="imgG" class="imgThNail" runat="server"ImageUrl="Kizashi/2010_suzuki_kizashi_23_2_cd_gallery-s.jpg" />
      </span>
</div>

Step 4: Add below javascript in the aspx page. Onmouseover i am removing "-s" from the thumbnail image name to load the bigger image which is without "-s"

<script type="text/javascript">
      $(function() {
            $("img.imgThNail").mouseover(function(e) {
                  var imgName = $(this).attr("src").replace("-s", "");
                  $(this).css({
                        border: 'solid 1px red'
                  });

                  $("#loadImage").css({
                        display: 'none'
                  });
                  $("#Img1").css({
                        display: 'block'
                  });
                  $("#loadImage").attr('src', imgName).load(function() {
                        $("#Img1").css({
                              display: 'none'
                        });
                        $("#loadImage").css({
                              display: 'block'
                        });
                  });
            });

            $("img.imgThNail").mouseout(function(e) {
                  $(this).css({
                        border: 'solid 0px red'
                  });
            });
      });
</script>

Live Demo

Uploading N number of files by single upload

In this artilce we will discuss how to upload N number of files by single upload. The batch upload feature comes very handy when you have multiple files to upload and user doesn't want to upload one by one.

Batch File Upload

This artilce is tested in IE and chrome, the dispay of input type file is different in IE and chrome.

Let's see how we can achieve above feature of uploading N number of files by single upload button.

Step 1: Add below lines of code in aspx page.
<div>
      <input type="file" name="attachment" runat="server" id="attachment"onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
      <input type="hidden" value="0" id="fileCount" />
      <div id="fileDiv">
      </div>
      <div id="moreUploadsLink" style="display: none">
            <a href="javascript:addFile();">Attach another File</a>
      </div>
      <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" /></div>

Step 2: Add below javascript in the aspx page, which will give option to add another file and remove file.
<script language='Javascript' type="text/javascript">
      function addFile() {
            var ni = document.getElementById("fileDiv");
            var objFileCount = document.getElementById("fileCount");
            var num = (document.getElementById("fileCount").value - 1) + 2;
            objFileCount.value = num;
            var newdiv = document.createElement("div");
            var divIdName = "file" + num + "Div";
            newdiv.setAttribute("id", divIdName);
            newdiv.innerHTML = '<input type="file" name="attachment" id="attachment"/><a href="#" onclick="javascript:removeFile('+ divIdName + ');">Remove </a>';
            ni.appendChild(newdiv);
      }

      function removeFile(divName) {
            var d = document.getElementById("fileDiv");
      d.removeChild(divName);
}
</script>

Step 3: Add below lines of code in codebehind file.
protected void btnUpload_Click(object sender, EventArgs e)
{
      HttpFileCollection uploadFiles = Request.Files;
      for (int i = 0; i < uploadFiles.Count; i++)
     {
            HttpPostedFile uploadFile = uploadFiles[i];
            string fileName = Path.GetFileName(uploadFile.FileName);
            if (fileName.Trim().Length > 0)
            {
                  uploadFile.SaveAs(Server.MapPath("./Others/") + fileName);
            }
      }
}

Step 4: Add method="post" in the form tag. The post tag is used to get the attached file names from input type file.
   <form id="form1" runat="server" method="post">
Live Demo

This ends the article of uploading N number of files by single upload.
Like us if you find this post useful. Thanks!

Rehan Parvez

Friday, February 8, 2013

how enable textbox using jQuery

how enable or disable textbox and DropdownList using jQuery

function EnableChapter() {
// var isChecked = $(this).prop('checked');
var isChecked = $('#<%=rbNewChapter.ClientID%>'); //.prop('checked');
if (isChecked.attr('checked')) {
$('#<%=ddlChapterName.ClientID%>').attr('disabled', 'disabled');
$('#<%=txtChapterName.ClientID%>').removeAttr("disabled");
}
else {

$('#<%=ddlChapterName.ClientID%>').removeAttr("disabled");
$('#<%=txtChapterName.ClientID%>').attr('disabled', 'disabled');
}