Monday, 8 January 2018
Monday, 1 January 2018
sliding banner, html, css, jquery
sliding banner
THE FOUR ELEMENTS: EARTH, AIR, FIRE, WATER
In western astrology, it is believed that the universe is formed by the four elements: Earth, Air, Fire, Water. These are the outward manifestations of the true Elements. Each of the four elements contains its own unique properties, which work simultaneously to create one united universe. None of the elements are inherently good or bad, however, each has both positive and negative qualities.Whether you're loud or quiet, timid or outgoing, impetuous or logical - your personality is filled with both pros and cons. Nobody is perfect and it is difficult to self-evaluate in order to understand our base emotions and desires. That's why finding your element is so important. As you read over the qualities associated with each of the four elements, you might have your "A-ha!" moment, or you might feel as though you don't relate to certain aspects. This is because every person is at a different point in his or her path to developing the human spirit. By finding your element, you'll be able to better appreciate your own strengths and be more self aware of your weaknesses. This understanding will help you to build better, stronger relationships with those around you. Let your element be a guide to a more intuitive self.
air
Air is also what gives humans the ability for speech. Because of this you are witty and entertaining and are a welcomed guest at any party. Be aware that while you have charm, you sometimes lack social graces. Your focus is placed so often on logic, that you often overlook feelings. Commitment doesn't come naturally to you. Couple this with your sometimes insensitive nature and it makes relationships very difficult. You are not rooted in tradition. You go with what makes sense and don't believe in doing something because "it's how it has always been done." This propensity for what others see as "radical thinking" and your quick mind makes you a natural born puppet master. While Fire may be the face of the uprising, you are the brains behind it.
Strengths:
ThoughtfulWitty
Charming
Care free
Independent
Flexible
Weaknesses:
InconsistentInsensitive
Selfish
Flaky
Dishonest
earth
You are an artist and love to create. Your home is welcoming and warm and always open to friends and family, which is fitting considering you're a bit of a homebody. While you are always friendly, you do not let people into the inner circle easily. However, once you do, you are loyal to a fault. On the opposite side of this, you can sometimes be overprotective. As it is impossible to stop the world from turning, it is also impossible to change your mind once it has been made up. You are stubborn and bull-headed and will often stick to your position for no other reason than it is your position. In relationships, you are empathetic and nurturing and don't mind waiting out a few rough patches. But be careful, this also makes it easy for others to walk all over you.
Strengths:
Stable and consistentHard-working
Loyal
Nurturing
Logical
Empathetic
Weaknesses:
LazyScornful
Overly cautious
Stubborn to the point of impractical
Rigid
fire
However, be wary. You can also easily turn a positive into a negative. Your passion turns to anger quickly and blinds you when hurting those close. When not contained, Fire spreads to anything nearby and so do you. You are often unfaithful and will follow any lead to serve your own self-interest. Fire needs other elements to survive. While Air will make it grow, Earth will keep it burning steadily. The same is true for you. Your loved ones are what motivate you and keep you stable. Without them, your passion turns to obsession and you quickly exhaust yourself.
Strengths:
PassionateBright
Charismatic
Focused
Decisive
Daring
Weaknesses:
Prone to anger and rageObsessive
Unfaithful
Jealous
Easily irritated
Vindictive
water
However, your ability to connect so deeply also makes you prone to carrying other people's burdens. This compassion for others leaves your own needs neglected. Too many built up negative emotions can lead to depression and often addiction. Your emotions ebb and flow, making you sometimes volatile and irrational. You often feel the need to bring up deep topics during lighthearted situations, much to the annoyance of others. You must find balance in learning to help others and learning to help yourself in order to find harmony.
Strengths:
UnderstandingTrusting
Devoted
Forgiving
Flexible
Weaknesses:
UnstableProne to depression
Irrational
Gullible
Lack of self
-------------------------------------------------------------------------------
<!--
<html>
<head>
<title>slider</title>
<style>
body {
}
#title {
text-align: center;
}
.window{
margin:50px auto;
width:300px;
height:300px;
border: 2px solid blue;
z-index:1;
}
.window:hover{
cursor: pointer;
}
.button_round {
position: absolute;
width: 50px;
height: 50px;
border: 1px solid red;
border-radius: 50%;
z-index: 3;
top: 225px;
left: 50%;
}
#button_left {
margin-left: -280px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9_MNI0Xt29DvW5jPzMAAaQ8_nIrQeZjmOymtAI1e0LD-r_G_OKNow6t1Na8ea6qE2MA5zigsMAHD00hqA-__E3430opqiqI6RCyHSopaFoGGeOaporevXPJHnC8mDibDnoeQkTEp6kgY/s1600/left.png") no-repeat;
background-size: contain;
}
#button_right {
margin-left: 230px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Komn6lTmzZ92Z06uaRqwieeefxfVPhTmz2hwWktPuSr8Oq9yTzv4hDr1T20sXzd4R22j01wppArxMNX-b4AAaUlrAh6OvlXNcAbtNNPdU0RoKKfoKMe8Q-V4_91pI_LbNby-31wQhgs/s1600/right.png") no-repeat;
background-size: contain;
}
.slides {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRR34BTmN5ibJ76xkKDoe5nLruBdalT8b-hOmtZLOwopvIItEzUTI0u-txdljFQVVH6Va5ilnUJhnyKNuDg90mj1o1VPowt8-8ZCw8NgBLkiEeaeg2Yo5tsIRe4qKOLFkSjG-BdAOGNUE/s1600/elements.jpg") no-repeat;
height: 300px;
width: 300px;
position: absolute;
z-index: 2;
}
#slide1 {
background-position: 0 0;
}
#slide2{
background-position:0 -300px;
margin-left:300px;
}
#slide3 {
background-position: -300px 0;
margin-left: 600px;
}
#slide4 {
background-position: -300px -300px;
margin-left: 900px;
}
#choice{
text-align:center;
color:red;
}
#singleElement{
margin:50px auto;
width:300px;
height:300px;
}
.goBack {
position: relative;
width: 100px;
height: 100px;
border: 1px solid red;
border-radius: 50%;
margin:auto;
text-align:center;
font-size:30px;
}
.goBack>a{
color:hotpink;
}
#slideEarth {
background-position: 0 -300px;
}
#slideFire {
background-position: -300px 0;
}
#slideWater {
background-position: -300px -300px;
}
.radioSlide{
position:absolute;
top:350px;
z-index:3;
left:50%;
margin-left:-50px;
}
#subTitle{
text-align:center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var num = parseInt(1);
var busy = false;
$(document).ready(function () {
$("#slide3").css("opacity", "0");
$("#slide4").css("opacity", "0");
$("#slide1").css("opacity", "1");
$("#slide2").css("opacity", "0");
$("#slide1").css("margin-left", "0px");
$("#slide2").css("margin-left", "300px");
$("#slide3").css("margin-left", "600px");
$("#slide4").css("margin-left", "-300px");
<!--wait for images are in position before enable fade in/out effect-->
setTimeout(function () {
enable_transition();
}, 100);
});
function disable_transition(){
$("#slide1").css("transition", "all linear 0s");
$("#slide2").css("transition", "all linear 0s");
$("#slide3").css("transition", "all linear 0s");
$("#slide4").css("transition", "all linear 0s");
}
function enable_transition(){
$("#slide1").css("transition", "all linear 2s");
$("#slide2").css("transition", "all linear 2s");
$("#slide3").css("transition", "all linear 2s");
$("#slide4").css("transition", "all linear 2s");
}
function left_click() {
if (busy == true) { return false; }
num++;
if (num == 5) { num = 1; }
busy = true;
slide_image();
}
function right_click() {
if (busy == true) { return false; }
num--;
if (num == 0) { num = 4; }
busy = true;
slide_image();
}
function slide_image() {
switch (num) {
case 2:
$("#slide1").css("opacity", "0");
$("#slide1").css("margin-left", "-300px");
$("#slide2").css("opacity", "1");
$("#slide2").css("margin-left", "0px");
$("#slide3").css("opacity", "0");
$("#slide3").css("margin-left", "300px");
$("#slide4").css("opacity", "0");
$("#slide4").css("margin-left", "600px");
$("#radio2").prop("checked", true);
break;
case 3:
$("#slide1").css("opacity", "0");
$("#slide1").css("margin-left", "600px");
$("#slide2").css("opacity", "0");
$("#slide2").css("margin-left", "-300px");
$("#slide3").css("opacity", "1");
$("#slide3").css("margin-left", "0px");
$("#slide4").css("opacity", "0");
$("#slide4").css("margin-left", "300px");
$("#radio3").prop("checked", true);
break;
case 4:
$("#slide1").css("opacity", "0");
$("#slide1").css("margin-left", "300px");
$("#slide2").css("opacity", "0");
$("#slide2").css("margin-left", "600px");
$("#slide3").css("opacity", "0");
$("#slide3").css("margin-left", "-300px");
$("#slide4").css("opacity", "1");
$("#slide4").css("margin-left", "0px");
$("#radio4").prop("checked", true);
break;
default:
$("#slide1").css("opacity", "1");
$("#slide1").css("margin-left", "0");
$("#slide2").css("opacity", "0");
$("#slide2").css("margin-left", "300px");
$("#slide3").css("opacity", "0");
$("#slide3").css("margin-left", "600px");
$("#slide4").css("opacity", "0");
$("#slide4").css("margin-left", "-300px");
$("#radio1").prop("checked", true);
}
<!--prevent multiple click on button left/right when images are sliding-->
setTimeout(function () {
busy = false;
}, 2000);
}
function pic1_click() {
if (num !=1) { return false; }
window.location.replace("#divider1");
}
function pic2_click() {
if (num !=2) { return false; }
window.location.replace("#divider2");
}
function pic3_click() {
if (num !=3) { return false; }
window.location.replace("#divider3");
}
function pic4_click() {
if (num !=4) { return false; }
window.location.replace("#divider4");
}
function radio_change() {
num = parseInt($('input[name=radioSelect]:checked').val());
<!--click radio button, image selected is in position right away-->
disable_transition();
slide_image();
setTimeout(function () {
enable_transition();
}, 100);
}
</script>
</head>
<body>
<h1 id="title">
sliding banner</h1>
<div class="window">
<div class="slides" id="slide1" onclick="pic1_click()">
</div>
<div class="slides" id="slide2" onclick="pic2_click()">
</div>
<div class="slides" id="slide3" onclick="pic3_click()">
</div>
<div class="slides" id="slide4" onclick="pic4_click()">
</div>
</div>
<div class="button_round" id="button_left" onclick="left_click()">
</div>
<div class="button_round" id="button_right" onclick="right_click()">
</div>
<div class="radioSlide">
<input checked="" id="radio1" name="radioSelect" onchange="radio_change()" type="radio" value="1" />
<input id="radio2" name="radioSelect" onchange="radio_change()" type="radio" value="2" />
<input id="radio3" name="radioSelect" onchange="radio_change()" type="radio" value="3" />
<input id="radio4" name="radioSelect" onchange="radio_change()" type="radio" value="4" />
</div>
<h3 id="subTitle">
THE FOUR ELEMENTS: EARTH, AIR, FIRE, WATER</h3>
In western astrology, it is believed that the universe is formed by the four elements: Earth, Air, Fire, Water. These are the outward manifestations of the true Elements. Each of the four elements contains its own unique properties, which work simultaneously to create one united universe. None of the elements are inherently good or bad, however, each has both positive and negative qualities.
<br />
Whether you're loud or quiet, timid or outgoing, impetuous or logical - your personality is filled with both pros and cons. Nobody is perfect and it is difficult to self-evaluate in order to understand our base emotions and desires. That's why finding your element is so important. As you read over the qualities associated with each of the four elements, you might have your "A-ha!" moment, or you might feel as though you don't relate to certain aspects. This is because every person is at a different point in his or her path to developing the human spirit. By finding your element, you'll be able to better appreciate your own strengths and be more self aware of your weaknesses. This understanding will help you to build better, stronger relationships with those around you. Let your element be a guide to a more intuitive self.
<br />
<hr id="divider1"/>
<h1 id="title">air</h1>
<div id="singleElement">
<div class="slides" id="slide1"></div>
</div>
<p>Air is constantly in motion, even when you can't see it. This is the same for the mind of a person with the Air element. Of the four elements, Air is the most concentrated on thought. You think through every decision thoroughly and often find clever solutions to difficult problems. You are studious and scholarly and often see "the big picture" when others cannot. However, as changeable as the direction of the wind, Air people can also vary quite drastically. While some are outgoing, rational and clever, others are scattered, eccentric, and cold. You excel at multi-tasking, however, be careful as you are also easily distracted. You have the ability to multi-task but you are strongest when focused on one problem at a time.</p>
<p>Air is also what gives humans the ability for speech. Because of this you are witty and entertaining and are a welcomed guest at any party. Be aware that while you have charm, you sometimes lack social graces. Your focus is placed so often on logic, that you often overlook feelings. Commitment doesn't come naturally to you. Couple this with your sometimes insensitive nature and it makes relationships very difficult. You are not rooted in tradition. You go with what makes sense and don't believe in doing something because "it's how it has always been done." This propensity for what others see as "radical thinking" and your quick mind makes you a natural born puppet master. While Fire may be the face of the uprising, you are the brains behind it.</p>
<h3>Strengths:</h3>
<p>
Thoughtful<br/>
Witty<br />
Charming<br />
Care free<br />
Independent<br />
Flexible<br />
</p>
<h3>Weaknesses:</h3>
<p>
Inconsistent<br />
Insensitive<br />
Selfish<br />
Flaky<br />
Dishonest<br />
</p>
<div>
<div class="goBack"><a href="#">go back</a></div>
</div>
<hr id="divider2"/>
<h1 id="title">earth</h1>
<div id="singleElement">
<div class="slides" id="slideEarth"></div>
</div>
<p>The Earth is stable and reliable, yet constantly working and moving. Those with the Earth element share these traits. You are practical and logical and stand firm in your convictions. You learn through experience, which is never difficult for a curious person like yourself. You aren't interested in unrealistic dreams, but rather you believe in setting achievable goals that are attained through hard work.</p>
<p>You are an artist and love to create. Your home is welcoming and warm and always open to friends and family, which is fitting considering you're a bit of a homebody. While you are always friendly, you do not let people into the inner circle easily. However, once you do, you are loyal to a fault. On the opposite side of this, you can sometimes be overprotective. As it is impossible to stop the world from turning, it is also impossible to change your mind once it has been made up. You are stubborn and bull-headed and will often stick to your position for no other reason than it is your position. In relationships, you are empathetic and nurturing and don't mind waiting out a few rough patches. But be careful, this also makes it easy for others to walk all over you.</p>
<h3>Strengths:</h3>
<p>
Stable and consistent<br />
Hard-working<br />
Loyal<br />
Nurturing<br />
Logical<br />
Empathetic<br />
</p>
<h3>Weaknesses:</h3>
<p>
Lazy<br />
Scornful<br />
Overly cautious<br />
Stubborn to the point of impractical<br />
Rigid<br />
</p>
<div>
<div class="goBack"><a href="#">go back</a></div>
</div>
<hr id="divider3"/>
<h1 id="title">fire</h1>
<div id="singleElement">
<div class="slides" id="slideFire"></div>
</div>
<p>Fire provides heat and light, but it cannot exist on its own. The same is true for people born to the Fire element. You are passionate, warm and light up every room. You are the life of the party and your natural intensity that compels others to take notice makes you a natural born leader. You follow your gut instinct and become fully committed to what you believe. Of the four elements, Fire is by far the most entertaining, drawing, and dynamic. You have the power of transformation and can convert any negative situation into a positive.</p>
<p>However, be wary. You can also easily turn a positive into a negative. Your passion turns to anger quickly and blinds you when hurting those close. When not contained, Fire spreads to anything nearby and so do you. You are often unfaithful and will follow any lead to serve your own self-interest. Fire needs other elements to survive. While Air will make it grow, Earth will keep it burning steadily. The same is true for you. Your loved ones are what motivate you and keep you stable. Without them, your passion turns to obsession and you quickly exhaust yourself.</p>
<h3>Strengths:</h3>
<p>
Passionate<br />
Bright<br />
Charismatic<br />
Focused<br />
Decisive<br />
Daring<br />
</p>
<h3>Weaknesses:</h3>
<p>
Prone to anger and rage<br />
Obsessive<br />
Unfaithful<br />
Jealous<br />
Easily irritated<br />
Vindictive<br />
</p>
<div>
<div class="goBack"><a href="#">go back</a></div>
</div>
<hr id="divider4"/>
<h1 id="title">water</h1>
<div id="singleElement">
<div class="slides" id="slideWater"></div>
</div>
<p>Water is constantly flowing, with much of its activity happening below the surface. For Water people, while your outside may seem calm and collected, inside your emotions are in constant turmoil. You are compassionate and caring and can relate easily to others. You connect with people whole-heartedly, which can sometimes make you overly trusting. When spread too thin you are ineffectual, but when collected and focused you are a force to be reckoned with. You see life as a journey and every movement you make is part of a definite path (though sometimes an unexpected one).</p>
<p>However, your ability to connect so deeply also makes you prone to carrying other people's burdens. This compassion for others leaves your own needs neglected. Too many built up negative emotions can lead to depression and often addiction. Your emotions ebb and flow, making you sometimes volatile and irrational. You often feel the need to bring up deep topics during lighthearted situations, much to the annoyance of others. You must find balance in learning to help others and learning to help yourself in order to find harmony.</p>
<h3>Strengths:</h3>
<p>
Understanding<br />
Trusting<br />
Devoted<br />
Forgiving<br />
Flexible<br />
</p>
<h3>Weaknesses:</h3>
<p>
Unstable<br />
Prone to depression<br />
Irrational<br />
Gullible<br />
Lack of self<br />
</p>
<div>
<div class="goBack"><a href="#">go back</a></div>
</div>
</body>
</html>
-->
-------------------------------------------------------------------------------
//startup.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;
namespace WebApplication2
{
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
// Serve my app-specific default file, if present.
DefaultFilesOptions options = new DefaultFilesOptions();
options.DefaultFileNames.Clear();
options.DefaultFileNames.Add("slide.html");
app.UseDefaultFiles(options);
app.UseStaticFiles();
}
}
}
reference:
https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files
Sunday, 31 December 2017
Build an ASP.NET app in Azure with SQL Database
Azure Web Apps provides a highly scalable, self-patching web hosting service. This tutorial shows you how to deploy a data-driven ASP.NET web app in Azure and connect it to Azure SQL Database. When you're finished, you have a ASP.NET app running in Azure and connected to SQL Database.

In this tutorial, you learn how to:
- Create a SQL Database in Azure
- Connect an ASP.NET app to SQL Database
- Deploy the app to Azure
- Update the data model and redeploy the app
- Stream logs from Azure to your terminal
- Manage the app in the Azure portal
Prerequisites
To complete this tutorial:
- Install Visual Studio 2017 with the following workloads:
- ASP.NET and web development
- Azure development
If you don't have an Azure subscription, create a free account before you begin.
Download the sample
Extract (unzip) the dotnet-sqldb-tutorial-master.zip file.
The sample project contains a basic ASP.NET MVC CRUD (create-read-update-delete) app using Entity Framework Code First.
Run the app
Open the dotnet-sqldb-tutorial-master/DotNetAppSqlDb.sln file in Visual Studio.
Type
Ctrl+F5
to run the app without debugging. The app is displayed in your default browser. Select the Create New link and create a couple to-do items.
Test the Edit, Details, and Delete links.
The app uses a database context to connect with the database. In this sample, the database context uses a connection string named
MyDbConnection
. The connection string is set in the Web.config file and referenced in the Models/MyDatabaseContext.cs file. The connection string name is used later in the tutorial to connect the Azure web app to an Azure SQL Database.Publish to Azure with SQL Database
In the Solution Explorer, right-click your DotNetAppSqlDb project and select Publish.

Make sure that Microsoft Azure App Service is selected and click Publish.

Publishing opens the Create App Service dialog, which helps you create all the Azure resources you need to run your ASP.NET web app in Azure.
Sign in to Azure
In the Create App Service dialog, click Add an account, and then sign in to your Azure subscription. If you're already signed into a Microsoft account, make sure that account holds your Azure subscription. If the signed-in Microsoft account doesn't have your Azure subscription, click it to add the correct account.

Once signed in, you're ready to create all the resources you need for your Azure web app in this dialog.
Configure the web app name
You can keep the generated web app name, or change it to another unique name (valid characters are
a-z
, 0-9
, and -
). The web app name is used as part of the default URL for your app (<app_name>.azurewebsites.net
, where <app_name>
is your web app name). The web app name needs to be unique across all apps in Azure.
Note
Do not click Create. You first need to set up a SQL Database in a later step.
Create a resource group
A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed.
Next to Resource Group, click New.

Name the resource group myResourceGroup.
Create an App Service plan
An App Service plan specifies the location, size, and features of the web server farm that hosts your app. You can save money when hosting multiple apps by configuring the web apps to share a single App Service plan.
App Service plans define:
- Region (for example: North Europe, East US, or Southeast Asia)
- Instance size (small, medium, or large)
- Scale count (1 to 20 instances)
- SKU (Free, Shared, Basic, Standard, or Premium)
Next to App Service Plan, click New.
In the Configure App Service Plan dialog, configure the new App Service plan with the following settings:

