ASP.NET AJAX로 만드는 RSS Viewer - Part3 [ASP.NET]

이 글은 월간 마이크로소프트웨어(일명 마소) 2008년 01월호 실전 강의실에 기고한 글입니다. 요즘 도통 포스팅을 할 수 없는 관계로 인해 대체합니다. ㅡ_ㅡ;; (하는 거 없이 바빠요~~~)

---

ASP.NET AJAX 코드와의 결합

CommonUtility 클래스의 코드까지 입력이 완료되었다면, 웹 폼에 ASP.NET AJAX 코드를 추가하도록 하겠다. 위에서, 웹 폼에는 divAddRss, divRssList, divPostList라는 id를 가진 3개의 <div>가 있다고 설명하였다. 우선, “AddUpdatePanel”, “RSSUpdatePanel”, “PostUpdatePanel”라는 id를 가진 UpdatePanel 컨트롤을 웹 폼에 생성한 후 UpdatePanel 컨트롤의 UpdateMode를 Conditional로 설정한다. 그리고, 이 3개의 <div>를 각각의 UpdatePanel 컨트롤의 하위로 이동시킨다. 또한, "AddUpdatePanel" UpdatePanel 컨트롤에는 “AddUpdateProgress"라는 id를 가지는 UpdateProgress 컨트롤을 추가하도록 한다. 새로운 UpdatePanel 컨트롤과, UpdateProgress 컨트롤을 추가한 후에 변경된 웹 폼의 소스는 <리스트 10>과 같다.

-------------------------------------------------------------------------------------------------------------------
<form id="RSSForm" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="content">
<asp:UpdatePanel ID="AddUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="divAddRss" style="text-align:center;padding-bottom:20px;">
... ...
</div>
<asp:UpdateProgress ID="AddUpdateProgress" runat="server" AssociatedUpdatePanelID="AddUpdatePanel">
<ProgressTemplate>
<div style="text-align:center;padding-top:20px;padding-bottom:20px;">
<h5>처리중입니다</h5>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>
<hr />
<asp:UpdatePanel ID="RSSUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="divRssList" style="text-align:center;padding-bottom:20px;">
... ...
</div>
</ContentTemplate>
</asp:UpdatePanel>
<hr />
<asp:UpdatePanel ID="PostUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="divPostList" style="text-align:center;padding-bottom:20px;">
... ...
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
-------------------------------------------------------------------------------------------------------------------
<리스트 10> 변경된 웹 폼의 소스 코드

코드 비하인드에서의 소스 코드 작성

마지막 작업으로, RssView.aspx의 코드 비하인드 파일인 RssView.aspx.cs 파일에 코드를 추가하도록 하겠다. using 선언부에 "using System.Xml;" 선언을 추가한 후, Page_Load 이벤트 핸들러에 현재 등록된 RSS 주소의 카운트를 가져오는 코드와, RSS 주소의 카운트가 0 이상일 경우에 주소 목록과 포스트 목록을 가져오는 <리스트 11>의 코드를 추가한다.

-------------------------------------------------------------------------------------------------------------------
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
lblCount.Text = CommonUtility.GetRssAddressCount();

if (int.Parse(lblCount.Text) > 0)
{
DisplayRssAddressList();
DisplayRssItemList("");
}
}
else
{
lblInValid.Visible = false
lblInValid.Text = string.Empty;
}
}
-------------------------------------------------------------------------------------------------------------------
<리스트 11> Page_Load 이벤트 핸들러 코드

다음으로는, 등록된 RSS 주소의 목록과 등록된 포스트(Item)의 목록을 가져오는 메소드를 <리스트 12>와 같이 정의한다.

-------------------------------------------------------------------------------------------------------------------
private void DisplayRssAddressList()
{
DataTable dtAddressList = CommonUtility.GetRssAddressList();

if (dtAddressList != null && dtAddressList.Rows.Count > 0)
{
gvRssList.DataSource = dtAddressList.DefaultView;
gvRssList.DataBind();
}

RSSUpdatePanel.Update();
}

private void DisplayRssItemList(string strLink)
{
DataTable dtItemList = CommonUtility.GetRssItemList(strLink);

if (dtItemList != null && dtItemList.Rows.Count > 0)
{
gvPostList.DataSource = dtItemList.DefaultView;
gvPostList.DataBind();
}

PostUpdatePanel.Update();
}
-------------------------------------------------------------------------------------------------------------------
<리스트 11> Page_Load 이벤트 핸들러 코드

다음으로는 가장 중요한, 추가 버튼을 클릭했을 때인 btnAddRssAddress_Click 이벤트 핸들러의 코드를 추가해보도록 한다. 우선 추가하고자 하는 RSS 정보에 대한 XmlDocument 정보를 CommonUtility 클래스의 GetRssData()메소드를 통해 얻어온다.

-------------------------------------------------------------------------------------------------------------------
XmlDocument xmlDoc = CommonUtility.GetRssData(txtRssAddress.Text.Trim());
-------------------------------------------------------------------------------------------------------------------

