One of the cool features on Visual Studio 2022 Version 17.6.0 is Sticky Scroll. I really liked this feature so much. It is so much easier to read the code on Visual Studio.
To Enable this Features, just go to the Text Editor options and enable the Sticky Scroll.
(Source image: Microsoft Website)
If you are using Visual studio 2022 with latest version i.e version 17.5.1. You will get benefit of super-fast build features.
I tested in my project. It is super-fast.
But you need to enable this feature in your application like this
Step 1: Go to the Project properties file and make AccelerateBuildsInVisualStudio to true
<AccelerateBuildsInVisualStudio>true</AccelerateBuildsInVisualStudio>
Datalist is one of most useful controls for creating image gallery and product details screen. If we use Datalist controls, then it will save lots of our development time. It has inbuilt paging functionalities.
Before using this code, please configure your project for Radzen Controls like this
https://chandradev819.com/2022/09/28/getting-started-with-radzen-blazor-controls/
@page "/datalist"
@using RadzenTest.Shared
@inject HttpClient Http
<h3>RadzenDataList Demo</h3>
<RadzenDataList
WrapItems="true"
AllowPaging="true"
PageSize="2"
Data="@forecasts"
TItem="WeatherForecast">
<Template Context="WeatherForecast">
<div class="container mt-3 border border-5">
<b>Temp Details</b>
<hr>
<div class="row">
<div class="col">Date: </div>
<div class="col">@WeatherForecast.Date </div>
</div>
<hr>
<div class="row">
<div class="col">TemperatureC: </div>
<div class="col">@WeatherForecast.TemperatureC </div>
</div>
<hr>
<div class="row">
<div class="col">Summary: </div>
<div class="col">@WeatherForecast.Summary </div>
</div>
<hr>
<div class="row">
<div class="col">TemperatureF: </div>
<div class="col">@WeatherForecast.TemperatureF </div>
</div>
</div>
</Template>
</RadzenDataList>
@code {
private WeatherForecast[]? forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
}
}Summary: In the above demo, we saw that how to use datalist control in Blazor.
Source code on Github: https://github.com/Chandradev819/RadzenTest/tree/master
Recently I got the chance to implement google RSS news on one of my Blazor Webassembly project. It is very simple to implement using System.ServiceModel.Syndication package
Step 1: Create the Class like
public class NewsItem
{
public string NewsTitle { get; set; } = "";
public string NewsLink { get; set; } = "";
public DateTime PubishDate { get; set; }
}
Step2: Create the Web API controller and write the method for reading RSS like this
[HttpGet("GetNewsFeedData")]
public List<NewsItem> GetNewsFeedData()
{
List<NewsItem> newsItems = new List<NewsItem>();
List<NewsItem> healthData = new List<NewsItem>();
string url = "https://news.google.com/rss/search?q=prescription+drugs&hl=en-US&gl=US&ceid=US:en";
newsItems = FetchRssFeedData(url);
string healthrssPath = "https://news.google.com/rss/search?q='health'";
healthData= FetchRssFeedData(healthrssPath);
var combineList = newsItems.Concat(healthData).ToList();
var result= (from m in combineList orderby m.PubishDate descending
select m).ToList();
return result;
}
public List<NewsItem> FetchRssFeedData(string path)
{
List<NewsItem> NewsDrugs = new List<NewsItem>();
XmlReader reader = XmlReader.Create(path);
SyndicationFeed feed = SyndicationFeed.Load(reader);
reader.Close();
foreach (SyndicationItem item in feed.Items)
{
NewsItem newsItem = new();
newsItem.NewsTitle = item.Title.Text;
newsItem.NewsLink = item.Links[0].Uri.ToString();
newsItem.PubishDate = (DateTime)item.PublishDate.UtcDateTime;
NewsDrugs.Add(newsItem);
}
return NewsDrugs;
}
Step 3: Consume on this api on Razor page like
@if (NewsDrugs != null)
{
@foreach (var item in NewsDrugs)
{
<div class="container">
<div class="row">
<a href="@item.NewsLink" target="_blank" rel="noopener noreferrer">@item.NewsTitle</a>
</div>
<div class="row">
<b>PubishDate : </b> @item.PubishDate.ToString("MM/dd/yyyy")
</div>
<hr />
</div>
}
}
@code {
public List<NewsItem> NewsDrugs { get; set; }
protected override async Task OnInitializedAsync()
{
NewsDrugs = await DiseaseDrugRepository.GetNewsItems();
await base.OnInitializedAsync();
StateHasChanged();
}
}
Note: For Blazor Server, no need to create web api layer, you can directly write on your razor page.
Step 1: Create the child component like thiss
<h3>HelloWorld</h3>
<p>Current Datetime :@CurrentDate</p>
@code {
public string? CurrentDate { get; set; } = System.DateTime.Now.ToString();
public void RefreshMe()
{
CurrentDate= System.DateTime.Now.ToString();
StateHasChanged();
}
}Step 2: Call this refresh method in parent component like this
@page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<HelloWorld @ref="helloWorld"></HelloWorld>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<p role="status">Current count: @currentCount</p>
@code {
private int currentCount = 0;
protected HelloWorld helloWorld;
private void IncrementCount()
{
currentCount++;
helloWorld.RefreshMe();
}
}
Chandradev's Blog 