We Keep Coding

Navigate two razor component automatically in Blazor template visual studio 2019

I have two razor component with names of "new" and "second". How can i navigate them automatically, i mean when there is something to show navigate to new automatically and when there is nothing to show, navigate back to second automatically again.
Here is new: #page "/new"
<div class="Vistit">
<div class="container-fluid">
<div class="row h-100">
<div class="col-sm-8 ">
#foreach (var appointment in _visibleAppointments)
{
<div class="row mb-5">
<div class="col-sm-4"> <h1> #appointment.HeaderText: </h1> </div>
<div class="col-sm-8">
#foreach (var contactPerson in appointment.Contacts)
{
<h1> #contactPerson.Gender #contactPerson.Name </h1>
}
</div>
</div>
<div class="row mt-5"></div>
<div class="row mt-5"></div>
<div class="row mt-5">
<div class="col-sm-4"> <h1>Company:</h1> </div> <div class="col-sm-8"> <h1> #appointment.Company </h1> </div>
</div>
}
</div>
<div class="col-sm-4 ">
<TemplatedCarousel Items="AssetImages" TItem="ImageFile" AutoScrollInterval="3" OnCarouselItemClicked="OnCarouselItemClicked" ShowNavigation="false">
<ItemTemplate>
<div class="Slideimg">
<img class="d-block center" src="#GetImageSource(#context)" alt="#context.FileName">
</div>
<div class="Slogan">
<p>Here is slogan!</p>
</div>
</ItemTemplate>
</TemplatedCarousel>
</div>
</div>
</div>
</div>
And here is second: #page"/second"
<div class="SecondP">
<div class="container-fluid">
<div class="row h-100">
<div class="col-sm-6 ">
<video controls="controls" class="ml-auto" autoplay muted loop>
<source src="/Video/TestMovie_small.mp4" type="video/mp4" />
</video>
</div>
<div class="col-sm-6 ">
<TemplatedCarousel Items="AssetImages" TItem="ImageFile" AutoScrollInterval="3" OnCarouselItemClicked="OnCarouselItemClicked" ShowNavigation="false">
<ItemTemplate>
<img class="d-block center" src="#GetImageSource(#context)" alt="#context.FileName">
</ItemTemplate>
</TemplatedCarousel>
</div>
</div>
</div>
</div>

You can override OnInitializedAsync() or OnInitialized() in your #code {}section in new or second and inject the NavigationManager to help you.
#inject NavigationManager navigationManager // at the top
///HTML
#code
{
protected override Task OnInitializedAsync()
{
//if something is empty
navigationManager.NavigateTo("/second");
}
}

unicode in web pages in asp.net core

my problem in this question is with Persian characters :
in my app , in browser , my messages and texts are display very well but in back of the Scene is not good , look at image:
and back (in browser page source):
there are this characters , and main problem is here :
in view.cshtml:
#foreach (var choice in question.QuestionChoices)
{
<div class="databox radius-bordered bg-lightgray">
<div class="databox-right bg-blueberry">
<div class="databox-piechart">
<div data-toggle="easypiechart" class="easyPieChart" data-barcolor="#fff" data-linecap="butt" data-percent="50" data-animate="500" data-linewidth="3" data-size="47" data-trackcolor="rgba(255,255,255,0.1)" style="width: 47px; height: 47px; line-height: 47px;">
<span class="white font-90">#choice.AnswerChoices.Count</span>
</div>
</div>
</div>
<div class="databox-left">
<span class="databox-number blueberry"><a style="color: inherit">#choice.Text </a></span>
<div class="databox-text darkgray"></div>
</div>
</div>
}
in top code look at : #choice.Text
and result:
<div class="databox radius-bordered bg-lightgray">
<div class="databox-right bg-blueberry">
<div class="databox-piechart">
<div data-toggle="easypiechart" class="easyPieChart" data-barcolor="#fff" data-linecap="butt" data-percent="50" data-animate="500" data-linewidth="3" data-size="47" data-trackcolor="rgba(255,255,255,0.1)" style="width: 47px; height: 47px; line-height: 47px;">
<span class="white font-90">0</span>
</div>
</div>
</div>
<div class="databox-left">
<span class="databox-number blueberry"><a style="color: inherit">گزینه 1 </a></span>
<div class="databox-text darkgray"></div>
</div>
</div>
<div class="databox radius-bordered bg-lightgray">
<div class="databox-right bg-blueberry">
<div class="databox-piechart">
<div data-toggle="easypiechart" class="easyPieChart" data-barcolor="#fff" data-linecap="butt" data-percent="50" data-animate="500" data-linewidth="3" data-size="47" data-trackcolor="rgba(255,255,255,0.1)" style="width: 47px; height: 47px; line-height: 47px;">
<span class="white font-90">1</span>
</div>
</div>
</div>
<div class="databox-left">
<span class="databox-number blueberry"><a style="color: inherit">گزینه2 </a></span>
<div class="databox-text darkgray"></div>
</div>
</div>
now in top html rendered a (گزینه 2) as a code
how i can fix this issue?
my code is in C# and Asp.net Core.
tnx.