Setting | Suggested value | For more information |
---|---|---|
App Service Plan | myAppServicePlan | App Service plans |
Location | West Europe | Azure regions |
Size | Free | Pricing tiers |
Create a SQL Server instance
Before creating a database, you need an Azure SQL Database logical server. A logical server contains a group of databases managed as a group.
Select Explore additional Azure services.2

In the Services tab, click the + icon next to SQL Database.

In the Configure SQL Database dialog, click New next to SQL Server.
A unique server name is generated. This name is used as part of the default URL for your logical server,
<server_name>.database.windows.net
. It must be unique across all logical server instances in Azure. You can change the server name, but for this tutorial, keep the generated value.
Add an administrator username and password. For password complexity requirements, see Password Policy.
Remember this username and password. You need them to manage the logical server instance later.

Click OK. Don't close the Configure SQL Database dialog yet.
Create a SQL Database
In the Configure SQL Database dialog:
- Keep the default generated Database Name.
- In Connection String Name, type MyDbConnection. This name must match the connection string that is referenced in Models/MyDatabaseContext.cs.
- Select OK.

The Create App Service dialog shows the resources you've created. Click Create.

Once the wizard finishes creating the Azure resources, it publishes your ASP.NET app to Azure. Your default browser is launched with the URL to the deployed app.
Add a few to-do items.

