Click here to Skip to main content
15,868,306 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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
C#
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
C#
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
C#
@{
    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
Updated 14-Nov-12 23:41pm
v2
Comments
n.podbielski 15-Nov-12 3:44am    
You should really start write some code and when you will sumble on some problems then ask for help.

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
 
Share this answer
 
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
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900