با درود؛ میشه لطفا بفرمایید در مرورگر IE از ورژن چند از Jquery Ajax پشتیبانی میشه ؟ برای بکارگیری فرمت Json
نظرات مطالب
@page "/test" <nav> <!-- یک روش --> <a href="#section2">Section2</a> <!-- روش دیگر --> <NavLink href="#section2">Section2</NavLink> </nav> @* ... *@ <h2 id="section2">It's Section2.</h2> @* ... *@
@inject IJSRuntime JSRuntime @inject NavigationManager NavigationManager @implements IDisposable @code { protected override void OnInitialized() { NavigationManager.LocationChanged += OnLocationChanged; } protected override async Task OnAfterRenderAsync(bool firstRender) { await ScrollToFragment(); } public void Dispose() { NavigationManager.LocationChanged -= OnLocationChanged; } private async void OnLocationChanged(object sender, LocationChangedEventArgs e) { await ScrollToFragment(); } private async Task ScrollToFragment() { var uri = new Uri(NavigationManager.Uri, UriKind.Absolute); var fragment = uri.Fragment; if (fragment.StartsWith('#')) { // Handle text fragment (https://example.org/#test:~:text=foo) // https://github.com/WICG/scroll-to-text-fragment/ var elementId = fragment.Substring(1); var index = elementId.IndexOf(":~:", StringComparison.Ordinal); if (index > 0) { elementId = elementId.Substring(0, index); } if (!string.IsNullOrEmpty(elementId)) { await JSRuntime.InvokeVoidAsync("BlazorScrollToId", elementId); } } } }
function BlazorScrollToId(id) { const element = document.getElementById(id); if (element instanceof HTMLElement) { element.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" }); } }
@page "/" <PageTitle>Index</PageTitle> <a href="#section2"> <h1>Section2</h1> </a> <SurveyPrompt Title="How is Blazor working for you?" /> <div style="height: 2000px"> </div> <div id="section2"> <h2>It's Section2. </h2> </div> <AnchorNavigation />
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Rendering; using Microsoft.AspNetCore.Components.Routing; using System.Diagnostics.CodeAnalysis; namespace TestAnchorNavigation; public class AnchorNavigation: ComponentBase, IDisposable { private bool _setFocus; [Inject] private NavigationManager NavManager { get; set; } = default!; [Parameter] public RenderFragment? ChildContent { get; set; } [Parameter] public string? BookmarkName { get; set; } [DisallowNull] public ElementReference? Element { get; private set; } protected override void BuildRenderTree(RenderTreeBuilder builder) { builder.OpenElement(0, "span"); builder.AddAttribute(2, "tabindex", "-1"); builder.AddContent(3, this.ChildContent); builder.AddElementReferenceCapture(4, this.SetReference); builder.CloseElement(); } protected override void OnInitialized() => NavManager.LocationChanged += this.OnLocationChanged; protected override void OnParametersSet() => _setFocus = this.IsMe(); private void SetReference(ElementReference reference) => this.Element = reference; private void OnLocationChanged(object? sender, LocationChangedEventArgs e) { if (this.IsMe()) { _setFocus = true; this.StateHasChanged(); } } protected async override Task OnAfterRenderAsync(bool firstRender) { if (_setFocus) await this.Element!.Value.FocusAsync(false); _setFocus = false; } private bool IsMe() { string? elementId = null; var uri = new Uri(this.NavManager.Uri, UriKind.Absolute); if (uri.Fragment.StartsWith('#')) { elementId = uri.Fragment.Substring(1); return elementId == BookmarkName; } return false; } public void Dispose() => NavManager.LocationChanged -= this.OnLocationChanged; }
@page "/" <PageTitle>Index</PageTitle> <NavLink href="#section2"> <h1>Section2</h1> </NavLink> <SurveyPrompt Title="How is Blazor working for you?" /> <div style="height: 2000px"> </div> <AnchorNavigation BookmarkName="section2"> <h2>It's Section2. </h2> </AnchorNavigation>
صفحات کاربری و مدیریتی عموما از آن دسته صفحاتی هستند که عموما قالب متفاوتی با یکدیگر دارند. همچنین صفحات لاگین و یا عضویت نیز میتواند چنین حالتی داشته باشند. جهت تعیین قالب در این پروژه و با استفاده از کتابخانه React-Route میتواند لی اوت متفاوتی را برای هر صفحه تدارک دید.
با محصور کردن کامپوننت Route در کامپوننتی مانند AppRoute و افزودن تعداد خواص میتوان کامپپوننت جدیدی را ایجاد کرد و کارکردهای جدیدتری را به آن اضافه کرد...