Using ASP.Net WebAPI with Web Forms
Asp.Net WebAPI is a framework for building RESTful HTTP services which can be used across a wide range of clients including web, phone and desktop applications. With WebAPI we can use XML and JSON to send and retrieve data from the service. The use of Json or XML makes it quite flexible to be used across a variety of devices.
Although WebAPI ships and installs with ASP.Net MVC 4, it can be used in normal Web Forms application as well.
In this example, we will use WebAPI with a traditional Web Forms application for adding and displaying a list of User Information. We will be using Visual Studio 2012 and .Net 4.5.
Creating the Project
Open Visual Studio 2012, Go To New -> Project. Select Visual C# -> Web from the left hand navigation and select project type as ASP.Net Web Forms Application. Enter the project name as WebAPIDemo
A new project will be created with a default template and our solution will show the following structure
Adding Model Class
We will then add a Model Class to our project. The Model class will represent the data in our application. We will add a model class called Users in our project
Right Click the Project in the Solution Explorer, Select Add -> Class from the Context Menu. The name of the class will be “Users” and it will have the following properties
namespace WebAPIDemo
{
public class Users
{
public int Id { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Company { get; set; }
public string Email { get; set; }
public string PhoneNo { get; set; }
}
}
The WebAPI can automatically serialize the model as JSON or XML object and will write the data in the body of the HTTP response. If the clients can read the serialize data, they will be able to deserialize it. Most of the clients are able to read the XML or JSON data. The clients can also specify the format it wants by setting the “Accept Header” property in the request message.
Creating The Repository
Ideally in a production scenario, we should be storing our data in some sort of persistent storage like database but to keep this demo simple, we will storing it in local memory.
To keep our storage implementation separate from the application code, we will be using Repository pattern. This way we can change our storage implementation at any future data without many changes to the application code.
We will start by creating a generic repository interface. Add a new class to the project and call it“IUserRepository”. It will have the following code
namespace WebAPIDemo
{
public interface IUserRepository
{
IEnumerable<Users> GetAllUsers();
string AddUser(Users user);
Users GetUserById(int id);
void DeleteUser(int id);
}
}
The “GetAllUsers” function return a list of the all the users. The “AddUser” function will add a new user and“GetUserById” will return a particular user based on the id that has been passed.
Add a Class to the solution called “UserRepository”. The class will implement the “IUserRepository” and will have the following implementation.
namespace WebAPIDemo
{
public class UserRepository : IUserRepository
{
private List<Users> userList = new List<Users>();
private int _id = 3;
public UserRepository()
{
userList.Add(new Users { Id = 1, FirstName = "Madhur", LastName = "Kapoor", Company = "ABC", Email = "madhur@abc.com", PhoneNo = "65431546" });
userList.Add(new Users { Id = 2, FirstName = "Alan", LastName = "Wake", Company = "XYZ Corp", Email = "alan@xyz.com", PhoneNo = "64649879" });
}
public IEnumerable<Users> GetAllUsers()
{
return userList;
}
public string AddUser(Users user)
{
user.Id = _id++;
userList.Add(user);
return "User added";
}
public Users GetUserById(int id)
{
var user = userList.FirstOrDefault<Users>((p) => p.Id == id);
if (user == null)
{
throw new HttpResponseException(HttpStatusCode.NotFound);
}
return user;
}
public void DeleteUser(int id)
{
var user = userList.FirstOrDefault<users>((p) => p.Id == id); if (user == null)
{
throw new HttpResponseException(HttpStatusCode.NotFound);
} userList.Remove(user);
}
}</users>
In the class, we are using a local variable “userList” to store all the users. In the constructor, we are adding a few records to the list.
The “AddUser” function adds a new user to the list with a new Id.
The “GetUserByID” function uses a LINQ query to return the user with the specified id. If the user is not found, an HTTPResponseException is thrown which is interpreted by browser as “404” error.
You will need to add a reference to the “System.Web.Http” for the HttpResponseException class to work.
Creating The WebAPI Controller
We will now add a WebAPI controller to the solution. A WebAPI controller is a class that handles the HTTP request by the clients. WebAPI Controllers are similar to MVC Controllers except they derive from “ApiController” class instead of “Controller” class.
Right Click the solution, select Add -> Web API Controller Class. Name the Controller class as “UserController”.
The controller class will have some default function for Get, Put, Delete etc. Delete those functions and add the following functions so the code will look like below.
namespace WebAPIDemo
{
public class UserController : ApiController
{
static IUserRepository repository = new UserRepository(); public IEnumerable<Users> GetAllUsers()
{
var users = repository.GetAllUsers();
return users;
} public Users GetUserById(int id)
{
var user = repository.GetUserById(id);
return user;
}
public string AddUser(Users user)
{ var response = repository.AddUser(user);
return response;
}
public void DeleteUser(int id)
{
repository.DeleteUser(id);
}
}
}
Adding Route in Global.asax
For the controller to handle requests of a particular type, we will have to define a route in the Global.asax file.
Open global.asax file and add the following code in the “Application_Start” method
RouteTable.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = System.Web.Http.RouteParameter.Optional }
);
The controller will now be able to handle request of type “api/User/”
Testing The WebAPI
We will now Test our WebAPI by running it in the browser. Run the Web Application by pressing “Ctrl + F5” or going to “Debug -> Start Debugging” from the Visual Studio menu.
On running the application, the “Default.aspx” page will open. The URL will be something likehttp://localhost:56851/Default.aspx where 56851 will be port number.
To Test the WebAPI, we will have to use the URL as defined in the Route. Enter the following URL in the browserhttp://localhost:56851/api/User/ (Replace 56851 with your port number)
The result will depend upon the type of browser you are using. In Internet Explorer, you will be prompted to save a file named “User”.
The file contains the Http response. Select “Open” and in the “Open with” dialog, select “Notepad” to open the file.
The Notepad will show the data in the JSON format which has been returned by the WebAPI.
[{"Id":1,"FirstName":"Madhur","LastName":"Kapoor","Company":"ABC","Email":"madhur@abc.com","PhoneNo":"65431546"},{"Id":1,"FirstName":"Alan","LastName":"Wake","Company":"XYZ Corp","Email":"alan@xyz.com","PhoneNo":"64649879"}]
If you are using Chrome or Firefox, you are likely to get a XML representation of the data. This is because Internet Explorer and Firefox send different “Accept Header” with the request and so the WebAPI returns different content type.
If you are using Internet Explorer with Developer tools, you can check the Request header that is being sent by the browser.
Just Open the Developer tools by pressing F12, go to network option and Enable “Start Capturing” and then with developer tools open, enter the WebAPI URL in the browser and press enter
If you use the following URL “ http://localhost:56851/api/User/1 (Replace 56851 with your port number)”
It will return the user whose ID is ‘1’. Typing an ID that does not exist will result in a “Page Not Found” error.
Calling WebAPI with JQuery
Now we will call the WebAPI using JQuery and will display the result in a web page.
In the “Default.aspx” file, we will use the following code for the body section to display the data
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<h2>My Address Book</h2>
<br />
<table>
<thead>
<tr>
<td>Id</td>
<td>Full Name</td>
<td>Company</td>
<td>Phone</td>
<td>Email</td>
</tr>
</thead>
<tbody id="usersection">
</tbody>
</table>
<br />
<br />
<h2> Add A Contact</h2>
<table>
<tr>
<td>First Name</td>
<td>
<asp:TextBox runat="server" ID="txtFirstName" /></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<asp:TextBox runat="server" ID="txtLastName" /></td>
</tr>
<tr>
<td>Company</td>
<td>
<asp:TextBox runat="server" ID="txtCompany" /></td>
</tr>
<tr>
<td>Phone</td>
<td>
<asp:TextBox runat="server" ID="txtPhone" /></td>
</tr>
<tr>
<td>Email</td>
<td>
<asp:TextBox runat="server" ID="txtEmail" /></td>
</tr>
<tr>
<td>
<asp:Button Text="Save" runat="server" ID="btnSave" />
</td>
</tr>
</table>
<br />
<br />
<asp:TextBox ID="txtSearch" runat="server" />
<asp:Button ID="btnSearch" runat="server" Text="Search" OnClientClick="search();return false;" />
<br />
<br />
<p id="searchResult" >
</p>
<br />
<br />
<asp:TextBox ID="txtDelete" runat="server" />
<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClientClick="deleteuser();return false;" />
</asp:Content>
Include a reference to JQuery in your project in the head section
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
Getting list Of Users
To get a list of users, we will send a Get Request to the “api/User”
$(document).ready(function () {
$.getJSON("api/User", function (data) {
$('#usersection').empty();
$.each(data, function (key, val) {
var row = "<tr><td>" + val.Id + "</td><td>" + val.LastName + ", " + val.FirstName + "</td><td>" + val.Company +
"</td><td>" + val.PhoneNo + "</td><td>" + val.Email + "</td></tr>";
$(row).appendTo($('#usersection'));
});
});
});
We use the “getJSON” JQuery function to send the GET Request specifying the URL. The second parameter is the callback function which will be called once the request is completed successfully. The “data” object will contains a list of JSON or XML objects which will be returned by the service.
Once we get the “data” from the API, we are iterating through the data and appending it to the body section of the table.
The “getJSON” function is called in the “document.ready” function so that it executed immediately when the page executes. On running the application now, you will get the following page
The default records which we added are displayed
Adding a User
We will now add a user using a Post Request using JQuery Ajax. As you can see, we have already created a form for entering the data. Once the save button is clicked, the following function is called
function insertData() {
var Emp = {};
Emp.FirstName = $("#<%=txtFirstName.ClientID %>").val();
Emp.LastName = $("#<%=txtLastName.ClientID %>").val();
Emp.PhoneNo = $("#<%=txtPhone.ClientID %>").val();
Emp.Company = $("#<%=txtCompany.ClientID %>").val();
Emp.Email = $("#<%=txtEmail.ClientID %>").val();
$.ajax({
url: "<%=Page.ResolveUrl("/api/User/AddUser")%>",
type: "POST",
contentType: "application/json;charset=utf-8",
data: JSON.stringify(Emp),
dataType: "json",
success: function (response) {
alert(response);
getAllContacts();
},
error: function (x, e) {
alert('Failed');
alert(x.responseText);
alert(x.status);
}
});
}
We are using the “ajax” method of JQuery to send a POST request to the the “api/User/AddUser” URL. As the“AddUser” function expects an object of type “User”, we create a JSON object and pass it with the request. The“success” function will be called if the request is successful and the response will be shown. In case of any error, the “error” function will be called.
Try adding a User. If everything is successful, you will get the following response. (Note: Ideally there should be validation on user input, for keeping the tutorial simple, I have not added any validation)
On Clicking Ok, the list will be updated and the new added user will be visible
Adding Search Function
To get a User by ID, we will call the “api/User/Id” passing the id of the user we want to display.
The code which is going to get called on Search button click will be
function search() {
var id = $('#<%=txtSearch.ClientID %>').val();
$.getJSON("api/User/" + id,
function (data) {
var str = data.Id + ' - ' + data.LastName + ", " + data.FirstName + " - " + data.Company;
$('#searchResult').text(str);
})
.fail(
function (jqXHR, textStatus, err) {
$('#searchResult').text('Error: ' + err);
});
}
We call the Jquery “getJSON” function but this time we are passing the ID with the URL and the API will return a single JSON object if the User is found.
If no user exists with the ID, we will get an error as shown below
Adding Delete Functionality
To Delete the User, we will call the "api/User/id" and we will pass the id of the user which we want to delete. This time we will call the function using the Delete Http verb.
Here is the function which is getting called on Delete button click
function deleteuser() {
var id = $('#<%=txtDelete.ClientID %>').val();
$.ajax({
url: "<%=Page.ResolveUrl("/api/User/")%>" + id,
type: "DELETE",
contentType: "application/json;charset=utf-8",
success: function (response) { alert("User Deleted");
getAllContacts(); }, error: function (x, e) {
alert("Id Not Found"); }
});
}
If the id is not found, a 404 exception will be raised else the user will be deleted.
The Complete Code for the Default.aspx file can be found in the attached solution
We can also add the Update functionality to the application in similar manner. WebAPI can be used with Asp.Net MVC in a similar fashion.
Do leave your feedback and issues in the comments.
Using ASP.Net WebAPI with Web Forms的更多相关文章
- 在asp.net WebAPI 中 使用Forms认证和ModelValidata(模型验证)
一.Forms认证 1.在webapi项目中启用Forms认证 Why:为什么要在WebAPI中使用Forms认证?因为其它项目使用的是Forms认证. What:什么是Forms认证?它在WebAP ...
- [重点翻译] ASP.NET 4.6的更新 -- 本文只摘录 Web Forms的部分
原文出处:[重点翻译] ASP.NET 4.6的更新 -- 本文只摘录 Web Forms的部分 http://www.dotblogs.com.tw/mis2000lab/archive/2015/ ...
- 【翻译】使用Knockout, Web API 和 ASP.Net Web Forms 进行简单数据绑定
原文地址:http://www.dotnetjalps.com/2013/05/Simple-data-binding-with-Knockout-Web-API-and-ASP-Net-Web-Fo ...
- Knockout, Web API 和 ASP.Net Web Forms 进行简单数据绑定
使用Knockout, Web API 和 ASP.Net Web Forms 进行简单数据绑定 原文地址:http://www.dotnetjalps.com/2013/05/Simple-da ...
- [转]Bootstrap 3.0.0 with ASP.NET Web Forms – Step by Step – Without NuGet Package
本文转自:http://www.mytecbits.com/microsoft/dot-net/bootstrap-3-0-0-with-asp-net-web-forms In my earlier ...
- Using Friendly URLs in ASP.NET Web Forms
Introduction Websites often need to generate SEO friendly URLs. In ASP.NET Web Forms applications, a ...
- Asp.Net学习进度备忘(第一步:ASP.NET Web Forms)
书签:“Web Pages”和“MVC”跳过:另外跳过的内容有待跟进 __________________ 学习资源:W3School. _________________ 跳过的内容: 1.ASP. ...
- ASP.NET Web Forms的改进
虽然ASP.NET Web Forms不是vNext计划的一部分,但它并没有被忽视.作为Visual Studio 2013 Update 2的一部分,它重新开始支持新工具.EF集成和Roslyn. ...
- ASP.NET Web Forms 4.5的新特性
作者:Parry出处:http://www.cnblogs.com/parry/ 一.强类型数据控件 在出现强类型数据控件前,我们绑定数据控件时,前台一般使用Eval或者DataBinder.Eval ...
随机推荐
- c++builder CryptoAPI md5
#include <wincrypt.h> DWORD GetHash( CONST BYTE * pbData, DWORD dwDataLen, ALG_ID algId, LPTST ...
- CameraComponent Quality
CameraComponent1.Quality := TVideoCaptureQuality.HighQuality; procedure TCameraComponentForm.Set720p ...
- UVALive 5888 Stack Machine Executor (栈+模拟)
Stack Machine Executor 题目链接: http://acm.hust.edu.cn/vjudge/problem/26636 Description http://7xjob4.c ...
- 文本读写vs二进制读写
[文本读写vs二进制读写] 在学习C语言文件操作后,我们都会知道打开文件的函数是fopen,也知道它的第二个参数是 标志字符串.其中,如果字符串中出现'b',则表明是以打开二进制(binary)文件, ...
- linux 课后作业
第一章 第一单元 : 安装linux 系统:已完成 第二单元: 略 第三单元: 1) 要求以root用户登录系统,右击桌面打开终端,查看当前登陆Linux系统所使用的用户名2) 查看哪些用户在系统上工 ...
- UIView的autoresizingMask属性
今天做相册列表的时候,发现有些 UITableViewController 属性不好记忆,然后就查找了一些资料.做一下备份. 在 UIView 中有一个autoresizingMask的属性,它对应的 ...
- HDU1712简单的分组背包
HDU1712http://acm.hdu.edu.cn/showproblem.php?pid=1712 简单的分组背包 #include <map> #include <set& ...
- C# 运用params修饰符来实现变长参数传递
一般来说,参数个数都是固定的,定义为集群类型的参数可以实现可变数目参数的目的,但是.NET提供了更灵活的机制来实现可变数目参数,这就是使用params修饰符.可变数目参数的好处就是在某些情况下可以方便 ...
- jdbc调用存储过程的方法
----------------------------jdbc调用存储过程的方法---------------------------------------------------private ...
- MVVM解决方案的一般结构
解决方案的结构一般是三个解决方案文件夹,分别是: Models ViewModels Views 当然需要的话可以扩充,如Services.UnitTest等等. 然后每个解决方案文件夹里面包含各自的 ...