Showing posts with label Ajax Controls. Show all posts
Showing posts with label Ajax Controls. Show all posts

Thursday, January 2, 2014

Labels: , ,

What is jQuery AJAX and JSON? and How we can use it in our asp.net with c# application

Posted by Abhay Makadiya at 1/02/2014 No comments :
In previous article we have discussed How to Call Server Side method form aspx page in asp.net  with C# and How to call jQuery function from code behind in asp.net with C#. Now in this post we will learn basic concept of Jquery Ajax and JSON and how we can use it in our asp.net application.

What Is AJAX?

Asynchronous JavaScript and XML is about Loading data in background and display it on the web page without reloading the hole page. it makes you application very fast because using this technology you can update those parts which is required. right now in asp.net when some event is fired it will load hole page for each post-back, this makes the application lazy, but now we have solution we can use jquery ajax to make simple.

What is jQuery AJAX? 

The jQuery library has a full suite of Ajax capabilities. The functions and methods therein allow us to load data from the server without a browser page refresh. with jQuery Ajax you can request Text, HTML, XML or JSON from remote server using both HTTP GET and POST methods.

Methods of Jquery Ajax

load(URL, data, callback)

load() method is used to load data from server and puts the returned data into selected element
$(selector).load(URL, data, callback)

  • URL - you wish to load 
  • data - it is an optional argument. it is set of key/value pairs to send along with the request.
  • callback - it is a function which is called after the load completed.
    • responceText - Content If Successes
    • statusText- Contains the Status Of the Call
    • XHR- Contains the XMLHttp Request Object

Get(URL, callback)

Get() method is used to get requested data from resources. Its may Return cashes data
$(selector).get(URL, callback)
  • URL - you wish to load
  • callback -  it is a function which is called after the load completed.

post(URL, data, callback)

post() method is used to submit data to a specified resources. post method does not return data
$(selector).post(URL, data, callback)
  • URL - you wish to load
  • data - it is an optional argument. it is set of key/value pairs to send along with the request.
  • callback - it is a function which is called after the load completed.
Example Of POST 
$("button").click(function(){
     $.post("demo_post.asp",
     {
        Name: "ABY"
        City: "Upleta"
     },
     function(data.status){
     alert("Data:"+data+state);
     }); 
   });

$.getJSON()

getJSON function Loads JSON Encoded data from a server using an HTTP get.

ajax()

This method is used to preform asynchronous Ajax Request. This is very useful method it provides all the options.
Name/Value pair for the AJAX 
  • async - A Boolean value indicating whether the request should be handled asynchronous or not. Default Value is True 
  • beforeSend(Xhr) - This function is run before request is send. 
  • cache- Boolean indicate browser should cache the requested pages default is true.
  • complete(Xhr,Status) - A function executed when request finished after success and error functions executed
  • contentType - It is used when sending data to server - Default value is "application/x-www-fam-urlencoded" 
  • context - specifies the "this" values for all AJAX related callback functions.
  • data- use to set data to be sent to the server.
  • dataFilter(data,type) - A function used to handle the raw resources data of the XMLHttpRequest.
  • dataType(data,type) - Datatype which is expected from server response.
  • error(Xhr,status,error) - This function is run when request was fails.
  • ifFinished - Boolean value specifying weather or not to trigger global AJAX event handles for the request default is true.
  • jsonp - A string overriding the callback function in a jsonp request. 
  • jsonCallback - specifies a name for the callback function used in jsonp request.
  • password - specifies a password to be used in an HTTP access authentication request. 
  • processData - a Boolean value specifies weather or not data sent with the request should be transformed into a query string Default value is TRUE.
  • ScriptCharSet - Specifies the charset for the request.
  • Success(request,status,Xhr) - runs when request succeed.
  • timeOut - The local timeout in milliseconds for the request.
  • traditional(Xhr,status,error) - A Boolean value specifies weather or not to use the traditional style of param.
  • serialization type - specifies type of request sent (get/Post).
  • URl(Xhr,status,error) - Send request to current page.
  • username - Specifies username to be in an HTTP access authentication request.
  • xhr - a function used for creating the XML HTTP Request object.

