본문 바로가기

Programming/.NET

[ASP.NET MVC] Web API

Web API는 AJAX와 비슷한 동작방식을 통해 데이터및 저장소처리작업등을 단일 페이지안에서 모두 처리가 가능하도록 하는 기술입니다. 이 기술을 실제 활용해 보기 위해 예제를 만들어 볼텐데, 예제 프로젝트는 생성할때 다음과 같이 Web API 부분을 먼저 체크하여 Web API구현에 필요한 요소가 프로젝트에 추가될 수 있도록 해야합니다.

 

 

이렇게 프로젝트가 생성한 후

 

public class Member
{
    public string Id { getset}
    public string Name { getset}
    public int Level { getset}
}

 

간단한 Model을 생성하고

 

public class Members
{
    private static Members mbs = new Members();

    public static Members GetMbs
    {

         get { return mbs}
    }

    public List<MemberMemberList = new List<Member{
        new Member { Id = "cliel1"Name = "홍길동"Level = 10 },
        new Member { Id = "cliel2"Name = "홍길순"Level = 20 },
        new Member { Id = "cliel3"Name = "홍길남"Level = 30 },
        new Member { Id = "cliel4"Name = "홍길영"Level = 40 },
        new Member { Id = "cliel5"Name = "홍길석"Level = 50 }
    };

    public IEnumerable<MemberGetMember()
    {
        return MemberList;
    }

    public Member GetById(string id)
    {
        return MemberList.Where(x => x.Id == id).First();
    }

    public bool AddMember(Member m)
    {
        MemberList.Add(m);

         return true;
    }

    public bool RemoveMember(string id)
    {
        Member m = GetById(id);
        MemberList.Remove(m);

        return true;
    }

    public bool ModifyMember(Member m)
    {
        Member mb = GetById(m.Id);

        if (mb == null)

             return false;

        mb.Name = m.Name;
        mb.Level = m.Level;

        return true;
    }
}

 

해당 Model을 대상으로 가져오기및 추가, 삭제가 가능한 별도의 클래스를 구현합니다.

 

public class MyController : ApiController
{
    private Members mbs = Members.GetMbs;

    // GET: Home
    public IEnumerable<MemberGetMembers()
    {
        return mbs.GetMember();
    }

    public Member GetMember(string id)
    {
        return mbs.GetById(id);
    }

    public bool AddMember(Member m)
    {
        return mbs.AddMember(m);
    }

    public bool RemoveMember(string id)
    {
        return mbs.RemoveMember(id);
    }

    public bool ModifyMember(Member m)
    {
        return mbs.ModifyMember(m);
    }
}

 

그리고 조금은 특별한 Controller를 하나를 생성해야 하는데 Web API에서 중요한 부분입니다. 이 컨트롤러는 ApiController를 상속받아야 하며 일반적인 액션메서드와는 달리 이 컨트롤러의 액션메서드는 Model개체 자체를 반환하는 성격을 가져야 합니다.

 

위와 같은 컨트롤러를 생성하고 예제 프로그램을 실행시킨뒤 /api/my 로 이동하면 MyController의 GetMembers 메서드가 실행되고 json이나 XML데이터를 통해 IEnumerable 형식의 Member 개체를 반환할 것입니다. 이러한 동작이 가능한 이유는 프로젝트에 Web API 동작을 위한 별도의 라우팅구성을 마련했고 그 설정을 WebApiConfig.cs 파일을 통해 제공하고 있기 때문입니다.

 

public static void Register(HttpConfiguration config)
{
    // Web API configuration and services

    // Web API routes
    config.MapHttpAttributeRoutes();

    config.Routes.MapHttpRoute(
        name"DefaultApi",
        routeTemplate"api/{controller}/{id}",
        defaultsnew { id = RouteParameter.Optional }
    );
}

 

따라서 /api/my 의 이동은 아무런 매개변수 전달이 없는 HTTP요청이 되고 이 매개변수없는 요청은 GetMembers() 메서드와 일치하여 최종적으로 Member의 배열요소를 반환할 수 있게 되는 것입니다. 만약 api/my/cliel3 URL을 요청하게 되면 이 요청은 id값의 매개변수를 가진 요청이 되고 이것은 우선적으로 GetMember(id) 메서드와 일치하여 cliel3의 id에 해당하는 Member개체를 반환하게 됩니다.

 

참고로 URL매칭같은 Get이외에 Post와 같은 요청에서만 일치되는 메서드를 지정하고 싶다면 [HttpPost]와 같은 속성을 메서드에 지정하면 됩니다.

 

Web API구현은 이것으로 끝났습니다. 단지 클래스하나를 만드는 것만으로 Web API를 사용할 수 있으며 이제 컨틀롤러를 활용할 HomeController와 Index뷰를 생성해 보도록 하겠습니다.

 

