잊지 않겠습니다.

jQuery for absolute Beginner - Video Series 1.

기타 자료들 2009. 1. 23. 01:43

http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/

에서 재미있는 비디오 강습을 해서 짬짬히 살펴보고 있는 중이다.
가장 많이 사용되고 있는 javascript framework 중 하나이고, asp.net과 가장 같이 잘 사용될 수 있는 javascript framework이기 때문에 더욱더 관심이 가는 내용.

<html>
    <head>
    <title>This is my first web file</title>
    <script type="text/javascript" language="javascript" src="jquery-1.3.1.min.js"></script>   
    <script type="text/javascript" language="javascript">
        function append_table_context() {
            $("#tableContext").append("<tr><td>F.Name</td><td>L.Name</td></tr>");
        }       
    </script>
    <style type="text/css">
        #box
        {
            background : red;
            width : 300px;
            height : 400px;
        }
    </style>   
    <script type="text/javascript" language="javascript">
        $(function() {
            $('a').click(function() {
                $('#box').fadeOut('fast');
            });
        });  
    </script>       
    </head>
    <body>      
        <div id="box">
        <a href="#">Click Me!</a>
        </div>
        <br/>
               
        <input id="btnInput" type="button" value="click me" onclick="javascript:append_table_context();"/>       
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tbody id="tableContext">
            </tbody>
        </table>
    </body>
</html>

하나의 박스가 사라지는 내용과 table에 하나씩 추가하는 내용이 있는 소스.
저작자표시 비영리
Posted by Y2K
,

Javascript를 이용한 WebService call

기타 자료들 2009. 1. 22. 20:07

새롭게 하나의 일을 시작하기 전에 이런 방법으로 해보자 하고 찾아보고 있는 중에 전에 하던 MicrosoftAjax.js를 좀 잘 써보자는 생각이 생겼다. table에서 pagination을 지원하고, 각 항목을 ajax call을 통해서 얻어오는 과정은 다음과 같다.

1. Web.config에서 web service의 호출 방법으로 get / post method의 추가. 

2. WebServicedml class attribute에 [ScriptService]의 추가
: 까먹고 안해주면 가장 오랫동안 헛갈리게 되는 사항이다. 이 부분에 대해서 안해주면 exception이 나타나게 되는데 exception을 내용은 다음과 같다. 

3. Sys.Net.WebServiceProxy.invoke를 통한 web service 호출
Sys.Net.WebServiceProxy.invoke("/BoardService.asmx", "GetBoardList", false, { "pageNumber": page_number }, display_board);

ScriptService를 통해서 오는 결과는 JSON format과 동일하게 된다. 따라서, JSON을 javascript에서 이용하는 방법으로 간단히 사용하면 된다. 

예를 들어 다음과 같은 class를 반환하는 WebService가 있을때, 
    public class Data
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }

javascript에서는 다음과 같이 사용하면 된다.
      function display_name(data) {
        alert(data.FirstName + data.LastName);
      }

저작자표시 비영리
Posted by Y2K
,

ASP .NET MVC Model에서의 Pagination table

.NET Framework 2009. 1. 14. 02:00

MVC Model은 매우 멋진 Web Model이고, View에서 표현하는 방법이 표준 Html을 기본적으로 사용하고 있기 때문에 매우 만족스러울 뿐 아니라, 디자이너와의 협업에서 뛰어난 적응도를 보여준다.

기존의 ASP .NET에서는 수 많은 서버 control들이 있었고, 이러한 서버 control들은 각각의 사용법 및 세부적인 디자인을 변경시키는 데에 있어서 많은 어려움을 가지고 있었던 것이 사실이다. (내가 잘 못하는 것도 있겠지만. –-;;)

MVC 모델을 사용하다가 자주 만드는 것 중 하나가 table인데, 각각의 데이터에 따라서 매번 다른 table을 반복작업을 하는 것이 싫어서 하나의 MVC user control을 만들었다.

먼저 LINQ를 이용한 데이터의 pagination을 제공하고, table에 각각 필요한 데이터를 Model로 선언한다. 그리고 table의 pagination은 AJAX call을 기반으로 한다. 

LINQ를 이용한 PagedList : 

   public interface IPagedList
    {
        int TotalCount { get; set; }
        int PageIndex { get; set; }
        int PageSize { get; set; }

        bool IsPreviousPage { get;  }
        bool IsNextPage { get;  }

        int TotalPageCount { get; set; }
    }

    public class PagedList<T> : List <T>, IPagedList
    {
        public PagedList(IQueryable<T> source, int index, int pageSize)
        {
            TotalCount = source.Count();
            PageSize = pageSize;
            PageIndex = index;
            TotalPageCount = TotalCount/PageSize;
            AddRange(source.Skip(index*pageSize).Take(PageSize).ToList());
        }

        public PagedList(List<T> source, int index, int pageSize)
        {
            TotalCount = source.Count();
            PageSize = pageSize;
            PageIndex = index;
            TotalPageCount = TotalCount / PageSize;
            AddRange(source.Skip(index * pageSize).Take(PageSize).ToList());
        }

        #region IPagedList Members

        public int TotalCount
        {
            get;
            set;
        }

        public int PageIndex
        {
            get;
            set;
        }

        public int PageSize
        {
            get;
            set;
        }

        public bool IsPreviousPage
        {
            get
            {
                return PageIndex > 0;
            }
        }

        public bool IsNextPage
        {
            get
            {
                return ( (PageIndex + 1) * PageSize ) < TotalCount;
            }
        }

        public int TotalPageCount { get; set; }

        #endregion
    }

    public static class Pagiation
    {
        public static PagedList<T> ToPagedList<T>(this IQueryable<T> source, int index, int pageSize)
        {
            return new PagedList<T>(source, index, pageSize);
        }

        public static PagedList<T> ToPagedList<T>(this List<T> source, int index, int pageSize)
        {
            return new PagedList<T>(source, index, pageSize);
        }
    }