How to use ajax() in asp.net Application with Example

JSON is JavaScript Object Notation. JSON is Light Weight Text Data format it is useful for Interchanging the Data between View and Model. JSON is easy for humans to read and write. it is more like Structures in OOPS. JSON is based on the Object notation of the JavaScript.

JSON does not requied JavaScript to read and write data because JSON is language Independent  and Self Describing format. you can parse the JSON object through built-in function eval().

Basic Elements of JSON.

Objects in JSON are delcared using curly brackets '{', '}'.
Object Members in JSON are separated using ':' .
Arrays In JSON  are declared  using nested blocks

Example of JSON elements:

Objects in JSON are declared in key/value pair here is the example.
{ "Name":"Abhay" }
Array in JSON are declared as per following:
{
"employees": [
{ "firstname":"Abhay" , "lastName":"Makadia" }, 
{ "firstName":"Kashyap" , "lastName":"Pandiya" }, 
{ "firstName":"Nishant" , "lastName":"Kalavadia" }
]
}
Read More

Wednesday, December 11, 2013

Labels: , ,

How to Call C# server side Method from java script in Asp.net with C# using Jquery Ajax and JSON

Posted by Abhay Makadiya at 12/11/2013 No comments :
In previous example we had learn How to call jquery function from code behind in asp.net with C#.
and otherIn this Tutorial we will learn something new which is really helpful for dynamic web applications without loading. There are many situations where we need to do some action in Code behind(C#) without post back. In this type of situation generally we are using Update Panels of course this is suitable when you want to execute a specific control events you can register it with using triggers in Update Panel but when you want to call server side Method from java script then Jquery AJAX is the best approach. It is faster and easier. We can easily improve user experience and performance of web applications by reducing unnecessary post backs.

One of the best things which I like in jQuery is JQuery Ajax functions. this is a way through which we can call server side page's method in java script. This brings so many opportunities we can perform lots of operations without using slow and annoying post backs.

In this post I am showing the basic use of  Jquery AJAX. In this example I am creating a small application in which i am calling one Server side Method from java script with two arguments.

Here is the screening of below web application. Show this image carefully there is no loading sign in browser tab.



Add below Code to aspx page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script type="text/javascript" language="javascript">
$(document).ready(function () {
            $('#<% =Button1.ClientID %>').click(function () {
                
                  $.ajax({
                      type: "POST",
                      url: "WebForm1.aspx/serverMethodHello",
                      data: JSON.stringify({ name: 'Abhay'}),
                      contentType: "application/json; charset=utf-8",
                      dataType: "json",
                      async: true,
                      cache: false,
                      success: function (msg) {
                          $('#myDiv').text(msg.d);
                      },
                      error: function (XMLHttpRequest, textStatus, errorThrown) {
                          var jsonError = JSON.parse(XMLHttpRequest.responseText);
                          alert(jsonError.Message);
                      }
                  })
                return false;
            });
        });

</script>

</head>
<body>
    <form id="form1" runat="server">
        <div class="log"></div>
        <div id="myDiv" style="font-size: x-large; color: saddlebrown; background-color: #C1C1C1">
        </div>
        <br />
        <p>Click This Button To CALL Server Side Method</p>
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </form>

</body>
</html>

Code in C#

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Services;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        [WebMethod]
        public static string serverMethodHello(string name)
        {
            return ("Hello this is server message......."+name);
        }
        
    }
   
}

Read More

Saturday, July 20, 2013

Labels: ,

Dynamically rotating Images after a specific time using Adrotator Control and Ajax Controls in asp.net

Posted by Abhay Makadiya at 7/20/2013 1 comment :

Here in this post we will learn how to use adrotator control of asp.net. i have done one simple demo of adrotator control.

Generally Adrotator control is used in CMS it represents Advertisement Images.When we Click  on particular Image ,We are navigated to new web location as per our requirement.
Here in this demo images are Dynamically rotating in adrotator control after a specific time interval,for that i have used "Timer" Control of Ajax Toolkit.

Here is the most important part Adrotator uses an "XML" file to store the ad information. The XML file must start and end with an <Advertisements> tag. Inside the <Advertisements> tag there may be several <Ad> tags which defines each ad.

In our demo XML is a one of method for storing banner image location. Using XML file you can create unlimited Advertisement image and also formatted them.

Here i want to give you brief introduction about <Ad> tag's child element which we are going to use in our demo.


  1. <ImageUrl> The path to the image file(optional).
  2. <NavigateUrl> The URL to new location where you want to track user, if the user clicks the ad.
  3. <AlternateText> An alternate text for the images(optional).
  4. <Keyword> A category for the ad(optional).
  5. <Impressions> The display rates in percent of the hits(optional).

Here is the Screen Shot How it Works:-


Here is my XML file:-


<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
  <Ad>
    <ImageUrl>~/adimages/images1.jpg</ImageUrl>
    <NavigateUrl>http://sharpaspdeveloper.blogspot.in</NavigateUrl>
    <AlternateText>Mads Logic</AlternateText>
    <Keyword>Asp.net</Keyword>
    <Impressions>Technology</Impressions>
    <Caption>This is the caption for Ad#1</Caption>
  </Ad>

<Ad>
  <ImageUrl>~/adimages/images2.jpg</ImageUrl>
  <NavigateUrl>http://www.google.com</NavigateUrl>
  <AlternateText>www.gtu.ac.net</AlternateText>
  <Keyword>Asp.net</Keyword>
  <Impressions>Web Site</Impressions>
  <Caption>This is the caption for Ad#2</Caption>
</Ad>
  <Ad>
    <ImageUrl>~/adimages/images3.jpg</ImageUrl>
    <NavigateUrl>http://sharpaspdeveloper.blogspot.in</NavigateUrl>
    <AlternateText>click here for ad</AlternateText>
    <Keyword>Asp.net</Keyword>
    <Impressions>Web Site</Impressions>
    <Caption>This is the caption for Ad#2</Caption>
  </Ad>
</Advertisements>


Each time when page will be refreshed at the particular time interval the next Advertisement image will be displayed in Adrotator Control. I have also used Update Panel which is another Ajax control. the role of update pane is that it only updates the content which is in between it means that only that part of web page refreshed,not whole page is reloaded.

Note: you can also use adrotator control without using Update Panel an Timer. In this way the imge will be changed when page is reloaded.

I have Used Trigger of "Updatepanel" Control,It will be fired when interval property of timer is completed.By using Adrortated Control we can easily manage our Advertisement on web page.

There no need for code behind so you can use it for any code behind languages ;

Step for Adding XML File & Image into your Project.


  1. Simply We have to Create One Folder “Image” Store Image that you want to display on banner.
  2. After Doing this You Have Right Click On your Project,then Add -> Add New Item-> XML File and do it as i mentioned above and save it.
  3. Now copy below code and you have done.

Source Code in asp.net:-


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Adrotated.aspx.cs" Inherits="WebApplication1._Default" %>

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:Timer ID="Timer1" runat="server" Interval="3000">
            </asp:Timer>
            <center>
                <asp:UpdatePanel runat="server">
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
                    </Triggers>
                    <ContentTemplate>
                        <asp:AdRotator ID="AdRotator1" runat="server" BorderColor="Azure" Height="100" BorderStyle="Solid"
                            Width="500"
                            AdvertisementFile="~/XMLFile1.xml" KeywordFilter="A" />

                    </ContentTemplate>
                </asp:UpdatePanel>
            </center>


        </div>
    </form>
</body>
</html>



