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