PagedTableData : Table에 필요한 데이터들
    public class PagedTableData
    {
        public List<string> ColumnHeaders { get; set; }     //Column Headers
        public string TableId { get; set; }                 //Html Id
        public PagedList<string[]> PagedList { get; set; }  //Page<tbody> datas
        public string ActionName { get; set; }              //Ajax call Action data
    }

PagedTable : MVC User Control 
PagedTable.ascx >>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PagedTable.ascx.cs" Inherits="SYNCmailAdmin.Views.Shared.PagedTable" %>
<div id="<%=ViewData.Model.TableId %>">
  <table class="mainTable" width="100%">
    <tr>
      <%foreach(string column in ViewData.Model.ColumnHeaders) { %>
      <th><%=column %></th>
      <%} %>
    </tr>
    
    <%foreach(string[] datas in ViewData.Model.PagedList) { %>
      <tr>
        <%foreach(string data in datas) { %>
          <td><%=data%></td>
        <%} %>
      </tr>
    <%} %>  
  </table>
  <div align="center">
    <%
      int pageIndex = ViewData.Model.PagedList.PageIndex;
      int startIndex = Math.Max(0, pageIndex - 5);
      int endIndex = Math.Min(pageIndex + 5, ViewData.Model.PagedList.TotalPageCount);
    %>
    <%if(ViewData.Model.PagedList.IsPreviousPage) { %>    
      <%for(int i = startIndex ; i < pageIndex ; i++){ %>
      <%=Ajax.ActionLink(i.ToString(), ViewData.Model.ActionName, new {pageIndex = i}, new AjaxOptions() { UpdateTargetId = ViewData.Model.TableId}) %>
      <%} %>
    <%} %>
    <strong><%=pageIndex%></strong>
    <%if(ViewData.Model.PagedList.IsNextPage) { %>
      <%for(int i = pageIndex + 1 ; i <= endIndex ; i++) { %>
      <%=Ajax.ActionLink(i.ToString(), ViewData.Model.ActionName, new {pageIndex = i}, new AjaxOptions() {UpdateTargetId = ViewData.Model.TableId}) %>
      <%} %>
    <%} %>    
  </div>
</div>


PagedTable.ascx.cs
    public partial class PagedTable : System.Web.Mvc.ViewUserControl<PagedTableData>
    {
    }


사용법은 다음과 같다. 
        public ActionResult Index()
        {
            ViewData["Title"] = "Home Page";
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            HomeIndexDataModel dataModel = new HomeIndexDataModel() {PagedTableData = GetPagedData(null)};
            return View(dataModel);
        }

        public ActionResult GetPagedDataModel(int? pageIndex)
        {
            return View("PagedTable", GetPagedData(pageIndex));
        }

        private PagedTableData GetPagedData(int? pageIndex)
        {
            PagedTableData pageData = new PagedTableData();
            pageData.ColumnHeaders = new List<string>() {"FirstData", "SecondData"};
            pageData.TableId = "TableId";
            pageData.PagedList = TableTempDataGenerator.GetDatas()
                .ToPagedList(pageIndex == null ? 0 : pageIndex.Value, 10);
            pageData.ActionName = "GetPagedDataModel";

            return pageData;
        }

각 Column Header와 Table의 ActionResult 값을 얻어오는 함수명을 넣어주는 것으로 쉽게 해결 가능하다. 조금 제약사항이 되는 것이, GetPagedData에서 반드시 pageIndex라는 변수명으로 적어줘야지 되는 제약사항이 걸리게 된다. 

실행 결과는 다음과 같다.

Sample Source도 같이 올립니다. 필요하신 분들은 얼마든지 퍼가세요.
(이곳에 오시는 분들이 있으시다면.. ㅋㅋ ^^)
저작자표시 비영리
Posted by Y2K
,

Microsoft.ajax

.NET Framework 2009. 1. 7. 13:01

MS에서 ASP.NET에서 사용하기 쉽도록 만든 java script library. 

    

1. call local web service 

Sys.Net.WebServiceProxy.invoke("Service Address", "method name", "IsPost Action", "Parameters", "return action")

view plainprint?
  1. function check_activateion_requested(user_id) {  
  2.     Sys.Net.WebServiceProxy.invoke(          
  3. "/SYNCmailUtil.asmx",        "IsActivationRequired",        false,        { userId: user_id },        inputbox_enable        )}    function inputbox_enable(enable) {    if (enable) {        document.getElementsByName('logonName')[0].readOnly = "false";        document.getElementsByName('password')[0].readOnly = "false";    }    else {        document.getElementsByName('logonName')[0].readOnly = "true";        document.getElementsByName('password')[0].readOnly = "true";        document.getElementsByName('logonName')[0].value = "";        document.getElementsByName('password')[0].value = "";        document.getElementById('infoLabel').innerHTML = "Activation을 할 수 없는 유저입니다.";    }}  

    

    

Posted by Y2K
,

티스토리툴바