How to use Tabs in ASP.NET CORE



I want to show Components in a tabs , so first of all create few components. In this project we have three components,

First View Component

 public class AllViewComponent : ViewComponent
    {

        private readonly UserManager<ApplicationUser> _userManager;

        public AllViewComponent(UserManager<ApplicationUser> userManager)
        {
            _userManager = userManager;
        }
        public async Task<IViewComponentResult> InvokeAsync()
        {
            List<StudentViewModel> allUsers = new List<StudentViewModel>();
            var items = await _userManager.Users.ToListAsync();
            foreach (var item in items)
            {
                allUsers.Add(new StudentViewModel {Id=item.Id, EnrollmentNo = item.EnrollmentNo, FatherName = item.FatherName, Name = item.Name, Age = item.Age, Birthdate = item.Birthdate, Address = item.Address, Gender = item.Gender, Email = item.Email });
            }

            return View(allUsers);
        }
    }

Second View Component

 public class StudentsViewComponent : ViewComponent
    {

        private readonly UserManager<ApplicationUser> _userManager;

        public StudentsViewComponent(UserManager<ApplicationUser> userManager)
        {
           _userManager = userManager;
        }
        public async Task<IViewComponentResult> InvokeAsync()
        {
            List<StudentViewModel> students = new List<StudentViewModel>();
            var items = await _userManager.GetUsersInRoleAsync("Student");
            foreach (var item in items)
            {
                students.Add(new StudentViewModel {EnrollmentNo=item.EnrollmentNo,FatherName=item.FatherName, Name = item.Name, Age = item.Age, Birthdate = item.Birthdate, Address = item.Address, Gender = item.Gender, Email = item.Email });
            }

            return View(students);
        }
    }

Third View Component

public class TeacherViewComponent : ViewComponent
    {
        private readonly UserManager<ApplicationUser> _userManager;
     
        public TeacherViewComponent(UserManager<ApplicationUser> userManager)
        {
            _userManager = userManager;
        }
        public async Task<IViewComponentResult> InvokeAsync()
        {
            List<TeacherViewModel> teachers = new List<TeacherViewModel>();
            var items = await _userManager.GetUsersInRoleAsync("Teacher");
            foreach (var item in items)
            {
                teachers.Add(new TeacherViewModel {FatherName=item.FatherName, Name = item.Name, Age = item.Age, Birthdate = item.Birthdate, Address = item.Address, Gender = item.Gender, Email = item.Email });
            }
     
            return View(teachers);
        }

       
    }


Under Shred Folder Create tree structured directory like this 
/Shared/Components/All
/Shared/Components/Teacher
/Shared/Components/Students

Under All Directory , you can create a view which default name is "Default"

@model IEnumerable<StudentManagementSystem.ViewModels.StudentViewModel>

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



<table class="table">
    <thead>
        <tr>
                <th>
                    @Html.DisplayNameFor(model => model.EnrollmentNo)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Age)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Birthdate)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Gender)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Address)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.FatherName)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Email)
                </th>
               
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.EnrollmentNo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Age)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Birthdate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Gender)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Address)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FatherName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Email)
            </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>

Similarly you can create view to other two views.

Now, If you want to implements tabs view then create a ViewModel Class for tabs 

namespace StudentManagementSystem.ViewModels
{
    public class UsersTabViewModel
    {
        public Tab ActiveTab { get; set; }
    }

    public enum Tab
    {
        All,
        Teachers,
        Students
    }
}

Now, You can use it in cshtml file like this 

@model StudentManagementSystem.ViewModels.UsersTabViewModel
@{
    ViewData["Title"] = "Index";
}

<h2>Users Table</h2>
<ul class="nav nav-tabs">
    <li role="presentation" class="@(Model.ActiveTab == StudentManagementSystem.ViewModels.Tab.All ? "active" : string.Empty )"><a asp-route-tabname="All" asp-action="SwitchToTabs">All</a></li>
    <li role="presentation" class="@(Model.ActiveTab == StudentManagementSystem.ViewModels.Tab.Teachers ? "active" : string.Empty )"><a asp-route-tabname="Teachers" asp-action="SwitchToTabs">Teachers</a></li>
    <li role="presentation" class="@(Model.ActiveTab == StudentManagementSystem.ViewModels.Tab.Students ? "active" : string.Empty )"><a asp-route-tabname="Students" asp-action="SwitchToTabs">Students</a></li>
