MVC core sql javascript database first

Scaffolding generated form

Javascript modified form

//install NuGet package

a.       Microsoft.EntityFrameworkCore.SqlServer

b.      Microsoft.EntityFrameworkCore.SqlServer.Design

c.       Microsoft.EntityFrameworkCore.Tools

---------------------------------------------------------------------

//enter command in package manage console

scaffold-dbcontext “server=localhost;database=manymany;Integrated Security=True;” Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models

------------------------------------------------------------------

//manymanyContext.cs is generated in Models folder

//replace onConfigure method with

 public ClassName(DbContextOptions<ClassName> options) : base(options){   }

-------------------------------------------------------------

//in startup.cs add code

var cs = Configuration.GetConnectionString(“NameOfConnectionString”);
services.AddDbContext<ContextName>(options => options.UseSqlServer(cs));

-------------------------------------------------------------------

//in appsettings.json add connectionstring

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-core_web1-1e7da360-f6fc-44b9-ad72-95113ff21505;Trusted_Connection=True;MultipleActiveResultSets=true",
    "manymanyConnection": "server=localhost;database=manymany;Integrated Security=True;"
  },
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Debug",
      "System": "Information",
      "Microsoft": "Information"
    }
  }
}

---------------------------------------------------

//CustomersController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore;
using core_web1.Models;

namespace core_web1.Controllers
{
    public class CustomersController : Controller
    {
        private readonly manymanyContext _context;

        public CustomersController(manymanyContext context)
        {
            _context = context;  
        }

        // GET: Customers
        public async Task<IActionResult> Index()
        {
            var manymanyContext = _context.Customer.Include(c => c.Order);
            return View(await manymanyContext.ToListAsync());
        }

        [HttpGet]
        public JsonResult find_order_name(int id)
        {
            var order_name = _context.Order.FirstOrDefault(x => x.Id == id).OrderName;

            return Json(order_name);
        }

        // GET: Customers/Details/5
        public async Task<IActionResult> Details(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var customer = await _context.Customer.SingleOrDefaultAsync(m => m.Id == id);
            if (customer == null)
            {
                return NotFound();
            }

            return View(customer);
        }

        // GET: Customers/Create
        public IActionResult Create()
        {
            ViewData["OrderId"] = new SelectList(_context.Order, "Id", "Id");
            return View();
        }

        // POST: Customers/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("Id,Name,OrderId")] Customer customer)
        {
            if (ModelState.IsValid)
            {
                _context.Add(customer);
                await _context.SaveChangesAsync();
                return RedirectToAction("Index");
            }
            ViewData["OrderId"] = new SelectList(_context.Order, "Id", "Id", customer.OrderId);
            return View(customer);
        }

        // GET: Customers/Edit/5
        public async Task<IActionResult> Edit(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var customer = await _context.Customer.SingleOrDefaultAsync(m => m.Id == id);
            if (customer == null)
            {
                return NotFound();
            }
            ViewData["OrderId"] = new SelectList(_context.Order, "Id", "Id", customer.OrderId);
            return View(customer);
        }

        // POST: Customers/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Edit(int id, [Bind("Id,Name,OrderId")] Customer customer)
        {
            if (id != customer.Id)
            {
                return NotFound();
            }

            if (ModelState.IsValid)
            {
                try
                {
                    _context.Update(customer);
                    await _context.SaveChangesAsync();
                }
                catch (DbUpdateConcurrencyException)
                {
                    if (!CustomerExists(customer.Id))
                    {
                        return NotFound();
                    }
                    else
                    {
                        throw;
                    }
                }
                return RedirectToAction("Index");
            }
            ViewData["OrderId"] = new SelectList(_context.Order, "Id", "Id", customer.OrderId);
            return View(customer);
        }

        // GET: Customers/Delete/5
        public async Task<IActionResult> Delete(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var customer = await _context.Customer.SingleOrDefaultAsync(m => m.Id == id);
            if (customer == null)
            {
                return NotFound();
            }

            return View(customer);
        }

        // POST: Customers/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> DeleteConfirmed(int id)
        {
            var customer = await _context.Customer.SingleOrDefaultAsync(m => m.Id == id);
            _context.Customer.Remove(customer);
            await _context.SaveChangesAsync();
            return RedirectToAction("Index");
        }

        private bool CustomerExists(int id)
        {
            return _context.Customer.Any(e => e.Id == id);
        }
    }
}

------------------------------------------------------------------

//~/Views/Customers/index.cshtml

@model IEnumerable<core_web1.Models.Customer>

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayName("Order")
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>

                    <label id="order_label(@item.OrderId)">abc</label>

                    <script src="~/lib/jquery/dist/jquery.min.js"></script>
                    <script type="text/javascript">

                        get_order_name( @item.OrderId)

                        function get_order_name(order_id) {

                            $.ajax({
                                url: '/Customers/find_order_name',
                                type: 'GET',
                                dataType: 'json',
                                data: { "id": order_id },
                                success: function (result) {

                                    document.getElementById("order_label(@item.OrderId)").innerHTML = result;;
                                },
                                error: function () {
                                    alert("Error");
                                }
                            });
                        }

                    </script>
                </td>
                <td>
                    <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> |
                    <a asp-action="Details" asp-route-id="@item.Id">Details</a> |
                    <a asp-action="Delete" asp-route-id="@item.Id">Delete</a>
                </td>
            </tr>
        }
    </tbody>
</table>

-----------------------------------------------------------

//manymanyContext.cs

using System;
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.Metadata;

namespace core_web1.Models
{
    public partial class manymanyContext : DbContext
    {
        public virtual DbSet<Customer> Customer { get; set; }
        public virtual DbSet<Order> Order { get; set; }

        public manymanyContext(DbContextOptions<manymanyContext> options) : base(options){ }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<Customer>(entity =>
            {
                entity.ToTable("customer");

                entity.Property(e => e.Id).HasColumnName("id");

                entity.Property(e => e.Name)
                    .HasColumnName("name")
                    .HasColumnType("nchar(10)");

                entity.Property(e => e.OrderId).HasColumnName("order_id");

                entity.HasOne(d => d.Order)
                    .WithMany(p => p.Customer)
                    .HasForeignKey(d => d.OrderId)
                    .HasConstraintName("r2");
            });

            modelBuilder.Entity<Order>(entity =>
            {
                entity.ToTable("order");

                entity.Property(e => e.Id).HasColumnName("id");

                entity.Property(e => e.CustomerId).HasColumnName("customer_id");

                entity.Property(e => e.OrderName)
                    .HasColumnName("order_name")
                    .HasColumnType("nchar(10)");

                entity.HasOne(d => d.CustomerNavigation)
                    .WithMany(p => p.OrderNavigation)
                    .HasForeignKey(d => d.CustomerId)
                    .HasConstraintName("r1");
            });
        }
    }
}

---------------------------------------------------------

//~/Models/customer.cs

using System;
using System.Collections.Generic;

namespace core_web1.Models
{
    public partial class Customer
    {
        public Customer()
        {
            OrderNavigation = new HashSet<Order>();
        }

        public int Id { get; set; }
        public string Name { get; set; }
        public int? OrderId { get; set; }

        public virtual ICollection<Order> OrderNavigation { get; set; }
        public virtual Order Order { get; set; }
    }
}

-------------------------------------------------------

//~/Models/Orders.cs

using System;
using System.Collections.Generic;

namespace core_web1.Models
{
    public partial class Customer
    {
        public Customer()
        {
            OrderNavigation = new HashSet<Order>();
        }

        public int Id { get; set; }
        public string Name { get; set; }
        public int? OrderId { get; set; }

        public virtual ICollection<Order> OrderNavigation { get; set; }
        public virtual Order Order { get; set; }
    }
}

reference:

http://stackoverflow.com/questions/16303085/how-to-call-java-script-function-from-mvc-view
https://msdn.microsoft.com/en-us/magazine/mt767699.aspx
https://www.exceptionnotfound.net/using-async-and-await-in-asp-net-what-do-these-keywords-mean/
http://stackoverflow.com/questions/13198136/how-to-get-data-from-asp-net-mvc-controller-to-jquery-dynamically
http://stackoverflow.com/questions/33947882/pass-model-to-controller-using-jquery-ajax
https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api
http://stackoverflow.com/questions/4488714/change-label-text-using-javascript
http://stackoverflow.com/questions/6840311/razor-syntax-dynamically-name-html-elements