Tuesday, 14 April 2015

Home » Archives for April 2015

insert update delete using ajax asp.net

No comments
Reference Codingfusion.com



Database

Id           int   
Name    varchar(50)   
Email    varchar(50)   
Age       nchar(10)   


Than import jquery plugin or add javascript src in head.

for offline :- HERE
for online:-
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

Edit/Delete Image


.CSS

<style type="text/css">
  body
        {
            font-family: Verdana;
            font-size: 11px;
        }
       
       .errmsg,.errmsgpop
        {
            width: 200px;
            text-align: left;
            color: yellow;
            font: 12px arial;
            background: red;
            padding: 5px;
            display: none;
        }
       
        #tblResult
        {
            border-collapse: collapse;
        }
        #tblResult td
        {
            padding: 5px;
            border: 1px solid red;
        }
        #tblResult th
        {
            padding: 5px;
            border: 1px solid red;
        }
    </style>

BODY


<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <table class="style1">
        <tr>
            <td colspan="3">
                <div class="errmsg">
                </div>              
            </td>
        </tr>
        <tr>
            <td class="style2">
                <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtname" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style2">
                <asp:Label ID="Label2" runat="server" Text="Email"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtmail" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style2">
                <asp:Label ID="Label3" runat="server" Text="Age"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtage" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style2">
            </td>
            <td>
                <input type="button" value="Submit" title="Submit" id="btnsubmit" onclick="saveData()" />             
                <asp:HiddenField ID="hiddn" runat="server" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="allData">
                </div>
            </td>
        </tr>
    </table>


 <%--popup --%>

    <div id="pop" title="Update Data">
        <p>
            <table class="style1" style="display: none" id="tblpop">
                <tr>
                    <td colspan="3">
                        <div class="errmsgpop">
                        </div>
                        <br />
                        <br />
                    </td>
                </tr>
                <tr>
                    <td class="style2">
                        <asp:Label ID="Label4" runat="server" Text="Name"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="nametxt" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="style2">
                        <asp:Label ID="Label5" runat="server" Text="Email"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="mailtxt" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="style2">
                        <asp:Label ID="Label6" runat="server" Text="Age"></asp:Label>
                    </td>
                    <td>
                        <asp:TextBox ID="agetxt" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="style2">
                        &nbsp;
                    </td>
                    <td>
                        <input type="button" value="Update" title="Update" id="btnupp" onclick="updateData()" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div id="Div1">
                        </div>
                    </td>
                </tr>
            </table>
        </p>
    </div>

</asp:Content>

Important NameSpace


using System.Web.Services;
using System.Web.Script.Serialization;

FOR INSERTING DATA(saveData)

.CS


[WebMethod]
    public static int saveData(string name, string email, string age)
    {
        string data = string.Empty;
        using (SqlConnection con = new SqlConnection("connectionstring"))
        {
            using (SqlCommand cmd = new SqlCommand("insert into Jquery_Test(Name,Email,Age) output INSERTED.Id values(@name,@email,@age)", con))
            {
                con.Open();
                cmd.Parameters.AddWithValue("@name", name);
                cmd.Parameters.AddWithValue("@age", age);
                cmd.Parameters.AddWithValue("@email", email);
                int i = (int)cmd.ExecuteScalar();
                con.Close();
                return i;
            }
        }
    }

JQUERY



 function saveData() {
            var count = validateData();
            if (count == 0) {

                var name = $('#MainContent_txtname').val();
                var age = $('#MainContent_txtage').val();
                var email = $('#MainContent_txtmail').val();

                $.ajax({
                    type: "POST",
                    url: "Ajx_insrt_updt.aspx/saveData",
                    data: "{name:'" + name + "',age:'" + age + "',email:'" + email + "'}",
                    contentType: "application/json;context=utf-8",
                    datatype: "jsondata",
                    success: function (response) {
                        var msg = eval('(' + response.d + ')');
                        if (msg > 0) {
                            $('.errmsg ul').remove();
                            $('.errmsg').append("<ul><li>Data Inserted Sucessfully</li></ul>");
                            $('.errmsg').slideDown("slow");
                            clear();
                            bindData();
                        }
                        else {
                            $('.errmsg').append("<ul><li>Error Occured</li></ul>");
                        }
                    },
                    error: function (response) {
                        alert('Error');
                    }
                });
            }
        }

Binding Data To Table(bindData)

.CS


 [WebMethod]
    public static string bindData()
    {
        string data = string.Empty;
        using (SqlConnection con = new SqlConnection("connectionstring"))
        {
            using (SqlCommand cmd = new SqlCommand("select * from Jquery_Test", con))
            {
                con.Open();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                DataTable dt = new DataTable();
                da.Fill(dt);
                List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
                Dictionary<string, object> dict;
                foreach (DataRow dr in dt.Rows)
                {
                    dict = new Dictionary<string, object>();
                    foreach (DataColumn dc in dt.Columns)
                    {
                        dict.Add(dc.ColumnName, dr[dc]);
                    }
                    list.Add(dict);
                }
                JavaScriptSerializer json = new JavaScriptSerializer();
                data = json.Serialize(list);
            }
        }
        return data;

JQUERY

  function bindData() {
            $.ajax({
                type: "POST",
                url: "Ajx_insrt_updt.aspx/bindData",
                data: "{}",
                contentType: "application/json;context=utf-8",
                datatype: "jsondata",
                async: "true",
                success: function (response) {
                    var msg = eval('(' + response.d + ')');
                    if ($('#tblResult').length != 0) {
                        $('#tblResult').remove();
                    }

                    var table = "<table id='tblResult' class='tblResult'><thead><tr><th>Name</th><th>Email</th><th>Age</th><th>Action</th></tr></thead><tbody>";
                    for (var i = 0; i <= (msg.length - 1); i++) {
                        var data = "<tr>"
                        data += '<td>' + msg[i].Name + '</td>';
                        data += '<td>' + msg[i].Email + '</td>';
                        data += '<td>' + msg[i].Age + '</td>';
                        data += '<td><img src="edit.png" title="Edit Data" onclick="editData(' + msg[i].Id + ')"/><img src="delete.png" title="Delete Data" onclick="deleteData(' + msg[i].Id + ')"/></td>';
                        data += '</tr>'
                        table += data;
                    }
                    table += '</tbody></table>';
                    $('#allData').html(table);
                    $('#allData').slideDown("slow");
                },
                error: function (response) {
                    alert('error');
                }
            });
        }

Editing Data(editData).CS

 [WebMethod]
    public static string editData(int id)
    {
        string data = string.Empty;
        using (SqlConnection con = new SqlConnection("connectionstring"))
        {
            using (SqlCommand cmd = new SqlCommand("select * from Jquery_Test where id=@id", con))
            {
                con.Open();
                cmd.Parameters.AddWithValue("@id", id);
                DataTable dt = new DataTable();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.Fill(dt);
                con.Close();
                List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
                Dictionary<string, object> dict;
                foreach (DataRow dr in dt.Rows)
                {
                    dict = new Dictionary<string, object>();
                    foreach (DataColumn dc in dt.Columns)
                    {
                        dict.Add(dc.ColumnName, dr[dc]);
                    }
                    list.Add(dict);
                }
                JavaScriptSerializer json = new JavaScriptSerializer();
                data = json.Serialize(list);
                string x = data.Remove(0, 1);
                data = x.Remove(x.Length - 1);
            }
        }
        return data;
    }


JQUERY

function editData(id) {

//For Opening Popup while edit data

  $(document).ready(function () {
                $("#pop").dialog({ autoOpen: false });
                $("#pop").dialog("open");
                $("#tblpop").css('display', 'block');
            });
            $.ajax({
                type: "POST",
                url: "Ajx_insrt_updt.aspx/editData",
                data: "{id:'" + id + "'}",
                contentType: "application/json;context=utf-8",
                datatype: "jsondata",
                async: "true",
                success: function (response) {
                    var msg = eval('(' + response.d + ')');

                    $('#MainContent_nametxt').val(msg.Name);
                    $('#MainContent_agetxt').val(msg.Age);
                    $('#MainContent_mailtxt').val(msg.Email);                
                    $('#MainContent_hiddn').val(id);
                    $('#btnsubmit').hide();
                    $('#btnUpdate').css('display', 'block');
                },
                error: function (response) {
                    alert('error');
                }
            });
        }

Updating Data(updateData)

.CS

 [WebMethod]
    public static int updateData(string name, string email, string age, int id)
    {
        int status = 0;
        using (SqlConnection con = new SqlConnection("connectionstring"))
        {
            using (SqlCommand cmd = new SqlCommand("update Jquery_Test set name=@name,email=@email,age=@age where id=@id", con))
            {
                con.Open();
                cmd.Parameters.AddWithValue("@name", name);
                cmd.Parameters.AddWithValue("@email", email);
                cmd.Parameters.AddWithValue("@age", age);
                cmd.Parameters.AddWithValue("@id", id);
                cmd.ExecuteNonQuery();
                con.Close();
                status = id;
            }
        }
        return status;
    }

JQUERY

  function updateData() {
            var validate = validatePopup();
            if (validate == 0) {

                var txtname = $('#MainContent_nametxt').val();
                var txtmaeil = $('#MainContent_mailtxt').val();
                var txtage = $('#MainContent_agetxt').val();             
                var id = $('#MainContent_hiddn').val();
                $.ajax({
                    type: "POST",
                    url: "Ajx_insrt_updt.aspx/updateData",
                    data: "{name:'" + txtname + "',email:'" + txtmaeil + "',age:'" + txtage + "',id:'" + id + "'}",
                    contentType: "application/json;context=utf-8",
                    datatype: "jsondata",
                    success: function (response) {
                        $('.errmsg ul').remove();
                        var msg = eval('(' + response.d + ')');
                        if (msg > 0) {
                            bindData();                           
                            $('.errmsg').append("<ul><li>Data Updated Sucessfully</li></ul>");
                            $('.errmsg').fadeTo(1000, 1).fadeOut(3000);
                            clear();
//hiding popup
                            $("#tblpop").css('display', 'none');
                            $("#hello").dialog({ autoOpen: false });
                            $("#hello").dialog("close");
                        }
                        else {
                            $('.errmsg').append("<ul><li>SOmething went wrong</li></ul>");
                        }
                    },
                    error: function (response) {
                        alert('error');
                    }
                });
            }
        }


Deleting Data(deleteData)

.CS

 [WebMethod]

    public static void deleteData(int id)
    {       
        using (SqlConnection con = new SqlConnection("connetionstring"))
        {
            using (SqlCommand cmd = new SqlCommand("delete from Jquery_Test where id=@id", con))
            {
                con.Open();               
                cmd.Parameters.AddWithValue("@id", id);
                cmd.ExecuteNonQuery();
                con.Close();       
            }
        }       
    }

JQUERY

 function deleteData(id) {
            if (confirm('are you sure wants to delete') == true) {
                $.ajax({
                    type: "POST",
                    url: "Ajx_insrt_updt.aspx/deleteData",
                    data: "{id:'" + id + "'}",
                    contentType: "application/json;context=utf-8",
                    datatype: "jsondata",
                    success: function (response) {
                        bindData();
                        $('.errmsg ul').remove();
                        $('.errmsg').append("<ul><li>data deleted successfully</li></ul>");
                        $('.errmsg').slideDown("slow");
                        clear();
                    },
                    error: function (response) {
                        alert('error in updating data');
                    }

                });
            }

            else {
                return false;
            }
        }

For clearing and binding data(at loading time)

JQUERY

 $(document).ready(function () {
            bindData();
        });//for clearing data
        function clear() {
            $('#MainContent_txtname').val("");
            $('#MainContent_txtage').val("");
            $('#MainContent_txtmail').val("");
          

            $('#MainContent_nametxt').val("");
            $('#MainContent_mailage').val("");
            $('#MainContent_mailtxt').val("");
            $('.errmsgpop ul').remove()       //for validating data

   function validateData() {
            var name = $('#MainContent_txtname').val();
            var age = $('#MainContent_txtage').val();
            var email = $('#MainContent_txtmail').val();
            var count = 0
            var errmsg = '';
            if (name.length <= 0) {
                count++;
                errmsg += "<li>Please enter name</li>";
            }
            if (age.length <= 0) {
                count++;
                errmsg += "<li>Please enter age</li>";
            }
            if (email.length <= 0) {
                count++;
                errmsg += "<li>Please enter mail</li>";
            }
            if (count > 0) {
                $('.errmsg ul').remove();
                $('.errmsg').append("<ul>" + errmsg + "</ul>");
                $('.errmsg  ').slideDown("slow");
            }
            return count;
        }


        function validatePopup() {

            var name = $('#MainContent_nametxt').val();
            var age = $('#MainContent_agetxt').val();
            var email = $('#MainContent_mailtxt').val();
            var count = 0
            var errmsg = '';
            if (name.length <= 0) {
                count++;
                errmsg += "<li>Please enter name</li>";
            }
            if (age.length <= 0) {
                count++;
                errmsg += "<li>Please enter age</li>";
            }
            if (email.length <= 0) {
                count++;
                errmsg += "<li>Please enter mail</li>";
            }
            if (count > 0) {
                $('.errmsgpop ul').remove();
                $('.errmsgpop').append("<ul>" + errmsg + "</ul>");
                //$('.errmsgpop').fadeTo(1000, 1).fadeOut(8000);
                $('.errmsgpop').slideDown("slow");
            }
            return count;
        }
        }
read more

Saturday, 4 April 2015

Home » Archives for April 2015

Using XML as Database Rather Than Dataset

No comments
<?xml version="1.0" standalone="yes"?>

<xs:schema id="NewDataSet" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">

  <xs:element name="NewDataSet" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">

    <xs:complexType>

      <xs:choice minOccurs="0" maxOccurs="unbounded">

        <xs:element name="Table">

          <xs:complexType>

            <xs:sequence>          

              <xs:element name="InqId" type="xs:int" minOccurs="0" />     

              <xs:element name="APPName" type="xs:string" minOccurs="0" />

            </xs:sequence>

          </xs:complexType>

        </xs:element>

      </xs:choice>

    </xs:complexType>

  </xs:element>

</xs:schema>
read more
Home » Archives for April 2015

Ajax for calling and retriving data

No comments
Requesting Page ASPX

<head runat="server">
    <title></title>
    <script type="text/javascript">
           function find_data(fn)
                 {
                     if (window.XMLHttpRequest) {                         //for IE
                         abc = new XMLHttpRequest();
                     }
                     else {
                         try {
                             abc = new ActiveXObject("Msxml2.XMLHTTP");                  //For Other Browser
                         }
                         catch (e) {
                             abc = new ActiveXObject("Microsoft.XMLHTTP");
                         }
                     }
                         url = 'data_find.aspx?fname=' + fn;                                          //Requesting URL
                                                  
                        abc.open('GET',url,true);
                        abc.send();
                       
                        abc.onreadystatechange = function()
                        {
                            if(abc.readyState == 4)
                                {
                                    document.getElementById('view_data').innerHTML=abc.responseText;                                                                   
                                }
                        }
                }                       
    </script>
</head>
<body>
    <form id="form1" runat="server" method="post">
    <div>
        <table border="1" align="center">
            <tr>
                <td>
                    <input type="text" id="fname" onkeyup="find_data(getElementById('fname').value)" />
                </td>
            </tr>
        </table>
    </div>
    </form>
    <div id="view_data">
    </div>
</body>


Requested Page data_find.aspx



 protected void Page_Load(object sender, EventArgs e)
    {
        st1 = Request.QueryString["fname"];
        SqlConnection con = new SqlConnection("connection");
        con.Open();

        //string[] x = st1.Split('_');
        //string y = x[1];

        string str = "select * from AuthorDetail where AuId ='" + st1 + "'";
        SqlCommand cmd = new SqlCommand(str, con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        da.Fill(dt);

       if(dt.Rows.Count>0)
       {
           //string x="img/"+dt.Rows[0]["xol1"].ToString();
           //string y=dt.Rows[0]["bio"].ToString();
           //string xml = "<book img=\"bg.png\"bio=\"hii\"></book>";
          // Response.ContentType = "text/xml";
          // Response.Write(xml);

           Response.Write(dt.Rows[0]["AuthorImage"].ToString());
           Response.Write("|$|");
           Response.Write(dt.Rows[0]["Details"].ToString());
            Response.End();
        }
        //cmd.ExecuteNonQuery();
        con.Close();
       
    }   
read more
Home » Archives for April 2015

Visible an Image while uploding a file from fileupload

No comments
javascript code

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
      <script type="text/javascript">
        function showimagepreview(input) {
            if (input.files && input.files[0]) {
                var filerdr = new FileReader();
                filerdr.onload = function (e) {
                    $('#img1').css("visibility", "visible");
                }
                filerdr.readAsDataURL(input.files[0]);
            }
        }
    </script>

.aspx

 <asp:Image ID="img1" runat="server" ImageUrl="~/b1.png" style="visibility:hidden"/>
        <asp:FileUpload ID="FileUpload1" runat="server" onchange="showimagepreview(this)"/>
read more
Home » Archives for April 2015

Insert Data through html button using webservice

No comments
First Create calculation.asmx web service


[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

 [System.Web.Script.Services.ScriptService]
public class calculation : System.Web.Services.WebService {

    public calculation ()
   {     
    }

    [WebMethod]
    public string Cal(int a, int b)
    {       
        SqlConnection con = new SqlConnection("Connection");
        con.Open();
        string str =  "insert into t1(id,xol1) values('"+a+"','"+b+"')";
        SqlCommand cmd = new SqlCommand(str, con);             
        cmd.ExecuteNonQuery();
        con.Close();
        return "Inserted Sucessfully";
    }   
}







.ASPX

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" language="javascript">
        function callService(f) {
            document.getElementById("c").innerHTML = "";           
            calculation.Cal(
                        parseInt(f.elements["a"].value),
                        parseInt(f.elements["b"].value),
                        callComplete,
                        callError);
                        }
                        function callComplete(result) {
                            document.getElementById("c").innerHTML = result;
                        }
                        function callError(result) {
                            document.getElementById("c").innerHTML = "error";
                        }
                    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/calculation.asmx" />
            </Services>
        </asp:ScriptManager>
     
        <asp:TextBox ID="a" runat="server"></asp:TextBox>     
        <asp:Label ID="Label1" runat="server"> / </asp:Label>
        <asp:TextBox ID="b" runat="server"></asp:TextBox>
        <input type="button" value="Divide Numbers" onclick="callService(this.form);" />
        <asp:Button ID="Button1" runat="server" Text="=" OnClientClick="return callService(this.form);"/>
        <asp:Label ID="c" runat="server"></asp:Label>   
    </div>
    </form>
</body>
</html>

read more
Subscribe to: Comments (Atom)