ASP.NET使用AJAX实现CURD

 

前台页面


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $.get("/AjaxInfo/Read", {}, function (date) {
                var tb = "<table>";
                for (var i = 0; i < date.length; i++) {
                    tb += "<tr><td>" + date[i].id + "</td><td>" + date[i].name + "</td><td>" + date[i].telephone + "</td><td>" + date[i].age + "</td><td><a onclick='deleteInfo(" + date[i].id + ")'>删除</a><td><a href='/ajaxinfo/Update/" + date[i].id + "'>更新</a></td></tr>"
                }
                tb += "</table>";
                $("#Infolist").html(tb);
            });
        });
        function deleteInfo(id) {
            $.get("/AjaxInfo/Remove", { id: id }, function (date) {
                if (date.result == true) {
                    alert("删除成功");
                    window.location.href = '/AjaxInfo/Index';
                }
            });
        }
    </script>
</head>
<body>
    <div> 
        <ul>
            <li><a href="/AjaxInfo/add">添加</a></li>
        </ul>
        <h2>信息页面</h2>
        <div id="Infolist"></div>
    </div>
</body>
</html>

添加前台页面


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Add</title>
    <script src="~/Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $(":button").click(function () {
                //获取文本框的值,把值写在一个对象中;
                var obj = {
                     name : $("#name").val(),
                   telephone : $("#telephone").val(),
                     age : $("#age").val()
                }
                $.post('/AjaxInfo/insert', { data: JSON.stringify(obj) }, function (res) {
                    if (res.result == true) {
                        alert("添加成功");
                        window.location.href = '/AjaxInfo/Index';
                    }
                });
            });
        });
    </script>
</head>
<body>
    <h2>添加信息</h2>
   
        <p>姓名:<input type="text" name="name" id="name" /></p>
        <p>电话:<input type="text" name="telephone" id="telephone" /></p>
        <p>年龄:<input type="text" name="age"  id="age"/></p>
        <p><input type="button" value="添加" /></p>
 
    
</body>
</html>

更新前台页面

@model MovieProject.Entity.informations
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Update</title>
    <script src="~/Scripts/jquery.min.js"></script>
    <script>
            $(function () {
                $(":button").click(function () {
                    console.log(111);
                    var obj = {
                        name: $("#name").val(),
                        telephone: $("#telephone").val(),
                        age: $("#age").val(),
                        id: $("#id").val()
                    }
                    $.post("/ajaxinfo/Edit", { data: JSON.stringify(obj) }, function (res) {
                        if (res.result == true) {
                            window.location.href = "/ajaxinfo/index";
                        }
                    });
                });
            });
        </script>

</head>
<body>
    <div>
        <h2>更新</h2>
        @Html.HiddenFor(x=>x.id)
        <p>姓名:@Html.TextBoxFor(x=>x.name)</p>
        <p>电话:@Html.TextBoxFor(x => x.telephone)</p>
        <p>年龄:@Html.TextBoxFor(x => x.age)</p>
        <p><input type="button" value="更新" /></p>

        //两种方法均可以;
        @*<p><input type="hidden" name="id" id="id" /></p>
        <p>姓名:<input type="text" name="name" id="name" /></p>
        <p>电话:<input type="text" name="telephone" id="telephone" /></p>
        <p>年龄:<input type="text" name="age" id="age" /></p>
        <p><input type="button" value="更新" /></p>*@
    </div>
</body>
</html>

后台页面

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MovieProject.Entity;
using System.Collections;
using Newtonsoft.Json;
namespace MovieProject.Controllers
{
    public class AjaxInfoController : Controller
    {
        // GET: AjaxInfo
        MovieEntities db = new MovieEntities();//实例化虚拟数据库;
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Read()
        {
            var list = db.informations;
            return Json(list, JsonRequestBehavior.AllowGet);
        }
        public ActionResult Remove(string id)
        {
            //哈希表;数据结构(散列数据结构)
            Hashtable ht = new Hashtable();
            ht["result"] = false;
            informations model = db.informations.Find(Convert.ToInt32(id));
            if (model != null)
            {
                db.informations.Remove(model);
                if (db.SaveChanges() > 0)
                {
                    ht["result"] = true;
                }
            }
            return Json(ht, JsonRequestBehavior.AllowGet);
        }
        public ActionResult Add()
        {
            return View();
        }
        public ActionResult Insert(string data)
        {
            Hashtable ht = new Hashtable();
            ht["result"] = false;
            informations model = JsonConvert.DeserializeObject<informations>(data);
            db.informations.Add(model);
            if (db.SaveChanges() > 0)
            {
                ht["result"] = true;
            }
            return Json(ht);
        }
        public ActionResult Update(string id)
        {
            informations model = db.informations.Find(Convert.ToInt32(id));
            if (model != null)
            {
                return View(model);
            }
            else
            {
                return RedirectToAction("Index");
            }
        }
        public ActionResult Edit(string data)
        {
            Hashtable ht = new Hashtable();
            ht["result"] = false;
            informations model = JsonConvert.DeserializeObject<informations>(data);
            informations m = db.informations.Find(model.id);
            if (m != null)
            {
                m.name = model.name;
                m.telephone = model.telephone;
                m.age = model.age;
                TryUpdateModel(m);
            }
            if (db.SaveChanges() > 0)
            {
                ht["result"] = true;
            }
            return Json(ht);
           
        }
       
    }
}
发布了12 篇原创文章 · 获赞 0 · 访问量 129

猜你喜欢

转载自blog.csdn.net/m0_46454966/article/details/105376284