services.AddSingleton<HtmlEncoder>(
HtmlEncoder.Create(allowedRanges: new[] { UnicodeRanges.BasicLatin,
UnicodeRanges.Arabic }));

It looks like you are using a component called "easypiechart" which is not displaying the characters correctly. Is that right?
You must talk to the easypiechart programmers and find a way to fix the problem.
The problem does not seem to be with asp.net core.

Load More Button Umbraco, Razor funcionality

im new to umbraco and c#, I made a blog list in umbraco razor but how can i make a load more button funcionality?
i want when the user click the button load more 5 items to the list.
One way is the the users click the button update the query, but i would need to refresh the page.
Any Help would be great since im stuck on this one, and have no clue how to do this in umbraco.
#{
var selection = Model.Content.Children().Where(x => x.IsVisible()).Take(5).ToList();
}
<div class="container-fluid" style="padding-left: 117px;">
<div class="row" style="margin-top: 5em;">
<div class="col-lg-9 col-md-9 col-sm-9">
<!-- BLOG START -->
#while(selection.Any()){
var oneItem = selection.First();
selection.Remove(oneItem);
<div class="row">
<div class="col-md-4 col-sm-12" onclick="location.href='#oneItem.Url'" style="cursor:pointer">
<div class="card">
<img src="#Umbraco.TypedMedia(oneItem.GetPropertyValue<int>("imagemPublicacaoBlog")).Url" style="height: 15em;">
</div>
</div>
<div class="col-md-6 col-sm-12" onclick="location.href='#oneItem.Url'" style="cursor:pointer">
<span class="card-text qs-blog-direcao">#oneItem.GetPropertyValue("tipoDeDirecao")</span><br><br>
<span class="qs-blog-date-1page" id="qs-datetime">#(oneItem.GetPropertyValue<DateTime>("dataDePublicacaoBlog").ToString("dd MMMM yyyy",new CultureInfo("pt-PT")))</span>
<br>
<span class="qs-blog-publicado-por">#oneItem.GetPropertyValue("publicadoPorBlog") - OPINIÃO </span>
<span class="qs-blog-titulo-1page">#oneItem.GetPropertyValue("tituloBlog")</span>
</div>
<div class="col-md-12 col-sm-12 onclick="location.href='#oneItem.Url'" style="cursor:pointer"" style="margin-top:2em;">
<span class="qs-blog-resumo d-flex justify-content-start">#oneItem.GetPropertyValue("resumoBlog")</span>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
</div>
var twoItems = selection.Take(2).ToList();
if(twoItems.Any()){
<div class="row">
#foreach (var item in twoItems){
selection.Remove(item);
<div class="col-md-6 col-sm-12" onclick="location.href='#item.Url'" style="cursor:pointer">
<span class="card-text qs-blog-direcao-double">#item.GetPropertyValue("tipoDeDirecao")</span><br>
<img src="#Umbraco.TypedMedia(item.GetPropertyValue<int>("imagemPublicacaoBlog")).Url" style="height: 10em;margin-top: 2em;">
<div class="qs-blog-sideByside">
<span class="qs-blog-date-1page-double" id="qs-datetime">#(item.GetPropertyValue<DateTime>("dataDePublicacaoBlog").ToString("dd MMMM yyyy",new CultureInfo("pt-PT")))</span><br>
<span class="qs-blog-publicado-por-double"> #item.GetPropertyValue("publicadoPorBlog") - OPINIÃO </span>
</div>
<div class="qs-blog-titulo-1page-double">#item.GetPropertyValue("tituloBlog")</div>
<div class="qs-blog-resumo-blog d-flex justify-content-start">#item.GetPropertyValue("resumoBlog")</div>
<span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
</div>
}
</div>
<br>
}
}
<!-- BLOG END -->
</div>