</ul>
@switch (Model.ActiveTab)
{
    case StudentManagementSystem.ViewModels.Tab.All:
        @await Component.InvokeAsync("All");
        break;
    case StudentManagementSystem.ViewModels.Tab.Teachers:
        @await Component.InvokeAsync("Teacher");
        break;
    case StudentManagementSystem.ViewModels.Tab.Students:
        @await Component.InvokeAsync("Students");
        break;
    default:
        break;
}


Now, The controller section for each route value are

 public IActionResult Index(UsersTabViewModel vm)
        {
            if (vm == null)
            {
                vm = new UsersTabViewModel
                {
                    ActiveTab = Tab.All
                };
            }
            return View(vm);
        }
        public IActionResult SwitchToTabs(string tabname)
        {
            var vm = new UsersTabViewModel();
            switch (tabname)
            {
                case "All":
                    vm.ActiveTab = Tab.All;
                    break;
                case "Teachers":
                    vm.ActiveTab = Tab.Teachers;
                    break;
                case "Students":
                    vm.ActiveTab = Tab.Students;
                    break;
                default:
                    vm.ActiveTab = Tab.All;
                    break;
            }
            return RedirectToAction(nameof(AdminController.Index), vm);
        }



Add control dynamically in ASP.NET CORE also save value into Database



public class PersonViewModel
    {
        public string Name { get; set; }
        public string FatherName { get; set; }
       
    }

public class PeopleViewModel
    {
        public List<PersonViewModel> People { get; set; }
    }

Home Controller

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

[HttpPost]
        public IActionResult People(PeopleViewModel vm)
        {
            return View();
        }

cshtml file

@model dynamicTextBox.Models.PeopleViewModel

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

<h2>People</h2>

<h4>PeopleViewModel</h4>
<hr />


<div class="row">
    <div class="col-md-4">
        <form asp-action="People">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="singlePerson">
                <div class="form-group">
                    <label asp-for="People[0].Name"></label>
                    <input asp-for="People[0].Name" />
                </div>
                <div class="form-group">
                    <label asp-for="People[0].FatherName"></label>
                    <input asp-for="People[0].FatherName" />
                </div>
                           </div>
            <div class="form-group">
                <input id="Addbutton" type="button" value="Add" />
            </div>
            <div id="TextBoxContainer">

            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>
@section scripts
    {
<script type="text/javascript">
    $(document).ready(function () {
        var i = 1;
    $("#Addbutton").click(function () {
        var div = $("<div />");
        var value = "";
     
        var nameBox = $("<input />").attr("type", "textbox").attr("name", "People["+ i +"].Name");
        var fatherBox = $("<input />").attr("type", "textbox").attr("name", "People[" + i + "].FatherName");
       
        nameBox.val(value);
        fatherBox.val(value);
         
        div.append(nameBox);
        div.append(fatherBox);
   

        var button = $("<input />").attr("type", "button").attr("value", "Remove");
        button.attr("onclick", "RemoveTextBox(this)");
        div.append(button);
        $("#TextBoxContainer").append(div);
       
        i++;
    });


        });
        function RemoveTextBox(button) {
            $(button).parent().remove();
    }
    function binddata() {
       
    }
</script>
}
<div>
    <a asp-action="Index">Back to List</a>
</div>



Highlight Table Row based on some Condition in ASP.NET Core

Model Class

public class Products
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Price { get; set; }
    }

Controller Code 

public IActionResult Index()
        {
            List<Products> p1 = new List<Products>();
            p1.Add(new Products { Id = 1, Name = "Samsung", Price = 50 });
            p1.Add(new Products { Id = 2, Name = "Samsung1", Price = 50 });
            p1.Add(new Products { Id = 3, Name = "Samsung2", Price = 150 });
            p1.Add(new Products { Id = 4, Name = "Samsung3", Price = 150 });
            p1.Add(new Products { Id = 5, Name = "Samsung4", Price = 550 });
            p1.Add(new Products { Id = 6, Name = "Samsung5", Price = 550 });
            return View(p1);
        }

View Section

@model IEnumerable<TestingApplication.Models.Products>

@{
    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.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Price)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            @if (item.Price > 0 && item.Price < 100)
            {
                <tr class="label-success">
                    <td>

                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Price)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                        @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                        @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
                    </td>
                </tr>
            }
            @if (item.Price > 100 && item.Price < 200)
            {
                <tr class="label-warning">
                    <td>

                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Price)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                        @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                        @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
                    </td>
                </tr>
            }
            @if (item.Price > 150 && item.Price < 600)
            {
                <tr class="label-primary">
                    <td>

                        @Html.DisplayFor(modelItem => item.Id)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Price)
                    </td>
                    <td>
                        @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                        @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                        @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
                    </td>
                </tr>
            }
        }
    </tbody>
</table>



Implement TreeView in ASP.NET CORE

models


 public class City
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int StateId { get; set; }
        public virtual State State { get; set; }
    }

 public class State
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public virtual List<City> City { get; set; }
    }

 public class TreeViewNode
    {
        public string id { get; set; }
        public string parent { get; set; }
        public string text { get; set; }
    }

 Controller Code

 [HttpGet]
 public IActionResult Index()
        {
            List<TreeViewNode> nodes = new List<TreeViewNode>();         

            //Loop and add the Parent Nodes.
            foreach (State type in _context.State)
            {
                nodes.Add(new TreeViewNode { id = type.Id.ToString(), parent = "#", text = type.Title });
            }

            //Loop and add the Child Nodes.
            foreach (City subType in _context.City)
            {
                nodes.Add(new TreeViewNode { id = subType.StateId.ToString() + "-" + subType.Id.ToString(), parent = subType.StateId.ToString(), text = subType.Name });
            }

            //Serialize to JSON string.
            ViewBag.Json = JsonConvert.SerializeObject(nodes);
            return View();
        }

[HttpPost]
        public ActionResult Index(string selectedItems)
        {
            List<TreeViewNode> items = JsonConvert.DeserializeObject<List<TreeViewNode>>(selectedItems);
            return RedirectToAction("Index");
        }

cshtml file 


<div id="jstree">
</div>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    <input type="hidden" name="selectedItems" id="selectedItems" />
    <input type="submit" value="Submit" />
}
@section scripts{
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#jstree').on('changed.jstree', function (e, data) {
                var i, j;
                var postedItems = [];
                for(i = 0, j = data.selected.length; i < j; i++) {

                    //Fetch the Id.
                    var id = data.selected[i];

                    //Remove the ParentId.
                    if(id.indexOf('-') != -1){
                        id = id.split("-")[1];
                    }

                    //Add the Node to the JSON Array.
                    postedItems.push({
                        text: data.instance.get_node(data.selected[i]).text,
                        id: id,
                        parent: data.node.parents[0]
                    });
                }

                //Serialize the JSON Array and save in HiddenField.
                $('#selectedItems').val(JSON.stringify(postedItems));
            }).jstree({
                "core": {
                    "themes": {
                        "variant": "large"
                    },
                    "data": @Html.Raw(ViewBag.Json)
                    },
                "checkbox": {
                    "keep_selected_style": false
                },
                "plugins": ["wholerow", "checkbox"],
            });
        });
    </script>
}

Save and Display Binary Images from Database in DataGridView in Windows Forms

In this article, I am going to show you, How to show images in DataGridView in Windows forms c#. Its easy to bind the DataGridView with the database table which is contain binary image. You can check this code to bind the DataGridView with the image using Entity Framework.


using System;
using System.IO;
using System.Linq;
using System.Windows.Forms;

namespace BankingApplication_Tutorial
{
    public partial class Form4 : Form
    {
        public Form4()
        {
            InitializeComponent();
        }

        private void Form4_Load(object sender, EventArgs e)
        {
            dataGridView1.AutoGenerateColumns = false;
            dataGridView1.ColumnCount = 2;
            dataGridView1.Columns[0].Name = "Id";
            dataGridView1.Columns[0].HeaderText = "Image Id";
            dataGridView1.Columns[0].DataPropertyName = "Id";

            dataGridView1.Columns[1].Name = "Name";
            dataGridView1.Columns[1].HeaderText = "Name";
            dataGridView1.Columns[1].DataPropertyName = "Name";

            DataGridViewImageColumn Imagecolumn = new DataGridViewImageColumn();
            Imagecolumn.Name = "Data Image";
            Imagecolumn.DataPropertyName = "Data";
            Imagecolumn.HeaderText = "Image Show";
            Imagecolumn.ImageLayout = DataGridViewImageCellLayout.Normal;
            dataGridView1.Columns.Insert(2, Imagecolumn);
            dataGridView1.RowTemplate.Height = 100;
            dataGridView1.Columns[2].Width = 100;
            this.bindDataGridView();





        }

        private void bindDataGridView()
        {
            // throw new NotImplementedException();
            banking_dbEntities1 dbe = new banking_dbEntities1();
            var items = dbe.DataGridImages.ToList();
            dataGridView1.DataSource = items;
        }

        private void button1_Click(object sender, EventArgs e)
        {
            banking_dbEntities1 dbe = new banking_dbEntities1();
            using (OpenFileDialog dialog =  new OpenFileDialog())
            {
                if (dialog.ShowDialog() == DialogResult.OK)
                {
                    string filename = dialog.FileName;
                    byte[] bytes = File.ReadAllBytes(filename);
                 
           
            DataGridImage img = new DataGridImage();
                    img.Name = Path.GetFileName(filename);
                    img.Data = bytes;
                    dbe.DataGridImages.Add(img);
                    dbe.SaveChanges();
                     
                     
                     
                        }

            }
            bindDataGridView();
        }
    }
}

Step By Step Guide to use WebAPI in ASP.NET CORE WebApplication

If you have to completed your WebAPI then must to know , how to use it in web application.  Now , you can see , how to use WebAPI in WebApplication.

WEBAPI Project
Step-1 :   Create Model first
public class Student
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

Step-2 :  Create Data Context Class

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

        }
        public DbSet<Student> Students { get; set; }

    }

Step-3 :  Add Connection String into your Application Setting File

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-WebApplication1-6550C064-027F-4939-822B-5B4620D08657;Trusted_Connection=True;MultipleActiveResultSets=true"
  },
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Warning"
    }
  }
}

Step-4 :  Add Connection String in Startup file

  services.AddDbContext<ApplicationDbContext>(options =>
                options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));


Step-5 Do Migration 
Step-6 :  Create Controller 

namespace WebApiTestApplication.Controllers
{
    [Route("api/[controller]")]
    public class StudentController : Controller
    {
        private Context _context;
        public StudentController(Context context)
        {
            _context = context;
        }
        [HttpGet]
        public List<Student> Get()
        {
            return _context.Students.ToList();
        }

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

Step- 7: Add new project Web Application in the same solution
Step-8 : Add Helper Class  also add View Model class

namespace WebApplication1.Helper
{
    public class StudentAPI
    {
        public HttpClient Initial()
        {
            var Client = new HttpClient();
            Client.BaseAddress = new Uri("http://localhost:56562/");
            return Client;
        }
    }

}

If you Know what is "56562" then must to watch the video

And the model class

namespace WebApiTestApplication.Models
{
    public class Student
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

Step-9 :  Add A controller

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        StudentAPI _api = new StudentAPI();

        public async Task<IActionResult> Index()
        {
            List<Student> student = new List<Student>();
            HttpClient client = _api.Initial();
            HttpResponseMessage res = await client.GetAsync("api/Student");
            if (res.IsSuccessStatusCode)
            {
                var result = res.Content.ReadAsStringAsync().Result;
                student = JsonConvert.DeserializeObject<List<Student>>(result);
            }
         
            return View(student);
        }


    }
}

Step-10  : Generate View as list type 

@model IEnumerable<WebApiTestApplication.Models.Student>

@{
    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.Id)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Name)
                </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Id)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
            </td>
        </tr>
}
    </tbody>
</table>



Dynamically Add or remove control in asp.net core using JavaScript

If you want to add some controls on your web browser, i mean to say if you want to add controls on run time then you can easily dome with any script control, without using c# code. So, here i used Java Script code to add controls on a page. And your code is

Index.cshtml

<form method="post">
    <div id="firstdiv">
        <input type="text" name="testinput" />
                <input type="button" value="add dynamic" onclick="DynamicText()"/>

            </div>
            <input type="submit" value="submit"/>
</form>

JS----file

function DynamicText() {
    var division = document.createElement('DIV');
    division.innerHTML = DynamictextBox("");
    document.getElementById("firstdiv").appendChild(division);
}
function DynamictextBox(value) {
    return '<div><input type="text" name="dyntxt" /><input type="button" onclick="ReTextBox(this)" value="Remove"/></div>';
}
function ReTextBox(div) {
    document.getElementById("firstdiv").removeChild(div.parentNode.parentNode);
}


If you want to use this code , learn :