Creating Simple Cascading DropDownList In ASP.NET Core MVC With New Tag Helpers

 Controller:

[HttpGet]

        [AllowAnonymous]

        public IActionResult ChamberRegister()

        {

            var _divisions = _context.DivisionsList.ToList();

            _divisions.Add(new DivisionsVM()

            {

                Id = 0,

                Name = "--Select Division--"

            });

            var _districts = new List<DistrictsVM>();

            _districts.Add(new DistrictsVM()

            {

                Id = 0,

                Name = "--Select District--"

            });

            var _Upzila = new List<UpazilasVM>();

            _Upzila.Add(new UpazilasVM()

            {

                Id = 0,

                Name = "--Select Upzila--"

            });

            var _Unions = new List<UnionsVM>();

            _Unions.Add(new UnionsVM()

            {

                Id = 0,

                Name = "--Select Union--"

            });

            ViewData["DivisionData"] = new SelectList(_divisions.OrderBy(s => s.Id), "Id", "Name");

            ViewData["DistrictData"] = new SelectList(_districts.OrderBy(s => s.Id), "Id", "Name");

            ViewData["UpzilaData"] = new SelectList(_Upzila.OrderBy(s => s.Id), "Id", "Name");

            ViewData["UnionData"] = new SelectList(_Unions.OrderBy(s => s.Id), "Id", "Name");

            var chamberListObj = (from c in _context.DropdownValues

                                  where c.EnumValueType== EnumValueType.CHAMBER_TYPE

                                  select new SelectListItem()

                                {

                                    Value = c.DropDownValue,

                                    Text = c.DropDownText

                                }).ToList();

            ViewBag.chamberList = chamberListObj;

            string host = $"{Request.Scheme}://{Request.Host}{Request.PathBase}/";

            ViewData["BaseUrl"] = host;

            return View();

        }

JsonResult In Controller:

 public JsonResult GetDistrictListByID(int divisionid)

        {

            List<SelectListItem> getState = new List<SelectListItem>();

            var Getstateresult = _context.DistrictsList.Where(c => c.Division_id == divisionid).ToList(); 

            

            if (divisionid != 0)

            {

                return Json(Getstateresult);

                //return Json(new SelectList(Getstateresult, "Id", "Name"));

            }

            return null;

        }

        public JsonResult GetUpazilaList(int district_id)

        {

            List<SelectListItem> UpazilaListItems = new List<SelectListItem>();

            var Getstateresult = _context.UpazilasList.Where(c => c.district_id == district_id).ToList();

            if (district_id != 0)

            {

                return Json(Getstateresult);

            }

            return null;

        }

        [HttpPost, ActionName("GetDistrictsByDivisionId")]

        public JsonResult GetDistrictsByDivisionId(string divisionId)

        {

            int catId;

            List<DistrictsVM> listsObj = new List<DistrictsVM>();

            if (!string.IsNullOrEmpty(divisionId))

            {

                catId = Convert.ToInt32(divisionId);

                listsObj = _context.DistrictsList.Where(s => s.Division_id.Equals(catId)).ToList();

            }

            return Json(listsObj);

        }

        [HttpPost, ActionName("GetUpaziaByDivisionId")]

        public JsonResult GetUpaziaByDivisionId(string divisionId)

        {

            int catId;

            List<UpazilasVM> listsObj = new List<UpazilasVM>();

            if (!string.IsNullOrEmpty(divisionId))

            {

                catId = Convert.ToInt32(divisionId);

                listsObj = _context.UpazilasList.Where(s => s.district_id.Equals(catId)).ToList();

            }

            return Json(listsObj);

        }

        [HttpPost, ActionName("GetUnionByUpzilaId")]

        public JsonResult GetUnionByUpzilaId(string upzilaId)

        {

            int catId;

            List<UnionsVM> listsObj = new List<UnionsVM>();

            if (!string.IsNullOrEmpty(upzilaId))

            {

                catId = Convert.ToInt32(upzilaId);

                listsObj = _context.UnionsList.Where(s => s.upazilla_id.Equals(catId)).ToList();

            }

            return Json(listsObj);

        }

In View:

@{

    ViewBag.Title = "Chamber Register";

    var baseurl = ViewBag.BaseUrl;

}

<select asp-for="Division" class="form-control"

                        asp-items="ViewBag.DivisionData"

                        id="DivisionId" onchange="loadDivision(this)"></select>

<select asp-for="District" class="form-control" asp-items="ViewBag.DistrictData" id="ddlDistrictId"></select>

<select asp-for="Upzila" class="form-control" asp-items="ViewBag.UpzilaData"  id="ddlUpzailaId"></select>

<select asp-for="Thana" class="form-control" asp-items="ViewBag.UnionData" id="ddlThanaId"></select>

  @Html.DropDownListFor(m => m.TypesOfChambers, new SelectList(ViewBag.chamberList, "Value", "Text"), "Select Chamber Type", new { @class = "form-control" })              

Javascript:

<script src="~/../lib/jquery/dist/jquery.js"></script>

<script type="text/javascript">

        $(document).ready(function () {

            var a = 0;

        });

    function loadDivision(obj) {

            var value = obj.value;

            var url = "@baseurl";

            $.post(url + "Account/GetDistrictsByDivisionId", { divisionId: value }, function (data) {

                debugger;

                PopulateDistrictDropDown("#ddlDistrictId", data);

            });

        }

    function PopulateDistrictDropDown(dropDownId, list, selectedId) {

            $(dropDownId).empty();

            $(dropDownId).append("<option>--Select Division--</option>")

            $.each(list, function (index, row) {

                $(dropDownId).append("<option value='" + row.id + "'>" + row.name + "</option>")

            });

    }

    $('#ddlDistrictId').change(function () {

        var value = $("#ddlDistrictId").val();

            var url = "@baseurl";

        $.post(url + "Account/GetUpaziaByDivisionId", { divisionId: value }, function (data) {

                debugger;

            PopulateUpzilaDropDown("#ddlUpzailaId", data);

            });

    });

    function PopulateUpzilaDropDown(dropDownId, list, selectedId) {

        $(dropDownId).empty();

        $(dropDownId).append("<option>--Select Upzila--</option>")

        $.each(list, function (index, row) {

            $(dropDownId).append("<option value='" + row.id + "'>" + row.name + "</option>")

        });

    }

    $('#ddlUpzailaId').change(function () {

        var value = $("#ddlUpzailaId").val();

            var url = "@baseurl";

        $.post(url + "Account/GetUnionByUpzilaId", { upzilaId: value }, function (data) {

                debugger;

            PopulateThanaDropDown("#ddlThanaId", data);

            });

    });

    function PopulateThanaDropDown(dropDownId, list, selectedId) {

        $(dropDownId).empty();

        $(dropDownId).append("<option>--Select Thana--</option>")

        $.each(list, function (index, row) {

            $(dropDownId).append("<option value='" + row.id + "'>" + row.name + "</option>")

        });

    }

</script>

Working with Django! Developing ecommerce site…

Github : https://github.com/itsjubayer/GreenShop-Django.git

Create a new project called ‘PyBuy’ and install Django from terminal:

Command: pip install django==2.1

 

-now create django project: go to terminal and press ctrl+l to clear the terminal then type this command to create project

> django-admin startproject pybuy .  [here .(period) means current directory, there must be a space before period]

 

-          Execute this command to run the development web server

Python manage.py runserver

 Database migration:

Go to PyShop/settings.py and in line 33 installed_apps add this line:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'products.apps.ProductsConfig'
]

 

Execute the command in the terminal:

>python manage.py makemigrations

Then execute this command:

>python manage.py migrate

 

Create super admin user:

>python manage.py createsuperuser

 

Browse url : http://127.0.0.1:8000/admin

Add product module to admin panel:

Go to Products/admin.py and add this lines

from django.contrib import admin
from .models import Product


admin.site.register(Product)

 

refresh add panel page.

Customize product columns:

Go to products/admin.py and update code

from django.contrib import admin
from .models import Product

#to customize column
class ProductAdmin(admin.ModelAdmin):
    list_display = ('name', 'price', 'stock')

#add ProductAdmin to register to customize columns for products admin panel
admin.site.register(Product, ProductAdmin)

Add offer:

Update the code of admin.py

from django.contrib import admin
from .models import Product, Offer