@model WebApplication1.Models.Member

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-3.1.1.js"></script>
    <script type="text/javascript">
        var getMembers = function () {
            $.ajax('/api/my'{ type: "GET", success: printList });
        };

        var printList = function (d) {
            $('#tbl_list tr').remove();

            for (var i = 0; i < d.length; i++)
                $('#tbl_list').append('<tr><td>' + d[i].Id + '1</td><td>' + d[i].Name + '1</td><td>' + d[i].Level + '1</td></tr>');
        };

        $(function () {
            getMembers();
        });
    </script>
    <title>Index</title>
</head>
<body>
    <table id="tbl_list">
        <tr><td>Member List</td></tr>
    </table>
    <br />
</body>

</html>

Index에서는 JQuery를 이용하여 위에서 만든 Web API 와 통신할 수 있는 AJAX구현을 통해 초기 페이지가 열릴때 Member개체의 리스트를 받아오도록 하였습니다.

 

<script type="text/javascript">
    var getMembers = function () {
        $.ajax('/api/my'{ type: 'GET', success: printList });
    };

    var removeMember = function (id) {
        $.ajax('/api/my/' + id, { type: 'DELETE', success: getMembers });
    };

    var printList = function (d) {
        $('#tbl_list tr').remove();

        for (var i = 0; i < d.length; i++)
            $('#tbl_list').append('<tr><td>' + d[i].Id + '</td><td>' + d[i].Name + '</td><td>' + d[i].Level + '</td><td><input type="button" onclick="removeMember(\'' + d[i].Id + '\');" value="삭제" /></td ></tr > ');
    };

    $(function () {
        getMembers();
    });
</script>

 

스크립트를 수정하여 이번에는 리스트를 가져올때 각 명단측면에 '삭제'버튼이 존재하도록 하였습니다. 사용자가 삭제버튼을 누르면 removeMember 메서드가 호출되고 DELETE 요청이 들어가 해당 Member를 삭제할 것입니다.

 

[HttpDelete]
public bool RemoveMember(string id)
{
    return mbs.RemoveMember(id);
}

 

참고로 MyController의 RemoveMember메서드에서는 Delete 요청을 받아들일 수 있도록 속성을 추가 하였습니다.

 

@model WebApplication1.Models.Member

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-3.1.1.js"></script>
    <script type="text/javascript">
        var getMembers = function () {
            $.ajax('/api/my'{ type: 'GET', success: printList });
        };

        var removeMember = function (id) {
            $.ajax('/api/my/' + id, { type: 'DELETE', success: getMembers });
        };

        var addMember = function () {
            var member = { Id: $('#id').val(), Name: $('#Name').val(), Level: $('#Level').val() };
            $.ajax({
                type: 'POST',
                data: JSON.stringify(member),
                url: 'api/my/AddMember',
                contentType: 'application/json',
                success: getMembers
            });
        };

        var printList = function (d) {
            $('#tbl_list tr').remove();

            for (var i = 0; i < d.length; i++)
                $('#tbl_list').append('<tr><td>' + d[i].Id + '</td><td>' + d[i].Name + '</td><td>' + d[i].Level + '</td><td><input type="button" onclick="removeMember(\'' + d[i].Id + '\');" value="삭제" /></td ></tr > ');
        };

        $(function () {
            getMembers();
        });
    </script>
    <title>Index</title>
</head>
<body>
    <table id="tbl_list">
        <tr><td>Member List</td></tr>
    </table>
    <br />
    @Html.TextBoxFor(x => x.Id)<br />
    @Html.TextBoxFor(x => x.Name)<br />
    @Html.TextBoxFor(x => x.Level)<br />
    <input type="button" onclick="javascript: addMember()" value="추가" />
</body>
</html>

 

마지막으로 Member를 추가하는 경우입니다. 추가버튼을 누르면 addMember 메서드를 호출하게 되고 이 메서드에서 Member 속성에 맞는 각 입력값들로 member개체를 만들어 POST로 Web Api에 전달하여 Member개체를 추가할 것입니다.

 

이때 url속성을 'api/my/AddMember'로 명시적으로 지정하였는데 이 URL을 사용하기 위해 라우팅구성을 다음과 같이 추가하였습니다.

 

config.Routes.MapHttpRoute(
    name"ControllerAndAction",
    routeTemplate"api/{controller}/{action}"
);

config.Routes.MapHttpRoute(
    name"DefaultApi",
    routeTemplate"api/{controller}/{id}",
    defaultsnew { id = RouteParameter.Optional }
);

 

'Programming > .NET' 카테고리의 다른 글

[C#] 자동구현속성  (0) 2018.04.17
[C#] 익명메서드(anonymous method)  (0) 2018.04.10
[ASP.NET MVC] Web API  (0) 2018.03.28
[ASP.NET MVC] 필터(Filter)  (0) 2018.03.20
[ASP.NET MVC] 컨트롤러(Controller)  (0) 2018.03.14
[C#] File / FileInfo  (0) 2018.03.07

태그