Skip to main content

Featured Post

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 });             }            

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);
        }



Comments

  1. What Is Social Media Optimization (SMO)?

    WHY DIGITAL MARKETING IS IMPORTANT FOR SMALL BUSINESS?

    Thanks for sharing this article, it was excellent and very informative. It's really very useful for all the users. I found a lot of informative stuff in your article. Keep it up.

    ReplyDelete
  2. I am so happy to visit this blog and I love to read. Please stay upto date with your blogs, we will visit again to check our your new post.

    ketogenic forums

    ReplyDelete
  3. Awesome Blog Post.
    This content is very helpful for selling your old gadgets.
    Thank you shring with us.
    Get more content visit: sell camcorder

    ReplyDelete
  4. Great Content. It will useful for knowledge seekers. Keep sharing your knowledge through this kind of article.
    Node JS Course in Chennai
    Perl Course in Chennai

    ReplyDelete
  5. Outstanding work author. Knowledgeable enough. We will surely share your work. Anyway, If you are interested and looking for website development you may visit this website.
    Inwizards
    Hire Xamarin developer
    Hire Blazor developer
    Hire ABP,io Developer

    ReplyDelete

  6. This post is so helpful. Keep updating us with more information
    Graphic Features
    Graphic Design Elements

    ReplyDelete
  7. Thanks for the valuable information and insights you have so provided here... Know What is the NEED for Businesses to Invest in FinTech App.

    ReplyDelete
  8. Good Post. I like your blog. Thanks for Sharing.
    Visit us: dot net training
    Visit us: Dot Net Online Training Hyderabad

    ReplyDelete
  9. Thanks for sharing this valuable and understanding article with us.
    Finding SEO Company Surat
    then plusply digital is offering the best SEO Services in Surat for
    your business website or Online Marketing.

    ReplyDelete
  10. Outstanding work author. Knowledgeable enough.
    if you want to hire abp.io developer then hire it from inwizards web and app development company

    ReplyDelete
  11. This post is so helpfull and informative.Keep updating with more information...
    Full Stack Cloud Developer
    Full Stack Mobile Developer

    ReplyDelete
  12. This post is so helpfull and informative.keep updating with more information...
    Hacker Interface
    Hacking Technology

    ReplyDelete
  13. Excellent information in this Post. Keep it up. Thanks for sharing Love to read it, Waiting For More new Update and I Already Read your Recent Post its Great Thanks,
    GST Filing
    Income Tax Filing

    ReplyDelete
  14. Nice blog! I really loved reading through this Blog... Thanks for sharing.......
    Hire Blockchain Developers

    ReplyDelete
  15. Excellent article and this helps to enhance your knowledge regarding new things. Waiting for more updates.
    Angular CSS
    Angular Material

    ReplyDelete
  16. Is your child using mobile all the day not learning a thing about it!
    We bring fun learning to your child's fingertips.

    This visual learning app is created for kids with a fun factor. It allows you to learn complex topics quickly and retain a lot of useful and valuable information for a more extended time.

    With the Multiply app, your kid gets a secure & free environment of learning while having fun.

    Included with knowledgeable infographic images, carousels, and reels, the Multiply App is one of the unique mobile apps that your child will come across ever.

    Multiply app has various learning categories that allow your child to learn almost everything they need to know.
    If your kid spends most of their time on the screen, why not make it productive for them!
    Give your child a fun & engaging way to learn with Multiply App.

    Get it on Google Play: https://bit.ly/34SVQFg

    ReplyDelete
  17. Need the answer for the questionWhich Software Course Is Best For Freshers?? Get this into the blog with Infycle Technologies for having the top interview questions and answers! Call 7504633633 or 7502633633 for having the best software development courses!

    ReplyDelete
  18. Using ViewComponent, i want to redirect to the page i have created in View folder , is it possible?

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. At APTRON NOIDA, you can enroll in a range of .NET Training in Noida, including beginner, intermediate, and advanced levels. Whether you're looking to learn the basics of .NET programming or want to enhance your existing skills, the institute has a program that's suitable for you. APTRON NOIDA's .NET training courses cover a wide range of topics, including .NET framework, C#, ASP.NET, SQL Server, LINQ, WPF, and more. With a comprehensive curriculum and hands-on training, students gain practical experience and develop the necessary skills to excel in their careers.

    ReplyDelete
  22. Thanks for sharing this informative article on How to use Tabs in ASP.NET CORE. If you want to ASP.Net Core Development Company for your project. Please visit us.

    ReplyDelete
  23. Your explanation of the controller actions for handling tab switching is clear and concise, and it effectively ties together the entire functionality. The introduction of a View Model for tabs is a smart move, general paper questions simplifying the handling of active tabs and making the code cleaner and more readable. The integration of this View Model into the Razor view is seamless and enhances the overall user experience.

    ReplyDelete
  24. Thank-you so much sir for providing this wonderful knowledge regarding asp.net

    ReplyDelete

Post a Comment

Popular Post

Polynomial representation using Linked List for Data Structure in 'C'

Polynomial representation using Linked List The linked list can be used to represent a polynomial of any degree. Simply the information field is changed according to the number of variables used in the polynomial. If a single variable is used in the polynomial the information field of the node contains two parts: one for coefficient of variable and the other for degree of variable. Let us consider an example to represent a polynomial using linked list as follows: Polynomial:      3x 3 -4x 2 +2x-9 Linked List: In the above linked list, the external pointer ‘ROOT’ point to the first node of the linked list. The first node of the linked list contains the information about the variable with the highest degree. The first node points to the next node with next lowest degree of the variable. Representation of a polynomial using the linked list is beneficial when the operations on the polynomial like addition and subtractions are performed. The resulting polynomial can also

Print the asp.net webpage using button

Introduction Today i am talking about printing, and how to print the content or you can say selected content in asp.net. If you have a webpage and you want to print this then you have to choose command key (ctrl+p) for that. Also you want to print the selected part then you have to select the text first then you have to use command key. But sometimes your selected page could not printed. So many websites provide the printing facilities on the webpage. Today i am talking about the same topics here. Lets take a simple example to demonstrate the topic. Source code: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="printpage.aspx.cs" Inherits="printpage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <title></title> <script> function printpage() { var getpanel = document.getElementById("<%= Panel1.ClientID%>"); var MainWin