It could be something like this:
#{
int page = int.TryParse(Request["page"], out page) ? page : 0;
int pageSize = 5;
var selection = Model.Content
.Children()
.Where(x => x.IsVisible())
.Skip(page * pageSize)
.Take(pageSize)
.ToList();
}
<div class="container-fluid">
...
</div>
<a href="#Request.RawUrl.Split('?')[0]?page=#(page + 1)">
Load next #pageSize results
</a>

Create a bookmark between 2 different views in MVC

I have two views; Index and Giftworx. In the Index I have icons and when each is clicked it should direct user to a specific point in the GiftWorx page. I've tried the below code but it didnt work. Any help would be appreciated.
Index View:
<div class="col-md-4 w3_agileits_features_grid">
<div class="agileits_w3layouts_features_grid">
<div class="col-xs-4 agileits_w3layouts_features_gridl">
<div class="agile_feature_grid">
#* <i class="fa fa-gift" aria-hidden="true"></i>
</div>*#
<i class="fa fa-gift" aria-hidden="true"></i>
</div>
</div>
<div class="col-xs-8 agileits_w3layouts_features_gridr">
<h4>Who uses GiftWorx</h4>
<p>See who uses GiftWorx and more.</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
GiftWorxView
<div class="why-convertible-box" id="GiftWorxUsers">
<div class="container" id="GiftWorxUsers">
<h1>Who uses GiftWorx<i class="fa fa-question-circle"></i></h1>
</div>
</div>
<div class="hoc container clear" id="GiftWorxUsers">
<div class="row">
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" style="height:auto;" src="~/Content/myTemplate/Logos/1.jpg" />
</div>
</div>
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" src="~/Content/myTemplate/Logos/17.jpg" />
</div>
</div>
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" src="~/Content/myTemplate/Logos/15.jpg" />
</div>
</div>

This is a little bit tricky but should work fine. First I declare the variable with concatenated section of your page:
#{
var strLink = Url.Action("GiftWorxUsers", "GiftWorx") + "#GiftworxArea";
}
Then on your Index View, put this on your a href link:
<div class="agile_feature_grid">
<a href='#strLink'>
<i class="fa fa-gift" aria-hidden="true">
</i>
Link text here
</a>
</div>
Make sure you have an area in your View of Giftworx which has a name in this example: Giftworx by adding this piece of code:
<a name="GiftworxArea"></a>
<div class="col-md-4 w3_agileits_features_grid">
//Other stuffs here
</div>
Now when you click on that link, you will be directed on your page on that exact spot with a section name GiftworxArea.

Bootstrap column stacks when data is filled in left one

I have bootstrap nested grid.In one of my row I have 3 column. When I fill data in the first column of the row , then 3rd column of the row stacks down.However it stays good when there is no data.
Before filling Data:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="container-fluid">
<div id="tagListDiv">
tags go here
</div>
</div>
</div>
<div class="col-xs-2">
</div>
<div class="col-xs-4">
<img src="#Url.Content(Model.DefaultImagePath)" alt="Image" height="150" width="150"/>
<span class="glyphicon glyphicon-pencil" style="color: #292929; background-color: #E3DAC9; vertical-align:bottom"></span>
<span class="glyphicon glyphicon-plus" style="color: #292929;background-color: #E3DAC9; vertical-align: bottom"></span>
</div>
</div>
</div>
Redered:
After Filling Data:
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<div class="container-fluid">
<div id="tagListDiv">
#for (var tagCount = 0; tagCount < #Model.TagList.Count(); tagCount++)
{
<div class="row">
<div class="col-xs-4">
#(Html.CheckBoxFor(x => x.TagList.ToList()[tagCount].IsEnable))
<label>#Model.TagList.ToList()[tagCount].TagName</label>
#if (++tagCount == #Model.TagList.Count())
{
break;
}
</div>
<div class="col-xs-4">
#(Html.CheckBoxFor(x => x.TagList.ToList()[tagCount].IsEnable))
<label>#Model.TagList.ToList()[tagCount].TagName</label>
#if (++tagCount == #Model.TagList.Count())
{
break;
}
</div>
<div class="col-xs-4">
#(Html.CheckBoxFor(x => x.TagList.ToList()[tagCount].IsEnable))
<label>#Model.TagList.ToList()[tagCount].TagName</label>
</div>
</div>
}
</div>
</div>
</div>
</div>
After data filled: