Dev.to

Create and Publish ASP.net Code on Azure App Service

Here's a step-by-step guide to create a smartwatch comparison website using ASP.NET Core: Step 1: Project Setup Create new ASP.NET Core MVC project in Visual Studio Install NuGet packages: EntityFrameworkCore EntityFrameworkCore.SqlServer Bootstrap (for styling) Step 2: Database Design Create Smartwatch model in Models folder: public class Smartwatch { public int Id { get; set; } [Required] public string Brand { get; set; } [Required] public string Model { get; set; } public decimal Price { get; set; } public string DisplayType { get; set; } public string OS { get; set; } public bool GPS { get; set; } public bool HeartRateMonitor { get; set; } public int BatteryLife { get; set; } public string WebsiteUrl { get; set; } public DateTime ReleaseDate { get; set; } } Step 3: Database Context Create WatchDbContext.cs: public class WatchDbContext : DbContext { public WatchDbContext(DbContextOptions options) : base(options) { } public DbSet Smartwatches { get; set; } } Step 4: Configure Services In Program.cs: builder.Services.AddDbContext(options => options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection"))); Step 5: Home Controller Create HomeController.cs: public class HomeController : Controller { public IActionResult Index() { ViewData["Title"] = "BestWatchPrice - Compare Smartwatches and Find the Best Deals"; return View(); } public IActionResult About() { return View(); } } Step 6: Home Page View Create Views/Home/Index.cshtml: @{ ViewData["Title"] = "Compare Smartwatches - BestWatchPrice.com"; } Welcome to BestWatchPrice.com Your premier destination for comparing smartwatch prices, features, and specifications across top brands. Find the perfect wearable tech that matches your needs and budget. We compare prices from leading retailers to help you make informed purchasing decisions. Step 7: Smartwatch Controller Create SmartwatchController.cs: public class SmartwatchController : Controller { private readonly WatchDbContext _context; public SmartwatchController(WatchDbContext context) { _context = context; } public async Task Index(string searchString, string sortOrder) { var watches = from w in _context.Smartwatches select w; if (!string.IsNullOrEmpty(searchString)) { watches = watches.Where(w => w.Brand.Contains(searchString) || w.Model.Contains(searchString)); } ViewData["PriceSort"] = sortOrder == "Price" ? "price_desc" : "Price"; watches = sortOrder switch { "Price" => watches.OrderBy(w => w.Price), "price_desc" => watches.OrderByDescending(w => w.Price), _ => watches.OrderBy(w => w.Brand) }; return View(await watches.ToListAsync()); } } Step 8: Comparison View Create Views/Smartwatch/Index.cshtml: @model IEnumerable Smartwatch Comparison Brand Model Price OS Battery Life Features @foreach (var item in Model) { @item.Brand @item.Model $@item.Price @item.OS @item.BatteryLife hours @if (item.GPS) { GPS } @if (item.HeartRateMonitor) { HR Monitor } } Step 9: Layout and SEO Update _Layout.cshtml head section: @ViewData["Title"] - BestWatchPrice.com Step 10: Database Migration Create migration: Add-Migration InitialCreate Update-Database Seed sample data in WatchDbContext: protected override void OnModelCreating(ModelBuilder modelBuilder) { modelBuilder.Entity().HasData( new Smartwatch { Id = 1, Brand = "Apple", Model = "Watch Series 8", Price = 399.99m }, new Smartwatch { Id = 2, Brand = "Samsung", Model = "Galaxy Watch 5", Price = 279.99m } ); } Step 11: Final Touches Add search form in Smartwatch/Index view Implement sorting functionality Add price comparison charts Implement retailer price scraping (consider using APIs) Deployment: Publish to Azure App Service Configure custom domain (bestwatchprice.com) Set up production database Implement caching for better performance This implementation provides: Responsive design with Bootstrap Search and sorting functionality Feature comparison matrix SEO-friendly URLs - https://bestwatchprice.com/ Clear price display Feature badges for quick scanning Remember to add proper error handling, user authentication for admin features, and implement actual price comparison logic with retailer APIs for live p

Feb 15, 2025 - 17:11
 0
Create and Publish ASP.net Code on Azure App Service

Here's a step-by-step guide to create a smartwatch comparison website using ASP.NET Core:

Step 1: Project Setup

  1. Create new ASP.NET Core MVC project in Visual Studio
  2. Install NuGet packages:
    • EntityFrameworkCore
    • EntityFrameworkCore.SqlServer
    • Bootstrap (for styling)

Step 2: Database Design
Create Smartwatch model in Models folder:

