티스토리 뷰

💼 정보 ver1.0

Ajax.ActionLink를 이용한 비동기 목록 삭제

James Wetzel 2013. 6. 6. 22:06
728x90
반응형
View
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<List<EmptyMvcApplication.Models.Entity.Item>>" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <meta name="viewport" content="width=device-width" />
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
    <title>AjaxDelete</title>

    <script type="text/javascript">
        function DeleteNode(id, itemName) {
            var element = document.getElementById("message");
            element.innerHTML = itemName + " was deleted!";
            element.style.backgroundColor = "red";
            
            var deletedNode = document.getElementById("item" + id);
            deletedNode.parentNode.removeChild(deletedNode);
        }
    </script>
</head>
<body>
    <div>
        <h2>List of items</h2>
        <div id="message"></div>
        <ul>
        <% foreach (var item in Model) 
           {
        %>
            <li id="item<%: item.ID %>">
                <%: item.ItemName %>
                <%: Ajax.ActionLink("delete", "AjaxDelete", new { itemID = item.ID, itemName = item.ItemName }, new AjaxOptions { HttpMethod = "post" })%>
            </li>    
        <% 
           } 
        %>
        </ul>
        <i>This page was generated at <%: DateTime.Now.ToLongTimeString() %></i>
    </div>
</body>
</html>

Controller
         public ViewResult AjaxDelete()
        {
            List<Item> list = new List<Item>();
            list.Add(new Item { ID = 1, ItemName = "생명 물약" });
            list.Add(new Item { ID = 2, ItemName = "내력 물약" });

            return View(list);
        }

        [HttpPost]
        public JavaScriptResult AjaxDelete(int itemID, string itemName)
        {
            //매겨변수 id를 이용하여 DB에서 삭제한다.

            //Document에서 id에 해당하는 node를 제거한다.
            var script = string.Format("DeleteNode({0}, {1})", itemID, JavascriptEncode(itemName));
            
            return JavaScript(script);
        }

        private static string JavascriptEncode(string str)
        {
            return new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(str);
        }

Model
     public class Item
    {
        public int ID { get; set; }
        public string ItemName { get; set; }
    }



728x90
반응형
저작자표시 비영리 동일조건