티스토리 뷰

💼 정보 ver1.0

페이지 링크(비동기 방식)

James Wetzel 2013. 6. 9. 00:56
728x90
반응형

view

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<List<EmptyMvcApplication.Models.Entity.MountainInfo>>" %>

<%@ Import Namespace="EmptyMvcApplication.HtmlHelpers" %>

<!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 type="text/javascript">

        $(document).ready(function () {

            initializeTable();


            $("#summits A").live("click", function () {

                $.get($(this).attr("href"), function (response) {

                    var initialCheckValue = $("#heightinmetersToggle")[0].checked;


                    //replaceWith의 대상 요소가 <body>의 직접적인 하위자식이 아닌경우에 사용

                    //$("#summits").replaceWith($("#summits", response));


                    //replaceWith의 대상 요소가 <body>의 직접적인 하위자식인 경우에 사용

                    $("#summits").replaceWith($(response).filter("div#summits"));


                    initializeTable();


                    if (initialCheckValue) {

                        $("#heightinmetersToggle")[0].checked = true;

                        $("#summits td:nth-child(2)").hide();

                    }


                });

                return false;

            });


            function initializeTable() {

                //서로 다른 결과를 볼 수 있다.

                //$("#summits tr:even").css("background-color", "silver");

                $("#summits tr:nth-child(even)").css("background-color", "silver");


                $("#summits form[action$='/ZebraDelete']").submit(function () {

                    var itemText = $("input[name=itemName]", this).val();

                    return confirm("[" + itemText + "] 을 정말로 삭제할까요?");

                });


                $("#heightinmetersToggle").click(function () {

                    $("#summits td:nth-child(2)").toggle();

                });

            }

        });        

    </script>

    <style type="text/css">

        table, table td { padding: 30px; border-spacing: 0;}            

    </style> 

    <title>Zebra</title>

</head>

<body>    

    <div id="summits">        

        <label><%: Html.CheckBox("heightinmetersToggle") %>HeightInMeters Hidden</label>

        <table>

            <thead>

                <tr>

                    <td>Item</td>

                    <td>Height</td>

                    <td>Actions</td>

                </tr>

            </thead>

            <% foreach (var item in Model) 

                {

            %>

                <tr>

                    <td><%: item.Name %></td>

                    <td><%: item.HeightinMeters %></td>

                    <td>

                        <% using (Html.BeginForm("ZebraDelete", "AjaxSample", FormMethod.Post))

                           { %>

                        <%: Html.Hidden("itemID", item.No)%>

                        <%: Html.Hidden("itemName", item.Name) %>

                        <input type="submit" value="Delete" />

                        <% } %>

                    </td>

                </tr>                    

            <%       

                } 

            %>            

        </table>

        page: <%= Html.PageLinks((int)ViewData["currentPage"], (int)ViewData["totalPage"], i => Url.Action("Zebra", new { page = i }))%>                    

    </div> 

    <p>this page was generated <%: DateTime.Now.ToLongTimeString() %></p>

</body>

</html>


Controller

        public ViewResult Zebra(int? page)
        {
            List<MountainInfo> mountain = new List<MountainInfo>();
            mountain.Add(new MountainInfo { No = 1, Name = "한라산", HeightinMeters = 123456 });
            mountain.Add(new MountainInfo { No = 2, Name = "백두산", HeightinMeters = 789456 });
            mountain.Add(new MountainInfo { No = 3, Name = "태백산", HeightinMeters = 789456 });
            mountain.Add(new MountainInfo { No = 4, Name = "청계산", HeightinMeters = 789456 });

            ViewData["currentPage"] = page ?? 1;
            ViewData["totalPage"] = (int)Math.Ceiling(1.0 * 20 / 5);


            return View(mountain);
        }


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