public class Smartwatch
{
    public int Id { get; set; }
    [Required] public string Brand { get; set; }
    [Required] public string Model { get; set; }
    public decimal Price { get; set; }
    public string DisplayType { get; set; }
    public string OS { get; set; }
    public bool GPS { get; set; }
    public bool HeartRateMonitor { get; set; }
    public int BatteryLife { get; set; }
    public string WebsiteUrl { get; set; }
    public DateTime ReleaseDate { get; set; }
}

Step 3: Database Context
Create WatchDbContext.cs:

public class WatchDbContext : DbContext
{
    public WatchDbContext(DbContextOptions<WatchDbContext> options) 
        : base(options) { }

    public DbSet<Smartwatch> Smartwatches { get; set; }
}

Step 4: Configure Services
In Program.cs:

builder.Services.AddDbContext<WatchDbContext>(options =>
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

Step 5: Home Controller
Create HomeController.cs:

public class HomeController : Controller
{
    public IActionResult Index()
    {
        ViewData["Title"] = "BestWatchPrice - Compare Smartwatches and Find the Best Deals";
        return View();
    }

    public IActionResult About()
    {
        return View();
    }
}

Step 6: Home Page View
Create Views/Home/Index.cshtml:

@{
    ViewData["Title"] = "Compare Smartwatches - BestWatchPrice.com";
}

 class="jumbotron">
     class="display-4">Welcome to BestWatchPrice.com
     class="lead">Your premier destination for comparing smartwatch prices, features, and specifications across top brands. Find the perfect wearable tech that matches your needs and budget.
     class="my-4">
    
We compare prices from leading retailers to help you make informed purchasing decisions.

Step 7: Smartwatch Controller
Create SmartwatchController.cs:

public class SmartwatchController : Controller
{
    private readonly WatchDbContext _context;

    public SmartwatchController(WatchDbContext context)
    {
        _context = context;
    }

    public async Task<IActionResult> Index(string searchString, string sortOrder)
    {
        var watches = from w in _context.Smartwatches
                      select w;

        if (!string.IsNullOrEmpty(searchString))
        {
            watches = watches.Where(w => w.Brand.Contains(searchString) 
                      || w.Model.Contains(searchString));
        }

        ViewData["PriceSort"] = sortOrder == "Price" ? "price_desc" : "Price";

        watches = sortOrder switch
        {
            "Price" => watches.OrderBy(w => w.Price),
            "price_desc" => watches.OrderByDescending(w => w.Price),
            _ => watches.OrderBy(w => w.Brand)
        };

        return View(await watches.ToListAsync());
    }
}

Step 8: Comparison View
Create Views/Smartwatch/Index.cshtml:

@model IEnumerable


Smartwatch Comparison


 class="table table-striped">
    
        
            Brand
            Model
            Price
            OS
            Battery Life
            Features
        
    
    
        @foreach (var item in Model)
        {
            
                @item.Brand
                @item.Model
                $@item.Price
                @item.OS
                @item.BatteryLife hours
                
                    @if (item.GPS) {  class="badge bg-primary">GPS }
                    @if (item.HeartRateMonitor) {  class="badge bg-success">HR Monitor }
                
            
        }

Step 9: Layout and SEO
Update _Layout.cshtml head section:


     charset="utf-8" />
     name="viewport" content="width=device-width, initial-scale=1.0" />
    </span>@ViewData["Title"] - BestWatchPrice.com<span class="nt">
     name="description" content="Compare smartwatch prices, features, and specifications across top brands. Find the best deals on wearable technology.">
     rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />

Step 10: Database Migration

  1. Create migration: 
   Add-Migration InitialCreate
   Update-Database
  1. Seed sample data in WatchDbContext: 
   protected override void OnModelCreating(ModelBuilder modelBuilder)
   {
       modelBuilder.Entity<Smartwatch>().HasData(
           new Smartwatch { Id = 1, Brand = "Apple", Model = "Watch Series 8", Price = 399.99m },
           new Smartwatch { Id = 2, Brand = "Samsung", Model = "Galaxy Watch 5", Price = 279.99m }
       );
   }

Step 11: Final Touches

  1. Add search form in Smartwatch/Index view
  2. Implement sorting functionality
  3. Add price comparison charts
  4. Implement retailer price scraping (consider using APIs)

Deployment:

  1. Publish to Azure App Service
  2. Configure custom domain (bestwatchprice.com)
  3. Set up production database
  4. Implement caching for better performance

This implementation provides:

  • Responsive design with Bootstrap
  • Search and sorting functionality
  • Feature comparison matrix
  • SEO-friendly URLs - https://bestwatchprice.com/
  • Clear price display
  • Feature badges for quick scanning

Remember to add proper error handling, user authentication for admin features, and implement actual price comparison logic with retailer APIs for live price updates.