Introduction
This text gives you step-by-step directions for creating an ASP.NET Internet API service, utilizing Entity Framework, and publishing it in Azure.
Stipulations
Fundamental information of ASP.NET Internet API, Entity Framework, Kendo UI Framework, and Azure Internet apps.
Create an SQL Database in Azure
Let’s begin with making a database in Azure. Please examine right here how to create a brand new database in Azure.
I’ve created a brand new database in Azure. Join the database in SSMS (SQL Studio Administration Service), as proven within the picture under.
The script for making a desk is given under.
CREATE TABLE Worker
(
EmployeeID INT IDENTITY(1,1) CONSTRAINT Pk_Emp_Id PRIMARY KEY,
FirstName VARCHAR(20),
LastName VARCHAR(20)
);
Insert some pattern information, as proven under.
INSERT INTO Worker VALUES('Bob','Ross');
INSERT INTO Worker VALUES('Pradeep','Raj');
INSERT INTO Worker VALUES('Arun','Kumar');
INSERT INTO Worker VALUES('Vasanth','Kumar');
Create a brand new ASP.NET Internet API utility
Create a brand new ASP.NET Internet API Utility, as per the next figures. Open Visual Studio ->File ->New venture ->ASP.NET Internet Utility.
Be certain that, the host in Cloud is checked and click on OK.
As soon as Azure Internet app settings are configured, click on OK.
Allow us to begin making a Mannequin within the utility.
Generate the Mannequin
Now, we are going to create Entity Framework Fashions from the database tables.
Step 1. Proper-click the Fashions folder, choose Add, and New Merchandise.
Step 2. Within the Add New Gadgets window, choose information within the left pane and ADO.NET Entity Information Mannequin from the middle pane. Title the brand new Mannequin file as Worker and click on Add.
Step 3. Within the Entity Information Mannequin wizard, choose EF Designer from the database and click on Subsequent.
Step 4. Click on the New Connection button.
Step 5. Within the Connection Properties window, present the identify of the Azure SQL Server the place the database was created. After offering the Server identify, choose Worker from the accessible databases and click on OK.
Step 6. You should use the default identify for connection to save lots of on the Internet. Config the file and click on Subsequent.
Step 7. Choose the desk to generate fashions for the Worker desk and click on End.
Create a Controller
Create a brand new empty Controller. Proper-click the Controllers folder and choose Add –> New Empty Internet API 2 Controller. In my case, I named it as EmployeeCRUD Controller.
Write the code, given under, within the Controller file.
public class EmployeesController : ApiController
{
non-public EmployeeEntities db = new EmployeeEntities();
// GET: api/Staff
public IQueryable<Worker> GetEmployees()
{
return db.Staff;
}
// PUT: api/Staff/5
public HttpResponseMessage PutEmployee(Worker worker)
{
if (!ModelState.IsValid)
{
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
}
db.Entry(worker).State = EntityState.Modified;
strive
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException ex)
{
return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
}
return Request.CreateResponse(HttpStatusCode.OK);
}
// POST: api/Staff
public HttpResponseMessage PostEmployee(Worker worker)
{
if (!ModelState.IsValid)
{
db.Staff.Add(worker);
db.SaveChanges();
HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, worker);
response.Headers.Location = new Uri(Url.Hyperlink("DefaultApi", new { id = worker.EmployeeID }));
return response;
}
else
{
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
}
}
// DELETE: api/Staff/5
public HttpResponseMessage DeleteEmployee(Worker worker)
{
Worker remove_employee = db.Staff.Discover(worker.EmployeeID);
if (remove_employee == null)
{
return Request.CreateResponse(HttpStatusCode.NotFound);
}
db.Staff.Take away(remove_employee);
strive
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException ex)
{
return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
}
return Request.CreateResponse(HttpStatusCode.OK);
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
non-public bool EmployeeExists(int id)
{
return db.Staff.Depend(e => e.EmployeeID == id) > 0;
}
}
Create a brand new HTML web page within the venture the place we carried out Kendo Grid with the CRUD operation, to check the REST API Service after publishing the Utility.
EmployeeGrid.html
<!DOCTYPE html>
<html>
<head>
<hyperlink rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/kinds/kendo.widespread.min.css" />
<hyperlink rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/kinds/kendo.default.min.css" />
<hyperlink rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/kinds/kendo.dataviz.min.css" />
<hyperlink rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/kinds/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<title></title>
</head>
<physique>
<script>
$(doc).prepared(operate () {
dataSource = new kendo.information.DataSource({
transport: {
learn: {
url: "/api/Staff",
dataType: "json",
},
destroy: {
url: "/api/Staff",
sort: "DELETE"
},
create: {
url: "api/Staff",
sort: "POST"
},
replace: {
url: "api/Staff",
sort: "PUT",
parameterMap: operate (choices, operation) {
if (operation !== "learn" && choices.fashions) {
return {
fashions: kendo.stringify(choices.fashions)
};
}
}
},
},
schema: {
mannequin: {
id: "EmployeeID",
fields: {
EmployeeID: { editable: false, nullable: true, sort: "quantity" },
FirstName: { editable: true, nullable: true, sort: "string" },
LastName: { editable: true, nullable: true, sort: "string" },
}
}
}
});
$("#grid1").kendoGrid({
dataSource: dataSource,
editable: "inline",
toolbar: ["create"],
columns: [
{ field: "EmployeeID", title: "Employee ID" },
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" },
{
command: ["edit",
{
name: "destroy",
text: "remove",
}
],
}
],
top: "500px",
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
}).information("kendoGrid");
});
</script>
<div class="main-content">
<div id="grid1"></div>
</div>
</physique>
</html>
Now, it’s time to publish the app.
Proper-click on the venture in Answer Explorer and click on Publish.
Choose the just lately created Internet app for the Utility and click on OK.
Verify the ApplicationDbContext and EmployeeEntities and click on Subsequent.
Click on Publish to start out the method.
As soon as the publishing is accomplished, simply take a look at the REST API Service, utilizing Fiddler/PostMan.
Testing the GET service
URL: myapi5942.azurewebsites.web/api/Staff
Response
Take a look at the CRUD operation in Kendo Grid, utilizing the Companies, that are printed in Azure.
GET
URL: myapi5942.azurewebsites.web/api/Staff
Kind: GET
CREATE
URL: myapi5942.azurewebsites.web/api/Staff
Kind: POST
DELETE
URL: myapi5942.azurewebsites.web/api/Staff
Kind: Delete
UPDATE
URL: myapi5942.azurewebsites.web/api/Staff
Kind: PUT
Conclusion
We’ve got seen how one can create ASP.NET Internet API in Azure App Service and we went via the short demo of CRUD operation in Kendo Grid which consumes the REST API companies that we now have created and deployed as Azure Internet app.
I hope you loved this text. Your precious suggestions, questions, or feedback about this text are all the time welcome.
Know extra about our firm at Skrots. Know extra about our companies at Skrots Companies, Additionally checkout all different blogs at Weblog at Skrots
