Git Product home page Git Product logo

bookieweb's Introduction

Bookie Web

Source


Required Libraries

  • Entity Framework Core
  • Entity Framework Sql Server
  • Entity Framework Tools

Add Database and Connection String

  • Add connection string to appsettings.json
  • Add DbContext
using Microsoft.EntityFrameworkCore;

namespace BookieWeb.Models
{
    public class ApplicationDbContext: DbContext
    {
        public ApplicationDbContext(DbContextOptions options): base(options) { 
        
        }
        // This is where we will be adding the 
    }
}
  • Changes made in program.cs
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();
// adding database connection
builder.Services.AddDbContext<BookieWeb.Models.ApplicationDbContext>(
    options => options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection"))
);
var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Database Migration

  • Run following commands
Add-Migration "migration message"
Update-database

Add data to tables using program

  • Addin following lines of code to add the data
using BookieWeb.Models;
using Microsoft.EntityFrameworkCore;


namespace BookieWeb.Models
{
    public class ApplicationDbContext: DbContext
    {
        public ApplicationDbContext(DbContextOptions options): base(options) { 
        
        }
        // This is where we will be adding the 
        public DbSet<Category> Categories { get; set; }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<Category>().HasData(
                new Category { Id = 1, Name = "Action", DisplayOrders = 1 },
                new Category { Id = 2, Name = "History", DisplayOrders = 2 },
                new Category { Id = 3, Name = "History", DisplayOrders = 2 }
                ); 
        }
    }
}

Routing in ASP.Net Core

  • Routnig follows the following Rules
pattern: "{controller=Home}/{action=Index}/{id?}");
  • controller/action/id

alt text


Add Model in Views

  • In contropller informatino is given to View as follows
public IActionResult Index()
{
    //  Get list items from the database
    List<Category> objCategoryList = _db.Categories.ToList();
    // Default View if no view is provided
    return View(objCategoryList);
}
    • First model is added to the start of cshtml as given below
@model List<Category>
  • Run followinh line to loop over the information that is being gievn to View as follows
<table class="table table-bordered table-striped">
    <thead>
        <!-- head of the table -->
        <tr>
            <!-- Adding header column for the table -->
            <th>
                Category Name
            </th>
            <th>
                Display Order
            </th>
        </tr>
    </thead>
    <tbody>
        <!-- Adding for loop to iterate over the list elements -->
        @foreach(var obj in Model.OrderBy(u => u.DisplayOrders))
        {
            <!-- body of the table -->
            <tr>
                <td>
                    @obj.Name
                </td>
                <td>
                    @obj.DisplayOrders
                </td>
            </tr>
        }
    </tbody>
</table>

Adding partial views

  • Add following lines of code in View to add parial view
@section Scripts{
    @{
        <partial name="_ValidationScriptsPartial" />
    }
}

Adding Notifications

  • TempData store data, which is only available to next render
  • syntax is following
TempData["success"] = "Category has been edited successfully";
  • TempData is retrieved in Notification.cshtml file as follows
@if (TempData["success"] != null)
{
    <h2>@TempData["success"]</h2>
}

@if (TempData["error"] != null)
{
    <h2>@TempData["error"]</h2>
}
  • This Notification.csthml partial view will be added to the top of View
<!-- partial tag will be used here to include the notifications -->
<partial name="_Notification" />
  • This partial view will be added to Layout.cshtml*
<div class="container">
    <main role="main" class="pb-3">
        <!-- partial tag will be used here to include the notifications -->
        <partial name="_Notification" />
        @RenderBody()
    </main>
</div>

Adding toastr

Source

@if (TempData["success"] != null)
{
    <!-- Add jquery too -->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <!-- Add javascript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text">
        toastr.success('@TempData["success"]');
    </script>
}

@if (TempData["error"] != null)
{
    <!-- Add jquery too -->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <!-- Add javascript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text">
        toastr.error('@TempData["error"]');
    </script>
}

Add New Project

  • New project is added to the BookieWeb
  • New Project type is ASP.NET Core Web App
  • Set the new project as startup project

bookieweb's People

Contributors

faisal-hayat avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.