Ajax的學習心得

Ajax是什麼？

AJAX 是一種客戶端 Web 開發技術，用於生成交互式 Web 應用程序。AJAX 是一種開發應用程序的方法，它結合了下面的功能，使用 JavaScript 將它們組合在一起
1.基於 XHTML 和 CSS 標準的演示
2.通過文檔對象模型與頁面交互
3.與 XML 和 XSLT 的數據交換
4.使用 XML HTTP 請求進行異步數據檢索。

AJAX的主要用途是什麼?

Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。

下面展示一下ajax的基本新增，修改，保存方法：

首先先建立簡單的視圖

@{
    ViewBag.Title = "Index";
}
@model List<WebApplication2.Models.Role>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    新增
</button>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>名稱</th>
            <th>備註</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Name</td>
                <td>@item.Remark</td>
                <td>
                    <button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" onclick="edit(@item.ID,'@item.Name','@item.Remark')">修改</button>
                    <button class="btn btn-danger">刪除</button>
                </td>
            </tr>
        }
    </tbody>
</table>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">新增角色</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="">
                    <div class="form-group">
                        <input type="hidden" class="form-control" id="id" aria-describedby="emailHelp">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">名稱</label>
                        <input type="text" class="form-control" id="name" aria-describedby="emailHelp">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">備註</label>
                        <input type="text" class="form-control" id="remark">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary" id="save">保存</button>
            </div>
        </div>
    </div>
</div>

接下來就是新增與修改保存ajax代碼了
數據庫內容的話是一個role表，字段name。remark

@section scripts{
    <script>
        function edit(id,name,remark) {
             $("#id").val(id);
             $("#name").val(name);
             $("#remark").val(remark);
        }
        $("#save").click(function () {
            let id = $("#id").val();
            let name = $("#name").val();
            let remark = $("#remark").val();
            $.ajax({
                url: '/role/save',
                data: { "ID": id, "Name": name, "Remark": remark },
                type:"post",
                success: res => {
                    if (res > 0) {
                        alert("保存成功")
                        window.history.go(0)
                    } else {
                        alert("保存失敗")
                    }
                }
            })
        })
    </script>
}

這裏爲了方便我把新增與修改寫在一起的
控制器代碼

 public class RoleController : Controller
    {
        RbacDBEntities db = new RbacDBEntities();
        // GET: Role
        public ActionResult Index()
        {
            var role = db.Roles.ToList();
            return View(role);
        }

        [HttpPost]
        public ActionResult Save(Role role)
        {
            if (role.ID>0)
            {
                db.Entry(role).State = System.Data.Entity.EntityState.Modified;
            }
            else
            {
                db.Roles.Add(role);
            }
            int res = db.SaveChanges();

            return Json(res, JsonRequestBehavior.AllowGet);
            
        }
    }

希望能對你們有所幫助