XmlDocument가 Null이 아닐 경우에는, 반환된 XmlDocument에서 channel 노드를 찾아서 xChannel 변수명을 가진 XmlNode에 값을 할당한 후, xChannel의 하위 노드 중에서 item 노드를 찾는다. item 노드가 없을 경우에는 lblInValid 변수명을 가진 Label 컨트롤에 Item이 없다는 메시지를 출력해준다.

-------------------------------------------------------------------------------------------------------------------
if (xmlDoc != null && xmlDoc.ChildNodes.Count > 0)
{
XmlNode xChannel = xmlDoc.SelectSingleNode("//channel");
XmlNodeList xItems = xChannel.SelectNodes("item");

if (xItems == null || xItems.Count == 0)
{
lblInValid.Visible = true;
lblInValid.Text = "추가하려는 RSS에 Item이 없습니다.<br /><br />"
}
}
-------------------------------------------------------------------------------------------------------------------

Item이 있을 경우에는, RSS에 대한 정보를 추가한다. 이 때, 이미 추가된 RSS 정보를 추가하려고 하면, lblInValid 변수명을 가진 Label 컨트롤에 입력된 RSS가 이미 존재한다는 메시지를 출력하도록 하고, 그렇지 않은 경우에는 Item 노드의 pubDate 노드의 날짜 정보를 변경 후에, Item 정보를 입력한다.

-------------------------------------------------------------------------------------------------------------------
string strAddChannel = CommonUtility.InsertRssAddress(strChannelTitle, strChannelLink, strChannelDesc);

if (string.Compare(strAddChannel, "EXIST", true) == 0)
{
lblInValid.Visible = true;
lblInValid.Text = "입력한 RSS 주소가 이미 존재합니다.<br /><br />"
}
else
{
xChannel = CommonUtility.ConvertToFitDateTime(xChannel);
string strAddItem = CommonUtility.InsertRssItems(strChannelLink, xChannel);
}

-------------------------------------------------------------------------------------------------------------------

정상적으로 데이터베이스에 데이터들이 입력이 되었으면, 등록된 RSS의 개수를 나타내는 lblCount 변수명을 가진 Label 컨트롤의 값을 +1 해주고, 추가된 RSS 정보에 대한 주소 목록과 포스트 목록을 다시 가져온다.

-------------------------------------------------------------------------------------------------------------------
txtRssAddress.Text = string.Empty;
lblCount.Text = (int.Parse(lblCount.Text) + 1).ToString();

DisplayRssAddressList();
DisplayRssItemList(strChannelLink);
-------------------------------------------------------------------------------------------------------------------

지금까지 설명한, btnAddRssAddress_Click 이벤트 핸들러의 코드의 전체 코드는 <리스트 12>와 같다.

-------------------------------------------------------------------------------------------------------------------
protected void btnAddRssAddress_Click(object sender, EventArgs e)
{
XmlDocument xmlDoc = CommonUtility.GetRssData(txtRssAddress.Text.Trim());

try
{
if (xmlDoc != null && xmlDoc.ChildNodes.Count > 0)
{
XmlNode xChannel = xmlDoc.SelectSingleNode("//channel");

string strChannelTitle = xChannel.SelectSingleNode("title").InnerText;
string strChannelLink = xChannel.SelectSingleNode("link").InnerText;
string strChannelDesc = xChannel.SelectSingleNode("description").InnerText;
XmlNodeList xItems = xChannel.SelectNodes("item");

if (xItems == null || xItems.Count == 0)
{
lblInValid.Visible = true
lblInValid.Text = "추가하려는 RSS에 Item이 없습니다.<br /><br />"
}
else
{
string strAddChannel = CommonUtility.InsertRssAddress(strChannelTitle, strChannelLink, strChannelDesc);

if (string.Compare(strAddChannel, "EXIST", true) == 0)
{
lblInValid.Visible = true
lblInValid.Text = "입력한 RSS 주소가 이미 존재합니다.<br /><br />"
}
else
{
xChannel = CommonUtility.ConvertToFitDateTime(xChannel);
string strAddItem = CommonUtility.InsertRssItems(strChannelLink, xChannel);

if (string.Compare(strAddItem, "OK", true) != 0)
{
lblInValid.Visible = true
lblInValid.Text = "Item 값을 입력하는 중 오류가 발생하였습니다.<br /><br />"
}
else
{
txtRssAddress.Text = string.Empty;
lblCount.Text = (int.Parse(lblCount.Text) + 1).ToString();

DisplayRssAddressList();
DisplayRssItemList(strChannelLink);
}
}
}
}
else
{
lblInValid.Visible = true
lblInValid.Text = "정상적인 RSS 주소값을 받지 못했습니다.<br /><br />"
}
}
catch (Exception ee)
{
lblInValid.Visible = true
lblInValid.Text = ee.Message + "<br />" + ee.InnerException + "<br /><br />"
}
}

-------------------------------------------------------------------------------------------------------------------
<리스트 12> btnAddRssAddress_Click 이벤트 핸들러 코드

마지막 코드인, 등록된 RSS 주소 목록을 선택할 경우, 포스트 목록이 변경되기 위한, gvRssList_RowCommand 이벤트 핸들러 코드는 다음과 같이 구성된다.