Property Of Adrorated Control :-

  1. ImageUrl:- URL  of particular image Location.& Display Image on the Screen.
  2. NavigateUrl:-Destination Of Particular Web Site URL. & Display Particular Site
  3. AdvertisementFile:- It is a XML file name path.
  4. KeywordFilter:- It Represent limited ad on the control.
  5. AlternateText:- IF Image is Not Display due to some reason then Alternate text will be Display on the Screen.
  6. Height:-It Represent the Height Of Adrorated Control image.
  7. Width:- It Represent The width Of Adrortated Control image.
  8. Runat:- It Represent Server Side Control.
  9. Target:- opened window type:-
         -blank:-Content represent  in new without frame
          -Self:-Content represent  in frames with force.
          -top:- Content represent in full  window without frames.

Note:- AdvertisementFile & Run at are compulsory ,
Remaining are options.

Read More

Saturday, June 8, 2013

Labels: , ,

Insert, Update, Delete in Database through GridView using ModalPopupExtender control of Ajax in ASP.NET with C# - Example

Posted by Abhay Makadiya at 6/08/2013 2 comments :

Introduction:-

Insert, Update, Delete in Database through GridView using ModalPopupExtender control of Ajax in ASP.NET with C# - Example
Introduction:-
              Here I want to provide Insert, Update and Delete Operation in Gridview using ModelPopupExtender Control of Ajax Toolkit 3.0.
when you click on "Edit" link button or "Insert" Button The Popup Window will Open which has proper controls to edit or insert data.
In this case I got requirement to create a gridview with edit and insert operation when user click on edit or insert link button it displays one popup in that popup I have provided interface to edit or insert new record.

To implement this requirement I had created one panel in which I had provided two textboxes to insert or edit data and two buttons to submit changes or cancel. I had given this panel’s id in popup control of ModelPopupExtender.

            


Source Code(in asp.net):-


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Popup.aspx.cs" Inherits="Popup" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>
    <style type="text/css">
        .ModalPopupBG
        {
            background-color: #C0C0C0;
            filter: alpha(opacity=50);
            opacity: 0.7;
        }
        .DetailPopup
        {
            min-width: 200px;
            min-height: 150px;
            background: white;
        }
        .detailpopup1
        {
            font-size: larger;
            font-weight: bold;
            font-style: normal;
            color: #000000;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <asp:HiddenField ID="hid" runat="server" />
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
        ForeColor="#333333" GridLines="None">
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
        <Columns>
            <asp:TemplateField HeaderText="Pid">
                <ItemTemplate>
                    <asp:Label ID="lpid" runat="server" Text='<% #Eval("pid")%>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Name">
                <ItemTemplate>
                    <asp:Label ID="lpname" runat="server" Text='<% #Eval("pname")%>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Description">
                <ItemTemplate>
                    <asp:Label ID="ldes" runat="server" Text='<% #Eval("des")%>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="lbedit" runat="server" OnClick="lbedit_Click">Edit</asp:LinkButton>
                    &nbsp;<asp:LinkButton ID="lbdel" runat="server" OnClick="lbdel_Click">Delete</asp:LinkButton>
                    &nbsp;
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BackColor="#999999" />
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    </asp:GridView>
    <asp:Button ID="bntinsert" runat="server" Text="Insert" OnClick="bntinsert_Click" />
    <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="hid"
        PopupControlID="pan" BehaviorID="bntinsert_Click" PopupDragHandleControlID="PopupHeader"
        Drag="true" BackgroundCssClass="ModalPopupBG">
    </asp:ModalPopupExtender>
    <asp:Panel runat="server" ID="pan">
        <table class="DetailPopup">
            <tr>
                <td colspan="2">
                    <h1>
                        <asp:Label ID="lpopuphead" runat="server" Text=""></asp:Label></h1>
                </td>
            </tr>
            <tr>
                <td>
                    Product Name:-
                </td>
                <td>
                    <asp:TextBox ID="txtpnm" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Plz Enter Product Name"
                        ControlToValidate="txtpnm" ValidationGroup="vpopup"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    Product Description:-
                </td>
                <td>
                    <asp:TextBox ID="txtpdes" runat="server"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Plz Enter Description"
                        ControlToValidate="txtpdes" ValidationGroup="vpopup"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="btnOkay" runat="server" Text="OK" OnClick="btnOkay_Click" ValidationGroup="vpopup" />
                    <asp:Button ID="btnCncle" runat="server" Text="CANCLE" OnClick="btnCncle_Click" />
                </td>
            </tr>
        </table>
    </asp:Panel>
    </form>
</body>
</html>

 Codebehind(in C#):-



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Popup : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            grbind();
        }
    }

    protected void grbind()
    {
        GridView1.DataSource = Data_of_Grid("select * from aby_Productnew");
        GridView1.DataBind();
    }
    protected void lbedit_Click(object sender, EventArgs e)
    {
        LinkButton lb = (LinkButton)sender;
        GridViewRow gr = (GridViewRow)lb.NamingContainer;

        Label lpid1 = (Label)gr.FindControl("lpid");
        hid.Value = lpid1.Text;

        Label lpname1 = (Label)gr.FindControl("lpname");
        txtpnm.Text = lpname1.Text;

        Label ldes1 = (Label)gr.FindControl("ldes");
        txtpdes.Text = ldes1.Text;

        lpopuphead.Text = "Edit Record";
        ModalPopupExtender1.Show();

    }

    protected void lbdel_Click(object sender, EventArgs e)
    {
        LinkButton lb = (LinkButton)sender;
        GridViewRow gr = (GridViewRow)lb.NamingContainer;
        Label lpid1 = (Label)gr.FindControl("lpid");
        Cmd_Non_Query("delete from aby_Productnew where pid=" + lpid1.Text);
        grbind();
    }

    protected void btnOkay_Click(object sender, EventArgs e)
    {
        if (Page.IsValid)
        {
            if (lpopuphead.Text.Equals("Edit Record"))
            {
                Cmd_Non_Query("update aby_Productnew set pname='" + txtpnm.Text + "', des='" + txtpdes.Text + "' where pid=" + hid.Value);
            }
            else
            {
                Cmd_Non_Query("insert into aby_Productnew values('" + txtpnm.Text + "','" + txtpdes.Text + "')");
            }
            grbind();
        }
        clr();
   }

    private void clr()
    {
        lpopuphead.Text = "";
        txtpdes.Text = "";
        txtpnm.Text = "";
    }

    protected void bntinsert_Click(object sender, EventArgs e)
    {
        lpopuphead.Text = "Insert Record";
        ModalPopupExtender1.Show();
    }

    protected void btnCncle_Click(object sender, EventArgs e)
    {
        clr();
        ModalPopupExtender1.Hide();
    }

    public DataTable Data_of_Grid(string q)
    {
        DataTable dt = new DataTable();
        try
        {
           if (con.State == ConnectionState.Closed)
            {
               con.Open();
            }
            SqlCommand cmd = new SqlCommand(q, con);
            SqlDataAdapter sd = new SqlDataAdapter();
            sd.SelectCommand = cmd;
            sd.Fill(dt);
        }
        catch (Exception err)
        {
            //TODO
        }
        finally
        {
            con.Close();
        }
        return dt;
    }

    public void Cmd_Non_Query(string q)
    {
        try
        {
            SqlCommand cmd = new SqlCommand(q, con);
            if (con.State == ConnectionState.Closed)
            {
                con.Open();
            }
            cmd.ExecuteNonQuery();
        }
        catch (Exception err)
        {
        }
        finally
        {
            con.Close();
        }
    }
}
Read More

Friday, April 5, 2013

Labels: , , ,

Nested ModelPopupExtender with GridView in popup and Linq Query is used for Insert,Update Delete in asp.net with c#-Example

Posted by Abhay Makadiya at 4/05/2013 No comments :

Introduction:-

