I want get data from db once on OnInitializedAsync. I try to use tableLoading to judue,but it's not work.
protected override async Task OnInitializedAsync()
{
if (tableLoading)
{
return;
}
tableLoading = true;
users = await userService.GetSome(1, userType);
_total = await userService.GetCount(userType);
tableLoading = false;
Console.WriteLine("OnInitializedAsync");
}
This is the official way to solve your problem. You have to persist component state during first load so that your services won't be called second time during second load.
First add <persist-component-state /> tag helper inside your apps body:
<body>
...
<persist-component-state />
</body>
Then inject PersistentComponentState in your component and use like this:
#implements IDisposable
#inject PersistentComponentState ApplicationState
#code {
private IEnumerable<User> _users;
private int _total;
private PersistingComponentStateSubscription _persistingSubscription;
protected override async Task OnInitializedAsync()
{
_persistingSubscription =
ApplicationState.RegisterOnPersisting(PersistState);
if (!ApplicationState.TryTakeFromJson<IEnumerable<User>>("users", out var restoredUsers))
{
_users = await userService.GetSome(1, userType);
}
else
{
_users = restoredUsers;
}
if (!ApplicationState.TryTakeFromJson<int>("total", out var restoredTotal))
{
_total = await userService.GetCount(userType);
}
else
{
_total = restoredTotal;
}
}
private Task PersistState()
{
ApplicationState.PersistAsJson("users", _users);
ApplicationState.PersistAsJson("total", _total);
return Task.CompletedTask;
}
void IDisposable.Dispose()
{
_persistingSubscription.Dispose();
}
}
How i know blazor OnInitializedAsync exec in once or twice?
It usually loads twice.
Once when the component is initially rendered statically as part of the page.
A second time when the browser renders the component.
However, If you want to load it once, in that case, you could go to _Host.cshtml and change render-mode="ServerPrerendered" to render-mode="Server", and it would be called only once as a result it would then load your data from the database once only.
Note: For more information you could refer to the official documents here.
I know it's usually loads twice, i want to know when the function is run, how to konw it's run on once or twice. This is my solution.
static bool first = true;
protected override async Task OnInitializedAsync()
{
if (first)
{
first = false;
Console.WriteLine("first time");
return;
}
Console.WriteLine("second time");
}
Related
Please tell me :
How can I wait a task until it is finished in Blazor WASM, no matter the time it takes to complete ?
My UserInfoService.GetUserBasicInfoToListAsync() task through an API controller gets some data from a server SQL table.
Thank You !
protected override async Task OnInitializedAsync()
{
await UserInfoService.GetUserBasicInfoToListAsync().ConfigureAwait(false);
//here must wait the previous task to complete
if (UserInfoService.UserBasicInfoList.Count > 0)
{ //do some code}
}
I think what you're looking for is something like this: I'm assuming your problem is the UI rendering before the async call is complete. [But I may be wrong!]
#page "/"
<PageTitle>Index</PageTitle>
#if (loaded)
{
<div class="bg-dark text-white p-2 m-2">
Rows Retrieved: #NoOfRows
</div>
}
else
{
<div class="alert alert-warning">Loading Records to find the number</div>
}
#code {
private bool loaded;
private int NoOfRows = 0;
protected override async Task OnInitializedAsync()
{
// Task Delay to emulate a slow async call into the data pipeline
// replace with your await
await Task.Delay(3000);
// await UserInfoService.GetUserBasicInfoToListAsync()
NoOfRows = Random.Shared.Next(1, 10);
loaded = true;
}
}
I'm trying to recover some data asynchronously from localStorage then activate a specific tab from MudTabs component if data is found.
<MudTabs Elevation="2" Rounded="true" Centered="true" Color="Color.Primary" ApplyEffectsToContainer="true" Class="custom-tab-panel" PanelClass="pa-6 bg-white" #ref="tabs">
The problems come from my method OnAfterRenderAsync who doesn't work updating the MudBlazor component state, here is the code:
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
var result = await protectedSessionStore.GetAsync<int>("Call");
if (result.Success)
{
tabs.ActivatePanel(1);
StateHasChanged();
}
}
//return base.OnAfterRenderAsync(firstRender);
}
I tested a previous version of it who worked pretty well but i cannot use the await operator inside of it, the method not being asynchronously:
protected override Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
tabs.ActivatePanel(1);
}
return base.OnAfterRenderAsync(firstRender);
}
I didn't found what is specifically the difference between returning the base method and calling the StateHasChanged. When using the StateHasChanged method the active panel remain on the 0 index.
If you have any ideas, thanks in advance.
How can I pass the decoded Data from my Api to my GetX Controller?
Here is my Class "Germany" and my fetchGermany() Function.
Future<Germany> fetchGermany() async {
final response =
await get(Uri.parse('https://api.corona-zahlen.org/germany'));
if (response.statusCode == 200) {
return Germany.fromJson(jsonDecode(response.body));
} else {
throw Exception('Failed to get data');
}
}
class Germany {
int cases;
int deaths;
int recovered;
double weekIncidence;
double casesPer100k;
int casesPerWeek;
Germany(
{required this.cases,
required this.deaths,
required this.recovered,
required this.weekIncidence,
required this.casesPer100k,
required this.casesPerWeek});
factory Germany.fromJson(Map<String, dynamic> json) {
return Germany(
cases: json["cases"],
deaths: json["deaths"],
recovered: json["recovered"],
weekIncidence: json["weekIncidence"],
casesPer100k: json["casesPer100k"],
casesPerWeek: json["casesPerWeek"]);
}
}
Here is my GetX controller which is empty at the moment:
class DetailController extends GetxController {
}
So basically I just want to be able to acceess this data:
cases: json["cases"],
deaths: json["deaths"],
recovered: json["recovered"],
weekIncidence: json["weekIncidence"],
casesPer100k: json["casesPer100k"],
casesPerWeek: json["casesPerWeek"]
While I agree with #DarShan that you don't necessarily need a GetXController here, I still would just for the simple sake of using a stateless widget over a stateful widget. If for no other reason than less cluttered UI code and separating business logic.
Also not sure if your Api call function is global or if that's just how you have it in your example, but if it is global I'd create a helper class.
class ApiHelper {
Future<Germany> fetchGermany() async {
final response =
await get(Uri.parse('https://api.corona-zahlen.org/germany'));
if (response.statusCode == 200) {
return Germany.fromJson(jsonDecode(response.body));
} else {
throw Exception('Failed to get data');
}
}
}
Then your GetX class can look like this.
class DetailController extends GetxController {
Germany germany;
#override
void onInit() async {
super.onInit();
final apiHelper = ApiHelper();
germany = await apiHelper.fetchGermany();
}
}
And here's an example using GetView widget which is just a stateless widget with a built in controller of the type you provided without having to find it.
class GermanyExample extends GetView<DetailController> {
#override
Widget build(BuildContext context) {
// access the initialized Germany object with controller.germany
return // the rest of your UI
}
}
Why not directly use the returned Germany object?
I don't see a need to use GetxController here.
Can be simply used as:
Germany _germany;
#override
void initState() {
super.initState();
fetchGermanyData();
}
fetchGermanyData() async {
final fetchedData = await fetchGermany();
setState(() => _germany = fetchedData);
}
/// use ? : operator to show relevant UI in the build method.
I want to show some pages in the first time app is installed, and the next time when I open the app show some other pages.
I tried this code
protected override void OnStart()
{
if (Application.Current.Properties.ContainsKey("id"))
{
MainPage = new NavigationPage(new Page2());
}
else
{
Application.Current.Properties["id"] = 2;
MainPage = new NavigationPage(new Page1());
}
}
The values in the Properties dictionary are only stored when the app goes to sleep
For a cross-platform approach, you can use the Settings Plugin
Then you can create a boolean property, for example, DidOpenOnce, and if it is false, show your initial welcome page or whatever. Then afterwards, set it to true.
protected void checkApplicationInstallState()
{
//retreive
var prefs = Application.Context.GetSharedPreferences("MyApp", FileCreationMode.Private);
var somePref = prefs.GetBool("IsApplicationOpenedForOnce", null);
if (!somePref) {
// Your Application is opened for the very first time. Now change the value to true as you have now opened the app so next time opening this application should get a true value.
var prefEditor = prefs.Edit();
prefEditor.PutBool(true, "IsApplicationOpenedForOnce");
prefEditor.Commit();
}
}
public MainPage()
{
InitializeComponent();
if (Application.Current.Properties.ContainsKey("FirstUse"))
{
//Do things when it's NOT the first use...
loadinit();
}
else
{
Application.Current.Properties["FirstUse"] = false;
//Do things when it IS the first use...
}
}
public async void loadinit()
{
await Navigation.PushAsync(new LoadPage());
}
I have a large data set that holds up my UI so I thought I would create a background call to fill my local repository and display my other controls in the UI right away and load the results of the async call when I get a response.
I found a helpful tutorial but I am still having to wait until all my results are loaded before I see any controls.
http://www.asp.net/mvc/tutorials/mvc-4/using-asynchronous-methods-in-aspnet-mvc-4
CODE UPDATED
I have created a folder called Services and created FacilitiesService.cs in that folder, see below:
public class FacilitiesService
{
internal async Task<List<Facility>> GetFacilitiesBySourceDbAsync(string sourceDb)
{
var fac = new Facility();
var con = Connect(); // Omitted
try
{
con.Open();
}
catch (Exception ex)
{
Console.WriteLine("Error: GetFacilityBySourceDb " + ex.Message);
}
try
{
OracleDataReader reader = null;
// Requestor
var cmd = new OracleCommand("SELECT FACILITY, FACILITY_ID FROM MyTable where (source_db = '" + sourceDb + "')", con);
reader = cmd.ExecuteReader();
while (reader.Read())
{
fac.Add(new Facility()
{
FacilityName = reader["FACILITY"].ToString(),
FacilityId = reader["FACILITY_ID"].ToString()
});
}
}
catch (Exception ex)
{
throw ex;
}
finally
{
con.Close();
con.Dispose();
}
return fac;
}
}
Then in my HomeController.cs I have the following:
public class HomeController
{
public async Task<List<Facility>> FacilitiesAsync()
{
ViewBag.SyncOrAsync = "Asynchronous";
var service = new FacilitiesService();
this._facilities = new List<Facility>();
var facilities = await service.GetFacilitiesBySourceDbAsync("TEST");
foreach (var item in facilities)
{
Facility fac = new Facility()
{
FacilityName = item.FacilityName,
FacilityId = item.FacilityId
};
_facilities.Add(fac);
}
return _facilities;
}
}
This is my Facility (model) class:
public class Facility : List<Facility>
{
[Required]
[Display(Name = "Facility")]
public string FacilityName { get; set; }
public string FacilityId { get; set; }
public Facility()
{
// Default Constructor
}
public Facility(string facilityName, string facilityId)
{
this.FacilityName = facilityName;
this.FacilityId = facilityId;
}
}
I am using an Ajax call to kick off the FacilitiesAsync method in the code behind from a function call in the About.cshtml page when the user tabs off the tetbox/input control with an id of "tags", I could switch this to something else later but I get the data back when I step through the code-behind and I see both the beforeSend and complete functions fire an alert:
<script type="text/javascript">
$(function () {
var availableTags = [
// Neeed data from function call to populate this list
];
$("#tags").autocomplete({
source: availableTags
});
$("#tags").focusout(function () {
var result = null;
$.ajax({
beforeSend: function() {
alert("Testing");
},
url: "FacilitiesAsync",
success: function(data) {
result = data;
},
complete: function () {
alert(result);
}
});
});
});
</script>
#using (Html.BeginForm()) {
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
}
This works GREAT! However, I want to take the data from the call made to the code-behind to populate the array availableTags and I'm not sure how to do that. Suggestions?
There's a few things wrong with the implementations, and one problem with the approach.
First, the GetFacilitiesBySourceDbAsync does not contain an await. The compiler will issue a warning in this situation, informing you that it's not really an asynchronous method when you do that; it will run synchronously. That's an important warning. If you want asynchronous code, you'll need to make it asynchronous all the way. This means using the asynchronous database methods (ExecuteReaderAsync, etc).
Secondly, the Task.WhenAll call in Index is meaningless (since you only pass it a single task). Also, since Index is synchronous but calls an asynchronous method, the code not shown is probably calling Result, which is a no-no on ASP.NET. As I explain on my blog, this will actually deadlock once your async code is actually asynchronous.
But even if you fix these, it won't do what you want. There's a problem with the approach, and that is that async doesn't change the HTTP protocol (this is also a link to my blog). ASP.NET MVC understands asynchronous methods and will not complete the request until the async action method completes. You'll need to use something like AJAX to get the web page to do what you want.