Showing posts with label insert/update/delete. Show all posts
Showing posts with label insert/update/delete. Show all posts

Tuesday, 14 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

Sunday, 11 May 2014

insert update delete in mvc

No comments
create model class

 public class Portal
    {
        public int uid
        { get; set; }
        public string fname
        { get; set; }
        public string lname
        { get; set; }
        public string email
        { get; set; }
        public string address
        { get; set; }
        public string phone
        { get; set; }
        public string company
        { get; set; }
        public string designation
        { get; set; }
    }


 create controler

using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;
using firstmvc.Models;



public class TestController : Controller
    {
        StarBusEntities entity = new StarBusEntities();
        public ActionResult Index()
        {           
            return View();
        }
       
        [HttpGet]
        public ActionResult Insert()
        {
            Portal p1 = new Portal();
            return View(p1);
        }

        [HttpPost]
        public ActionResult Insert(Portal p1)
        {
            mvc_test mv = new mvc_test();
            mv.uid=  p1.uid ;
            mv.fname=p1.fname ;
            mv.lname=p1.lname;
            mv.email=p1.email ;
            entity.mvc_test.AddObject(mv);
            entity.SaveChanges();
            return View();
        }

        public ActionResult showEmp()
        {
            List<Portal> l1 = new List<Portal>();
            var data = from d in entity.mvc_test
                       select d;
            foreach (var p1 in data)
            {
                Portal mv = new Portal();
                mv.uid = p1.uid;
                mv.fname = p1.fname;
                mv.lname = p1.lname;
                mv.email = p1.email;
                l1.Add(mv);
            }
            return View(l1);
        }

        [HttpGet]
        public ActionResult Edit(int id)
        {
            var p1 = entity.mvc_test.Single(i => i.uid == id);
            Portal mv = new Portal();
            mv.uid = p1.uid;
            mv.fname = p1.fname;
            mv.lname = p1.lname;
            mv.email = p1.email;
            return View(mv);
        }
        [HttpPost]
        public ActionResult Edit(Portal p1, int id)
        {
            var mv = entity.mvc_test.Single(i => i.uid == id);
            mv.uid = p1.uid;
            mv.fname = p1.fname;
            mv.lname = p1.lname;
            mv.email = p1.email;
            entity.SaveChanges();
            return RedirectToAction("showEmp");
       
        }

        [HttpGet]
        public ActionResult Detail(int id)
        {
            var p1 = entity.mvc_test.Single(i => i.uid == id);
            Portal mv = new Portal();
            mv.uid = p1.uid;
            mv.fname = p1.fname;
            mv.lname = p1.lname;
            mv.email = p1.email;
            return View(mv);
        }

        [HttpGet]
        public ActionResult Delete(int id)
        {
            var p1 = entity.mvc_test.Single(i => i.uid == id);
            Portal mv = new Portal();
            mv.uid = p1.uid;
            mv.fname = p1.fname;
            mv.lname = p1.lname;
            mv.email = p1.email;
 
           return View(mv);

        }
        [HttpPost]
        public ActionResult Delete(Portal p,int id)
        {
            var p1 = entity.mvc_test.Single(i => i.uid == id);           
            entity.mvc_test.DeleteObject(p1);
            entity.SaveChanges();
            return RedirectToAction("showEmp");
        }
    }
read more
Subscribe to: Posts (Atom)