find and solve || findandsolve.com
Please wait.....

Cascading DropDownList In .NET Core

Cascading DropDownList In .NET Core

A cascading drop-down list is a series of dependent DropDownList  which one DropDownList control depends on the parent or previous DropDownList and items in the DropDownList  are populated based on an item that is selected by the user from another DropDownList.The term Cascading a DropDownList refers to a process where a single of multiple DropDropList gets data based on the value picked from another DropDownList. Now I am working on .NET Core web application and I want to fetch Second dropdown list based on value of first dropdown list using ajax without page loading.

Download Source Code : https://findandsolve.com/source-code/code-cascading-dropdowns-with-aja-in-razoe-pages-using-dot-core-5

By the end of this article, we will learn the following:

  1. Creating .NET 5 an application.
  2. Installing Package for Entity framework core.
  3. Database Connection(ConnectionString)-appsetting.json.
  4. Create Category and SubCategory Class.
  5. Adding DbSet for Category, SubCategory in MyDBContext class.
  6. New Service in Startup.cs class for injecting dependency.
  7. Add/Update Migration.
  8. Return JSON format from Controller.
  9. INSERT INTO Scrpt in n SQL.
  10. Getting Data from Database using Entity framework core.
  11. JavaScript/AJAX and JSON.
  12. Bind data in DropDownList in using razor.
  13. Filter Second DropDown data by selected first DrowDown value.

Create Application in .NET 5

Step 1.

Open Visual Studio 2019 from the start page and click on the New Project link.


Step 2.


Step 3.


Finally,I have Created new Project CascadingExam as given below.


Installing Package for Entity framework core

To install the package, just right click on the project CascadingExample and then select Manage NuGet package. The below dialog of the NuGet Package Manager will pop up.In the pop up browse tab,search the  type of  “Microsoft.EntityFrameworkCore.SqlServer” in the search box and just click on the Install button.I am going to install lilke as

Microsoft.EntityFrameworkCore.Tools
Microsoft.EntityFrameworkCore.SqlServer



Database Connection-appsetting.json.

After adding a reference Microsoft.EntityFrameworkCore.SqlServer, now open  appsetting.json and past code as given below.

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    },
    "ConnectionStrings": {
      "windowsAuthentication": true,
      "DefaultConnection": "Data Source=DESKTOP-9KQH8Q0;Database=Demo;Trusted_Connection=True;"//this is windows athenticaiton
      //"SqlAuthintication": "Server=DESKTOP-9KQH8Q0;Database=Demo;User ID=server;Password=server123;Trusted_Connection=True;Connection Timeout=30;"
    }
  },
  "AllowedHosts": "*"
}

Create Category and SubCategory Class.

For adding a new folder, just right click on the project CascadingExample, then choose Add from the menu that pops up, and inside that choose New Folder now I am going to create new folder 'Entities'.like as give below.



For adding a New entity model "Cateogry", just right click on the Entities folde which  already created as given above.Then, select Add >> Class. An "Add New Item" dialog will pop up with the default class selected.Name the class as Cateogry and click on the Add button.



and


Open  under Entities->Category.cs class and paste this code as given below.

     public class Category
      {
         [Key]
         [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
         public int CategoryId { get; set; }
         public string CategoryName { get; set; }
      }

Creae again new Class name SubCategory.cs under Entities folder like as above created Category.cs class.

Open SubCategory.cs clas and past this code as given below.

   public class SubCategory
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int SubCategoryId { get; set;}
        public int CategoryId { get; set; }
        public string SubCategoryName { get; set; }
    }

Note

[Key]: Key represent primary key like as sql table.

[DatabaseGenerated(DatabaseGeneratedOption.Identity)]: represent auto increment identity(1,1)  like as sql table


Creae new Class name MyDBContext.cs under Entities folder like as above like as Category.cs and SubCategory.cs class.MyDBContext class, next, we are going to inherit the DbContext class.

After inheriting with DbContext, next we are creating a constructor which takes DbContextOptions as an input parameter and also inherits the base class constructor (: base(options)) [DbContext].

Now I have three class Category.cs,SubCategory.cs and MyDBContent.cs under the Entities folder like as image.


Adding DbSet for Category, SubCategory in MyDBContext class.

Open MyDBContext.cs from Entities folder and past this code as given below.

  public class MyDBContent:DbContext
    {
        private IConfigurationRoot _config;
        public MyDBContent(IConfigurationRoot config, DbContextOptions options) : base(options)
        {
            _config = config;
        }         public DbSet<Category> Category { get; set; }
        public DbSet<SubCategory> SubCategory { get; set; }
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            base.OnConfiguring(optionsBuilder);
            optionsBuilder.UseSqlServer(_config["ConnectionStrings:DefaultConnection"]);//connection string get by appsetting.json         }
    }

