使用ajax和jquery进行数据操作 [英] Data manipulation using ajax and jquery

问题描述

我是AJAX和Jquery的新手.我想创建一个表，并使用AJAX和Jquery执行编辑创建和删除功能.我不使用任何我对资源表进行硬编码的数据库.我已经检查过要手动执行的基于ajax的CRUD操作，这意味着如果没有插件的帮助，请帮助我执行任务


我正在使用两个模型

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

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>

现在我可以删除表行，但是它不会从列表中删除，因此伙计们请我使用AJAX和JQuery

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

推荐答案

( document).ready(function(){

(document).ready(function () {

(" ).click(function(){

("#delete").click(function () {

(" ).click(function(){

("#movie_info tr").click(function () {

这篇关于使用ajax和jquery进行数据操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！