-------------------------------------------------------------------------------------------------------------------
string strChannelLink = e.CommandName;

DisplayRssItemList(strChannelLink);
-------------------------------------------------------------------------------------------------------------------

RSS Viewer 실행하기

Ctrl+F5 또는 디버그 메뉴의 디버깅하지 않고 시작을 선택하여, 브라우저에 Rss Viewer 화면을 실행시킨다.. 그리고, 새로운 RSS 주소인 ASP.NET News(http://www.asp.net/news/rss.ashx)를 입력한 후, 추가 버튼을 클릭하면, 등록된 RSS 주소 목록과 포스트 목록에 동시에 ASP.NET News에서 제공하는 정보가 나타나게 된다.

<화면 8> 새로운 RSS 정보가 추가된 화면

새로운 RSS 주소를 추가할 때, “처리중입니다...”라는 글자가 잠시 나타났다가 사라지는 것을 볼 수 있다. 이것은 btnAddRssAddress 변수명을 가진 ImageButton 컨트롤의 Click이벤트로 인하여 비동기 포스트백을 진행하고 있는 동안, AddUpdateProgress 변수명을 가진 UpdateProgress 컨트롤에 의해서 나타나게 되는 글자이다. UpdateProgress 컨트롤의 ProgressTemplate 안에 사용자에게 보여주고자 하는 글자 또는 이미지를 넣으면, 비동기 포스트백을 진행하고 있는 동안 사용자에게 보여지게 된다.

<화면 9> UpdateProgress 컨트롤에 의해 나타나는 진행 표시

계속적으로 ASP.NET Team Blogs(http://weblogs.asp.net/aspnet-team/rss.aspx)와 ASP.NET Weblogs(http://weblogs.asp.net/MainFeed.aspx?GroupID=4)를 추가한다. 그리고, 등록된 RSS 주소 목록의 목록에서 등록된 RSS 주소를 선택하면, <화면 10>과 같이 포스트 목록이 선택된 RSS 주소에 등록된 포스트의 목록으로 화면의 깜빡임 없이 변경되게 된다.

<화면 10> 선택된 RSS에 대해 포스트 목록이 변경되는 화면

포스트 정보 보기 기능 추가

RSS Viewer가 정상적으로 잘 동작하는 것을 볼 수 있다. 하지만, 포스트 목록에 나와있는 포스트를 누르면, 아무런 동작도 하지 않는다. 포스트 목록에 나와있는 포스트를 누를 경우 포스트에 대한 정보를 보여주도록 ASP.NET AJAX 컨트롤 툴킷 중 ModalPopUp Extender 컨트롤을 사용하도록 하겠다. 웹 폼에서, “panPopUp" 변수명을 가진 Panel 컨트롤을 찾은 다음에, 도구 상자의 AJAX Control ToolKit 탭에서 ModalPopUp Extender를 선택한 후, Panel 컨트롤 하단으로 추가시킨다. 그리고, 다음과 같이 소스를 변경한다.

-------------------------------------------------------------------------------------------------------------------
<cc1:ModalPopupExtender ID="modalItemInfo" runat="server"
TargetControlID="lblItemTitle" PopupControlID="panPopUp"
BackgroundCssClass="modalBackGround" CancelControlID="btnCancel">
</cc1:ModalPopupExtender>
-------------------------------------------------------------------------------------------------------------------
웹 폼을 저장하고, 다시 Ctrl+5 또는 디버그 메뉴의 디버깅하지 않고 시작 메뉴를 선택한 후, 포스트 목록에 나와있는 포스트명을 클릭하면 선택한 포스트에 대한 정보가 나타나게 된다.

<화면 11> 선택한 포스트에 대한 정보가 나타나는 화면

RSS Viewer의 활용

이것으로써, ASP.NET과 ASP.NET AJAX를 이용하여, RSS Viewer를 만드는 것에 대한 설명은 모두 끝났다. 만드는 프로그램 자체가 너무 단순하다는 생각을 지울 수는 없지만, ASP.NET과 ASP.NET AJAX를 사용하면 개발자가 많은 코딩 없이, 사용자에게 효과적인 인터페이스를 제공한다는 것을 보여주고자 했던 것인만큼, 이 글을 읽는 여러분이 ASP.NET AJAX를 사용해봐야겠다라는 불씨를 지핀 것으로만 만족하고자 한다. 앞으로도 기회가 된다면, ASP.NET AJAX를 이용한 실무에 도움되는 글을 여러분에게 제공한다는 말을 남기고 이만 줄이고자 한다. 혹, 이 글을 읽고 궁금한 점이 있거나, 좋은 아이디어가 있으신 분들은, 필자의 블로그(http://www.neostyx.net)으로 와서 글을 남겨주기 바란다.

-------------------------------------------------------------------------------------------------------------------
참고 자료
http://cyber.law.harvard.edu/rss/rss.html
http://www.asp.net/AJAX/Documentation/Live/tutorials/ConsumingWebServicesWithAJAXTutorial.aspx
-------------------------------------------------------------------------------------------------------------------

---

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.