We all have used the ModalPopupExtender and know how it works. It displays a detail part as a model, which means we cannot interact with rest of the part of page except the detail part. But there is a problem in ModalPopupExtender.
When you try to display another ModalPopupExtender on the first one, it does not hide the first ModalPopupExtender. We can interact with the first ModalPopupExtender. Sometimes it spoils the application logic.

That’s why I am solving this problem by a User Control named UpdatePanel . It sets the child model popup on the parent model popup. You can add multiple UpdatePanel controls to set multiple relations between model pops. We can nest many model pop controls to any level.
Here In this Example I used the Nested ModelPopupExtender. In first popup Gridview is opened and for Insert and Update Operation Nested popup will open which has simple textboxes and buttons.

Note:
    - When you use ModelPopupExtender you have to put one button in ModelPopupExtender to close that model popup.
    - I am using Linq for Insert, Update, Delete operations on Database.


click The Button  First Popup Will Open

When you click on Edit Link Button or Insert Button then next Popup will open


Source Code(in asp.net):-


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Popup.aspx.cs" Inherits="Popup" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>
    <style type="text/css">
        .ModalPopupBG
        {
            background-color: #C0C0C0;
            filter: alpha(opacity=50);
            opacity: 0.7;
        }
        .DetailPopup
        {
            min-width: 200px;
            min-height: 150px;
            background: white;
        }
        .detailpopup1
        {
            font-size: larger;
            font-weight: bold;
            font-style: normal;
            color: #000000;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <asp:Button ID="btnMain" runat="server" Text="Click me to View" />
    <asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="btnMain"
        PopupControlID="Mainpan" CancelControlID="btnMainCancle" Drag="true" BackgroundCssClass="ModalPopupBG">
    </asp:ModalPopupExtender>
    <asp:Panel ID="Mainpan" runat="server">
        <asp:UpdatePanel ID="updateParent" runat="Server">
            <ContentTemplate>
                <asp:HiddenField ID="hid" runat="server" />
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
                    ForeColor="#333333" GridLines="None">
                    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                    <Columns>
                        <asp:TemplateField HeaderText="Pid">
                            <ItemTemplate>
                                <asp:Label ID="lpid" runat="server" Text='<% #Eval("pid")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Name">
                            <ItemTemplate>
                                <asp:Label ID="lpname" runat="server" Text='<% #Eval("pname")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Description">
                            <ItemTemplate>
                                <asp:Label ID="ldes" runat="server" Text='<% #Eval("des")%>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:LinkButton ID="lbedit" runat="server" OnClick="lbedit_Click">Edit</asp:LinkButton>
                                &nbsp;<asp:LinkButton ID="lbdel" runat="server" OnClick="lbdel_Click">Delete</asp:LinkButton>
                                &nbsp;
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                    <EditRowStyle BackColor="#999999" />
                    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                </asp:GridView>
                <asp:Button ID="bntinsert" runat="server" Text="Insert" OnClick="bntinsert_Click" />
                <asp:Button ID="btnMainCancle" runat="server" Text="Cancle" OnClick="btnMainCancle_Click" />
                <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="hid"
                    PopupControlID="pan" BehaviorID="bntinsert_Click" PopupDragHandleControlID="PopupHeader"
                    Drag="true" BackgroundCssClass="ModalPopupBG">
                </asp:ModalPopupExtender>
                <asp:Panel runat="server" ID="pan">
                    <table class="DetailPopup">
                        <tr>
                            <td colspan="2">
                                <h1>
                                    <asp:Label ID="lpopuphead" runat="server" Text=""></asp:Label></h1>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Product Name:-
                            </td>
                            <td>
                                <asp:TextBox ID="txtpnm" runat="server"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Plz Enter Product Name"
                                    ControlToValidate="txtpnm" ValidationGroup="vpopup"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                Product Description:-
                            </td>
                            <td>
                                <asp:TextBox ID="txtpdes" runat="server"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Plz Enter Description"
                                    ControlToValidate="txtpdes" ValidationGroup="vpopup"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Button ID="btnOkay" runat="server" Text="OK" OnClick="btnOkay_Click" ValidationGroup="vpopup" />
                                <asp:Button ID="btnCncle" runat="server" Text="CANCLE" OnClick="btnCncle_Click" />
                            </td>
                        </tr>
                    </table>
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Panel>
    </form>
</body>
</html>

Code Behind(in C#):- 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Popup : System.Web.UI.Page
{
    DataClassesDataContext dc = new DataClassesDataContext();
    
    SqlFun.SqlFun sqlobj = new SqlFun.SqlFun();
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            grbind();               
        }
    }
    protected void grbind()
    {
       
        GridView1.DataSource = dc.aby_Productnews;
        GridView1.DataBind();
    }
     
    protected void lbedit_Click(object sender, EventArgs e)
    {
        LinkButton lb=(LinkButton)sender;
        GridViewRow gr = (GridViewRow)lb.NamingContainer;
        

        Label lpid1 = (Label)gr.FindControl("lpid");
        hid.Value=lpid1.Text;
        Label lpname1 = (Label)gr.FindControl("lpname");
        txtpnm.Text = lpname1.Text;

        Label ldes1 = (Label)gr.FindControl("ldes");
        txtpdes.Text = ldes1.Text;


       lpopuphead.Text = "Edit Record";
        ModalPopupExtender1.Show();
        
    }
    protected void lbdel_Click(object sender, EventArgs e)
    {
        LinkButton lb = (LinkButton)sender;
        GridViewRow gr = (GridViewRow)lb.NamingContainer;

       Label lpid1 = (Label)gr.FindControl("lpid");

        //sqlobj.Cmd_Non_Query("delete from aby_Productnew where pid=" + lpid1.Text);
        grbind();
    
       
    }
    protected void btnOkay_Click(object sender, EventArgs e)
    {
        if (Page.IsValid)
        {
            if (lpopuphead.Text.Equals("Edit Record"))
            {
                aby_Productnew urec = dc.aby_Productnews.Single(u=>u.pid==Convert.ToInt32(hid.Value));
                urec.pname = txtpnm.Text;
                urec.des = txtpdes.Text;
                dc.SubmitChanges();

                //sqlobj.Cmd_Non_Query("update aby_Productnew set pname='" + txtpnm.Text + "', des='" + txtpdes.Text + "' where pid=" + hid.Value);
            }
            else
            {
                aby_Productnew abrec = new aby_Productnew();
               abrec.pname = txtpnm.Text;
                abrec.des = txtpdes.Text;
                dc.aby_Productnews.InsertOnSubmit(abrec);
                dc.SubmitChanges();
                //sqlobj.Cmd_Non_Query("insert into aby_Productnew values('" + txtpnm.Text + "','" + txtpdes.Text + "')");
            }
                grbind();
        }
        clr();
    }
    private void clr()
    {
        lpopuphead.Text = "";
        txtpdes.Text = "";
        txtpnm.Text = "";
    }
    protected void bntinsert_Click(object sender, EventArgs e)
    {
        lpopuphead.Text = "Insert Record";
        ModalPopupExtender1.Show();
    }
    protected void btnCncle_Click(object sender, EventArgs e)
    {
        clr();
        ModalPopupExtender1.Hide();        
    }
    protected void btnMainCancle_Click(object sender, EventArgs e)
    {
        ModalPopupExtender2.Hide();
    }

}
Read More

Friday, March 22, 2013

Labels: ,

FilteredTextBoxExtender control of Ajax in ASP.NET with C# - Example

Posted by Abhay Makadiya at 3/22/2013 No comments :

Introduction:- 

                 This control is used to filter text and provide restrictions on text box. User can only enter what you want. In below Example I had Provided the 4 Text-Boxes.
  1. Only Digits are allowed.
  2. Only Lowercase Letters are allowed.      
  3. Only Math symbols and Numbers are allowed.
  4. Digits are not allowed .

Source Code (In asp.net):-




<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<html>
<head>
    <title></title>
</head>
<body>
    <form id="Form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </ajaxToolkit:ToolkitScriptManager>
    <div class="demoarea">
        <div class="demoheading">
            FilteredTextBox Demonstration</div>
        <table border="0">
            <tr>
                <td>
                    Only digits are allowed here:
                </td>
                <td>
                    <asp:TextBox ID="TextBox1" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    Only lower-case letters are allowed here:
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    Only math symbols (+,-,*,/,=,.) and numbers:
                </td>
                <td>
                    <asp:TextBox ID="TextBox3" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    No digits allowed in this textbox:
                </td>
                <td>
                    <asp:TextBox ID="TextBox4" runat="server" />
                </td>
            </tr>
        </table>
        <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server"
            TargetControlID="TextBox1" FilterType="Numbers" />
        <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender2" runat="server"
            TargetControlID="TextBox2" FilterType="LowercaseLetters" />
        <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender3" runat="server"
            TargetControlID="TextBox3" FilterType="Custom, Numbers" ValidChars="+-=/*()." />
        <ajaxToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender4" runat="server"
            TargetControlID="TextBox4" FilterType="Custom" FilterMode="InvalidChars" InvalidChars="1234567890" />
    </div>
    </form>