Congratulations! Your data-driven ASP.NET application is running live in Azure App Service.
Access the SQL Database locally
Visual Studio lets you explore and manage your new SQL Database easily in the SQL Server Object Explorer.
Create a database connection
From the View menu, select SQL Server Object Explorer.
At the top of SQL Server Object Explorer, click the Add SQL Server button.
Configure the database connection
In the Connect dialog, expand the Azure node. All your SQL Database instances in Azure are listed here.
Select the SQL Database that you created earlier. The connection you created earlier is automatically filled at the bottom.
Type the database administrator password you created earlier and click Connect.

Allow client connection from your computer
The Create a new firewall rule dialog is opened. By default, your SQL Database instance only allows connections from Azure services, such as your Azure web app. To connect to your database, create a firewall rule in the SQL Database instance. The firewall rule allows the public IP address of your local computer.
The dialog is already filled with your computer's public IP address.
Make sure that Add my client IP is selected and click OK.

Once Visual Studio finishes creating the firewall setting for your SQL Database instance, your connection shows up in SQL Server Object Explorer.
Here, you can perform the most common database operations, such as run queries, create views and stored procedures, and more.
Expand your connection > Databases > <your database> > Tables. Right-click on the
Todoes
table and select View Data.
Update app with Code First Migrations
You can use the familiar tools in Visual Studio to update your database and web app in Azure. In this step, you use Code First Migrations in Entity Framework to make a change to your database schema and publish it to Azure.
For more information about using Entity Framework Code First Migrations, see Getting Started with Entity Framework 6 Code First using MVC 5.
Update your data model
Open Models\Todo.cs in the code editor. Add the following property to the
ToDo
class:
C#
public bool Done { get; set; }
Run Code First Migrations locally
Run a few commands to make updates to your local database.
From the Tools menu, click NuGet Package Manager > Package Manager Console.
In the Package Manager Console window, enable Code First Migrations:
PowerShell
Enable-Migrations
Add a migration:
PowerShell
Add-Migration AddProperty
Update the local database:
PowerShell
Update-Database
Type
Ctrl+F5
to run the app. Test the edit, details, and create links.
If the application loads without errors, then Code First Migrations has succeeded. However, your page still looks the same because your application logic is not using this new property yet.
Use the new property
Make some changes in your code to use the
Done
property. For simplicity in this tutorial, you're only going to change the Index
and Create
views to see the property in action.
Open Controllers\TodosController.cs.
Find the
Create()
method on line 52 and add Done
to the list of properties in the Bind
attribute. When you're done, your Create()
method signature looks like the following code:
C#
public ActionResult Create([Bind(Include = "Description,CreatedDate,Done")] Todo todo)
Open Views\Todos\Create.cshtml.
In the Razor code, you should see a
<div class="form-group">
element that uses model.Description
, and then another <div class="form-group">
element that uses model.CreatedDate
. Immediately following these two elements, add another <div class="form-group">
element that uses model.Done
:
C#
<div class="form-group">
@Html.LabelFor(model => model.Done, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
@Html.EditorFor(model => model.Done)
@Html.ValidationMessageFor(model => model.Done, "", new { @class = "text-danger" })
</div>
</div>
</div>
Open Views\Todos\Index.cshtml.
Search for the empty
<th></th>
element. Just above this element, add the following Razor code:
C#
<th>
@Html.DisplayNameFor(model => model.Done)
</th>
Find the
<td>
element that contains the Html.ActionLink()
helper methods. Above this <td>
, add another <td>
element with the following Razor code:
C#
<td>
@Html.DisplayFor(modelItem => item.Done)
</td>
That's all you need to see the changes in the
Index
and Create
views.
Type
Ctrl+F5
to run the app.
You can now add a to-do item and check Done. Then it should show up in your homepage as a completed item. Remember that the
Edit
view doesn't show the Done
field, because you didn't change the Edit
view.Enable Code First Migrations in Azure
Now that your code change works, including database migration, you publish it to your Azure web app and update your SQL Database with Code First Migrations too.
Just like before, right-click your project and select Publish.
Click Settings to open the publish wizard.

In the wizard, click Next.
Make sure that the connection string for your SQL Database is populated in MyDatabaseContext (MyDbConnection). You may need to select the myToDoAppDb database from the dropdown.
Select Execute Code First Migrations (runs on application start), then click Save.

Publish your changes
Now that you enabled Code First Migrations in your Azure web app, publish your code changes.
In the publish page, click Publish.
Try adding to-do items again and select Done, and they should show up in your homepage as a completed item.
All your existing to-do items are still displayed. When you republish your ASP.NET application, existing data in your SQL Database is not lost. Also, Code First Migrations only changes the data schema and leaves your existing data intact.
Stream application logs
You can stream tracing messages directly from your Azure web app to Visual Studio.
Open Controllers\TodosController.cs.
Each action starts with a
Trace.WriteLine()
method. This code is added to show you how to add trace messages to your Azure web app.Open Server Explorer
From the View menu, select Server Explorer. You can configure logging for your Azure web app in Server Explorer.
Enable log streaming
In Server Explorer, expand Azure > App Service.
Expand the myResourceGroup resource group, you created when you first created the Azure web app.
Right-click your Azure web app and select View Streaming Logs.

The logs are now streamed into the Output window.

However, you don't see any of the trace messages yet. That's because when you first select View Streaming Logs, your Azure web app sets the trace level to
Error
, which only logs error events (with the Trace.TraceError()
method).Change trace levels
To change the trace levels to output other trace messages, go back to Server Explorer.
Right-click your Azure web app again and select View Settings.
In the Application Logging (File System) dropdown, select Verbose. Click Save.

Tip
You can experiment with different trace levels to see what types of messages are displayed for each level. For example, the Information level includes all logs created by
Trace.TraceInformation()
, Trace.TraceWarning()
, and Trace.TraceError()
, but not logs created by Trace.WriteLine()
.
In your browser navigate to your web app again at http://<your app name>.azurewebsites.net, then try clicking around the to-do list application in Azure. The trace messages are now streamed to the Output window in Visual Studio.
console
Application: 2017-04-06T23:30:41 PID[8132] Verbose GET /Todos/Index
Application: 2017-04-06T23:30:43 PID[8132] Verbose GET /Todos/Create
Application: 2017-04-06T23:30:53 PID[8132] Verbose POST /Todos/Create
Application: 2017-04-06T23:30:54 PID[8132] Verbose GET /Todos/Index
Stop log streaming
To stop the log-streaming service, click the Stop monitoring button in the Output window.

Manage your Azure web app
Go to the Azure portal to see the web app you created.
From the left menu, click App Service, then click the name of your Azure web app.

You have landed in your web app's page.
By default, the portal shows the Overview page. This page gives you a view of how your app is doing. Here, you can also perform basic management tasks like browse, stop, start, restart, and delete. The tabs on the left side of the page show the different configuration pages you can open.

Clean up resources
In the preceding steps, you created Azure resources in a resource group. If you don't expect to need these resources in the future, you can delete them by deleting the resource group.
- From your web app's Overview page in the Azure portal, select the myResourceGroup link under Resource group.
- On the resource group page, make sure that the listed resources are the ones you want to delete.
- Select Delete, type myResourceGroup in the text box, and then select Delete.
Next steps
In this tutorial, you learned how to:
- Create a SQL Database in Azure
- Connect an ASP.NET app to SQL Database
- Deploy the app to Azure
- Update the data model and redeploy the app
- Stream logs from Azure to your terminal
- Manage the app in the Azure portal +
Advance to the next tutorial to learn how to map a custom DNS name to the web app.
https://docs.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-dotnet-sqldatabase
Subscribe to:
Posts (Atom)