New Service in Startup.cs class for injecting dependency

Open Startup.cs and past this code as given below.


Startup.cs

public class Startup
    {
        private IConfigurationRoot _config;
        public Startup(IConfiguration configuration,IWebHostEnvironment env)         {
            Configuration = configuration;
            var ConfigBuilder = new ConfigurationBuilder().SetBasePath(env.ContentRootPath)
                        .AddJsonFile("appsettings.json");
            _config = ConfigBuilder.Build();
        }
        public IConfiguration Configuration { get; }
        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddSingleton(_config);
            services.AddDbContext<MyDBContent>();
            services.AddControllersWithViews();
        }
        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else             {
                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.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }

Add/Update Migration

After that we are ready to Migration our project.EF Core migrations are a set of commands which you can execute in NuGet Package Manager Console or in dotnet Command Line Interface (CLI).More Details :https://docs.microsoft.com/en-us/ef/core/managing-schemas/migrations/?tabs=dotnet-core-cli.

This is code first application so we are ready to migration our First project.Select View > other Windows >Package Manager Console given below.

After click Package Manager Console,At this point of time, the Package Manager Console will have the following structure.And Type "Add-Migration Initial" as given Image


After Add-Migration Initail,Show the result on Package Manager Console given below.After Migration is success then you must update your database Update-Database like given below.


After update database migration


In the Demo Databasse


INSERT INTO Scrpt in SQL

i want to add rows in my Category table.Now I am showing how to insert data or row in sql table as given below.

   INSERT INTO Category VALUES('Category 1')
   INSERT INTO Category VALUES('Category 2')
   INSERT INTO Category VALUES('Category 3')

And also add rows in my second table SubCategory as given below.

Insert data in SubCategory Under Category 1

INSERT INTO SubCategory VALUES(1,'SubCategory 1')
INSERT INTO SubCategory VALUES(1,'SubCategory_1')
INSERT INTO SubCategory VALUES(1,'SubCategory1')

Insert data in SubCategory Under Catetgory 2

   INSERT INTO SubCategory VALUES(2,'SubCategory 2')
   INSERT INTO SubCategory VALUES(2,'SubCategory_2')
   INSERT INTO SubCategory VALUES(2,'SubCategory2')

Insert data in SubCategory Under Catetgory 3

   INSERT INTO SubCategory VALUES(3,'SubCategory 3')
   INSERT INTO SubCategory VALUES(3,'SubCategory_3')
   INSERT INTO SubCategory VALUES(3,'SubCategory3')

Getting Data from Database using Entity framework core

Open Default Controller HomeController.cs  and replce code as given below.


ViewBag: For more details Click Me

Bind data in DropDownList in using razor.

Open Index page under Views->Home->Index.cshtml and add this code as given below.

HTML

@model CascadingExample.Entities.SubCategory 
@{
    ViewData["Title"] = "Home Page";
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-2 form-group">
            <select asp-for="CategoryId" class="form-control" id="categoryId"
                    asp-items="@(new SelectList(@ViewBag.CategoryList,"CategoryId","CategoryName"))"></select>
        </div>
        <div class="col-sm-2 form-group">
            <select asp-for="SubCategoryId" class="form-control"id="subCategoryId"></select>
        </div>
    </div>
</div>

JavaScript/AJAX and JSON

JavaScript in index.cshtml page

<script type="text/javascript">
    $(document).ready(function () {         getSubCategoryListByCategoryId();     })
    $("#categoryId").change(function () {         getSubCategoryListByCategoryId();     });
    var getSubCategoryListByCategoryId = function () {          $.ajax({             url: '@Url.Action("GetSubCategoryByCategoryId","Home")',             type: 'GET',             data: {                 categoryId:$('#categoryId').val(),             },             success: function (data) {                 $('#subCategoryId').find('option').remove()                 $(data).each(                     function (index, item) {                         $('#subCategoryId').append('<option value="' + item.subCategoryId + '">' + item.subCategoryName + '</option>')                     });             },             error: function () {
            }            });     }
</script>

$(document).ready(function () {} : will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

Finally we have completed the "Cascading Dropdown List  in .NET 5". Thanks for reading the article. If you like it, please share it.

Selena  Kandakar

Selena Kandakar

I like working on projects with a team that cares about creating beautiful and usable interfaces.

Comments



Report Response