class OfferAdmin(admin.ModelAdmin):
    list_display = ('code', 'discount')


#to customize column
class ProductAdmin(admin.ModelAdmin):
    list_display = ('name', 'price', 'stock')


admin.site.register(Offer, OfferAdmin)
#add ProductAdmin to register to customize columns for products admin panel
admin.site.register(Product, ProductAdmin)

 

-Designing the landing page for visitors:

  -Create a  directory to products folder and named it templates(careful at typing the name templates because django looks for this directory during loading)

- create an html page and named it ‘index.html’

<h1>Products</h1>
<ul>
    <li>Item1</li>
    <li>Item1</li>
    <li>Item1</li>
</ul>

 

Update the code of views.py page:

from django.http import HttpResponse
from django.shortcuts import render
from .models import Product


def index(request):
    products = Product.objects.all()
    return render(request, 'index.html')


def new(request):
    return HttpResponse('new products')

 

to make the page dynamic update views.py page by changing this line:

return render(request, 'index.html', {'products': products})

here we are returning a dictionary

 

update index.html

<h1>Products</h1>
<ul>
   {% for product in products %}
    <li>{{ product.name }} (${{ product.price }})</li>
    {% endfor %}
</ul>

 

Reload the url:

http://127.0.0.1:8000/products/

 Add Bootstrap:

Create a new html file in template and named it base.html.

Go to getbootstrap.com and from documentation copy the line of code and paste it to base.html file:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
   

  <!-- As a link  -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">PyShop</a>
</nav>

  <div class="container">
        {% block content %}
        {% endblock %}
  </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

 

 Update index.html

{% extends 'base.html' %}

{% block content %}
    <h1>Products</h1>
    <ul>
       {% for product in products %}
        <li>{{ product.name }} (${{ product.price }})</li>
        {% endfor %}
    </ul>
{% endblock %}

 

 Rendering Cards:

 Go to https://getbootstrap.com/docs/4.5/components/card/ and copy the required code.

 And Navbar

{% extends 'base.html' %}

{% block content %}
<h1>Products</h1>
<!--
 div.row + press tab
 div.col + press tab
 -->
<div class="row">
    {% for product in products %}

        <div class="col">
    <div class="card" style="width: 18rem;">
        <img src="{{ product.image_url}}" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">{{ product.name }}</h5>
            <p class="card-text">${{ product.price }}</p>
            <a href="#" class="btn btn-primary">Add to Cart</a>
        </div>
    </div>
    </div>

    {% endfor %}

</div>

{% endblock %}

 

To reuse the templates base.html we have to create templates directory to main folder PyShop and move the file base.html in it.

Update PyShop>settings.py file

'DIRS': [
    os.path.join(BASE_DIR, 'templates')
],

 Working with excel:

import openpyxl as xl
from openpyxl.chart import BarChart, Reference


wb = xl.load_workbook('transaction.xlsx')
sheet = wb['Sheet1']
#cell = sheet['a1']
#cell = sheet.cell(1, 1) #row, column
#print(sheet.max_row)

for row in range(2, sheet.max_row+1):
        cell = sheet.cell(row, 3)
        corrected_price = cell.value
        corrected_price_cell = sheet.cell(row, 4)
        corrected_price_cell.value = corrected_price

values = Reference(sheet,
                   min_row=2,
                   max_row=sheet.max_row,
                   min_col=4,
                   max_col=4)

chart = BarChart()
chart.add_data(values)
sheet.add_chart(chart, 'e2')

wb.save('correct_transaction.xlsx')

 After Refactoring:

import openpyxl as xl
from openpyxl.chart import BarChart, Reference



def process_workbook(filename):
        wb = xl.load_workbook(filename)
        sheet = wb['Sheet1']
        for row in range(2, sheet.max_row+1):
                cell = sheet.cell(row, 3)
                corrected_price = cell.value
                corrected_price_cell = sheet.cell(row, 4)
                corrected_price_cell.value = corrected_price

        values = Reference(sheet,
                           min_row=2,
                           max_row=sheet.max_row,
                           min_col=4,
                           max_col=4)

        chart = BarChart()
        chart.add_data(values)
        sheet.add_chart(chart, 'e2')

        wb.save(filename)

process_workbook('transaction.xlsx')

 output: