Using Bootstrap Tab in dotnet core razor pages in partial views

Recently, we were working on a project where my client asked me for the tab in a popup window. Something like the image given below:

The project requires to show the services based on subcategories like if the user selects SpliteACRepaire service, they get the list of split ac services, and if the user selects for windowacrepairservices, the user will get the services related to window ac services.

1) Add partial view in our case it is(_services)
Right-click on a shared folder and choose razor view.
Next, you’ll be prompted to add a razor view.
Enter the desired name and select create as a partial view

2) Create Viewmodel (In Our case ServiceRangeViewModel)

Below is the code of viewmodel

ApplicationDbContext Context

        public ServiceRangeViewModel(ApplicationDbContext context)
        {
            Context = context;
        }

        public List? Services { get; set; }
        public List? Ranges { get; set; }

        public async Task<List> GetRanges(int id)
        {
            Ranges =await Context.TblRange.Where(i => i.SubCategoryId == id).ToListAsync();
            return Ranges;
        }

        public async Task<List> GetServices(int id)
        {
            Services = await Context.TblServices.Where(i => i.RangeId == id).ToListAsync();
            return Services;
        }

3) Dynamically bind Subcategory page

4) Sending id to partialview using jquery


        $(function () {
            $('.announce').on('click', function () {                
                $('#servicescontainer').load(`/Services/product?id=${$(this).data('id')}`);
                $('#expfrm3').modal("show");
            });

           
        })


5) adding handler in page directive


        @page "{handler?}"

6) Calling partialview from codebehind and bind the model


        public async Task OnGetProductAsync(int id)
        {
            List Rangess = await context.TblRange.Where(subcat => subcat.SubCategoryId == id).ToListAsync();
            
            List Servicess = await context.TblServices.ToListAsync();

            ServiceRangeViewModel model = new ServiceRangeViewModel(context)
            {
                Ranges = Rangess,
                Services = Servicess
            };
            return Partial("_ServiceDetails",model);
        }

7) In partial view _ServiceDetails

Reference for partial view calling from cshtml page:

https://www.mikesdotnetting.com/article/325/partials-and-ajax-in-razor-pages

Leave a Reply

Your email address will not be published. Required fields are marked *