Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET Ajax jQuery
Hi, I'm new to AJAX and Jquery.I want to create a table and perform edit create and delete functions using AJAX and Jquery I'm not using any databases I'm hard coded the resource table. I already checked the ajax based CRUD operation post I wanted to do it manually means Without the help of the plugin please help me to perform the task
 

I'm using two models
Movie.CS
namespace table_final.Models
{
    public class Movie
    {
        static int nextId = 1;
        public Movie()
        {
            Id = nextId++;
        }
        public int Id { get; set; }
        public string Title { get; set; }
        public string Genre { get; set; }
        public string Release_Date { get; set; }
 
    }
    
}
 
Movie_Data.CS
namespace table_final.Models
{
 
    public class Movie_Data
    {
 
        public static List<Movie> MovieData = null;
        public static IList<Movie> GetMovie()
        {
            if (MovieData == null)
            {
                MovieData = new List<Movie>();
                MovieData.Add(new Movie() {  Title = "Inception", Genre = "Thriller", Release_Date ="01/12/2012" });
                MovieData.Add(new Movie() {  Title = "Dark knight", Genre = "Thriller", Release_Date = "01/12/2012" });
                MovieData.Add(new Movie() {  Title = "Water For Elephants", Genre = "Drama", Release_Date = "01/12/2012" });
                MovieData.Add(new Movie() {  Title = "The Help", Genre = "Drama", Release_Date = "01/12/2012" });
            }
            return MovieData;
        }
 
    }
}
 

and my Delete View page is
@{
    ViewBag.Title = "Delete";
}
<h2>
    Delete</h2>
<script type="text/javascript">
    $(document).ready(function () {
        $("#delete").click(function () {
            $("#movie_info tr").click(function () {
 
                $(this).css("background-color", "#FF3700");
 
                $(this).fadeOut(900, function () {
                    $(this).remove();
                });
            });
        });
    });
</script>
<div id="demo">
    <table id="movie_info" class="display">
        <thead>
            <tr>
                <th>
                    Title
                </th>
                <th>
                    Genre
                </th>
                <th>
                    Release Date
                </th>
            </tr>
        </thead>
        <tbody>
             @foreach (var MovieData in Model)
            {
                <tr>
                    <td>@MovieData.Title
                    </td>
                    <td>@MovieData.Genre
                    </td>
                    <td>@MovieData.Release_Date
                    </td>
                    <td>
                        <button id="delete">
                            Delete</button>
                    </td>
                </tr>
               
            }
        </tbody>
    </table>
</div>
 
now I can delete the table row but it dosent erased from the list so guys pls help me to complete the edit,delete and create functionalities using AJAX and JQuery
Posted 14-Nov-12 20:52pm
Edited 15-Nov-12 0:41am
v2
Comments
n.podbielski at 15-Nov-12 3:44am
   
You should really start write some code and when you will sumble on some problems then ask for help.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

The row is removed at the client side but the list is stored server-side. You need a web method in your server side code that takes the ID and removed that movie from the list.
 
I would rebuild the table from the server-side response instead of just removing the client-side row. This better allows you to handle and errors and shows an updated table showing all users changes (which I guess is what you would want?).
 
All of this can be called from the client side using jQuery ajax calls (other client side service calls are available). The jQuery website can get you started but there are plenty of resources out there.
 
By default jQuery ajax calls occur asynchronously. If you're response contains data that you wish to pass you can either do this within the ,Success : function(data){} method or call the web service with the ajax parameter ,async: false.
 
Hope that helps
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

I think in code you are hardcoding the values suppose "Dark night rises", when you want to delete this one the how is it possible to delete my dear friend, if you use database then after deleting that one will affect the result in your page, but how you r doing this, I think this will not help you out.
 
One thing you can do, while deleting the data just assign an empty string to the variable, holding the data, and while editing the recent value to it. I think this will help you out.
 
Thanks
Tapan kumar
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Zoltán Zörgő 180
1 Sergey Alexandrovich Kryukov 155
2 Peter Leow 100
3 CPallini 70
4 Ramza360 51
0 Zoltán Zörgő 80
1 the other paul 23
2 Shmuel Zang 10
3 Aarti Meswania 5
4 Member 11389991 -2


Advertise | Privacy | Mobile
Web04 | 2.8.150129.1 | Last Updated 15 Nov 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100