</body>
</html>
Read More

Wednesday, March 13, 2013

Labels: ,

How to Creat A Menu using HoverMenuExtender in asp.net with c# - Example

Posted by Abhay Makadiya at 3/13/2013 2 comments :

Introduction:-

The Hover Menu Extender is an Ajax control which popups when the mouse moves over the control. This popup is one type of container control with visibility as hidden and contains some another controls to display in popups. So I have created one simple Hover Menu on LinkButton on mouse over it shows one list of hyperlink in popup.
  
    -TargetControlID - The control that the extender is targeting. When the mouse cursor is over this control, the hover menu popup will be displayed.
   
    -PopupControlID - The ID of the control to display when mouse is over the target control. In this case, it's just a simple panel with list of linkbutton
   
    -HoverCssClass - The CSS class to apply to the target when the hover menu popup is visible.
   
    -PopupPostion - Where the popup should be positioned relative to the target control. Can be Left (Default), Right, Top, Bottom, Center.
   
    -OffsetX/OffsetY - The number of pixels to offset the Popup from it's default position, as specified by
Popup Position. So if you want it to popup to the left of the target and have a 5px space between the popup and the target, the value should be "-5".
   
    -HoverDelay - The time, in milliseconds, before the popup displays after hovering over the target control. Default is 0.
   
    -PopDelay - The time, in milliseconds, for the popup to remain visible after the mouse moves away from the target control. Default is 100.


Source Code: (in asp.net):-


<%@ page language="C#" autoeventwireup="true" codefile="hvmenu.aspx.cs" inherits="hvmenu" %>

<%@ register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:toolkitscriptmanager id="ToolkitScriptManager1" runat="server">

                    </asp:toolkitscriptmanager>
        <asp:label id="Label1" runat="server" text="Plz take mouse over me"></asp:label>
        <asp:panel id="pan" runat="server">
             <asp:LinkButton ID="LinkButton1" runat="server">Link 1</asp:LinkButton><br />
            <asp:LinkButton ID="LinkButton2" runat="server">Link 2</asp:LinkButton><br />
            <asp:LinkButton ID="LinkButton3" runat="server">Link 3</asp:LinkButton><br />
            <asp:LinkButton ID="LinkButton4" runat="server">Link 4</asp:LinkButton><br />
            <asp:LinkButton ID="LinkButton5" runat="server">Link 5</asp:LinkButton>
        </asp:panel>
        <asp:hovermenuextender id="Label1_HoverMenuExtender" runat="server" dynamicservicepath=""
            enabled="True" offsetx="10" offsety="20" targetcontrolid="Label1" popupcontrolid="pan">
           
        </asp:hovermenuextender>
    </div>
    </form>
</body>
</html>
Read More
Subscribe to: Posts ( Atom )