در حالت Ajax که مشکل اساسی هست و چندتا چندتا INsert میشه و یه جورایی همینطور تو حلقه میمونه
از Html.beginForm استفاده میکنم رفرش میشه
از هیچکدوم استفاده نکنم نمیدونم چطوری اطلاعات صفحه رو به یه Action توی کنترلر با دکمه Submit ارسال کنم!
نام این جدول را با درنظر گرفتن شرایط موجود میتوان Resources گذاشت.
ستون Name برای ذخیره نام منبع درنظر گرفته شده است. این نام برابر نام منابع درخواستی در سیستم مدیریت منابع ASP.NET است که درواقع برابر همان نام فایل منبع اما بدون پسوند resx. است.
ستون Key برای نگهداری کلید ورودی منبع استفاده میشود که دقیقا برابر همان مقداری است که درون فایلهای resx. ذخیره میشود.
ستون Culture برای ذخیره کالچر ورودی منبع به کار میرود. این مقدار میتواند برای کالچر پیشفرض برنامه برابر رشته خالی باشد.
ستون Value نیز برای نگهداری مقدار ورودی منبع استفاده میشود.
برای ستون Id میتوان از GUID نیز استفاده کرد. در اینجا برای راحتی کار از نوع داده bigint و خاصیت Identity برای تولید خودکار آن در Sql Server استفاده شده است.
نکته: برای امنیت بیشتر میتوان یک Unique Constraint بر روی سه فیلد Name و Key و Culture اعمال کرد.
برای نمونه به تصویر زیر که ذخیره تعدای ورودی منبع را درون جدول Resources نمایش میدهد دقت کنید:
اصلاح کلاس DbResourceProviderFactory
برای ذخیره منابع محلی، جهت اطمینان از یکسان بودن نام منبع، متد مربوطه در کلاس DbResourceProviderFactory باید بهصورت زیر تغییر کند:
public override IResourceProvider CreateLocalResourceProvider(string virtualPath) { if (!string.IsNullOrEmpty(virtualPath)) { virtualPath = virtualPath.Remove(0, virtualPath.IndexOf('/') + 1); // removes everything from start to the first '/' } return new LocalDbResourceProvider(virtualPath); }
ارتباط با دیتابیس
خوشبختانه برای تبادل اطلاعات با جدول بالا امروزه راههای زیادی وجود دارد. برای پیادهسازی آن مثلا میتوان از یک اینترفیس استفاده کرد. سپس با استفاده از سازوکارهای موجود مثلا بهکارگیری IoC، نمونه مناسبی از پیادهسازی اینترفیس مذبور را در اختیار برنامه قرار داد.
اما برای جلوگیری از پیچیدگی بیش از حد و دور شدن از مبحث اصلی، برای پیادهسازی فعلی از EF Code First به صورت مستقیم در پروژه استفاده شده است که سری آموزشی کاملی از آن در همین سایت وجود دارد.
پس از پیادهسازی کلاسهای مرتبط برای استفاده از EF Code First، از کلاس ResourceData که در بخش اول نیز نشان داده شده بود، برای کپسوله کردن ارتباط با دادهها استفاده میشود که نمونهای ابتدایی از آن در زیر آورده شده است:
using System.Collections.Generic; using System.Linq; using DbResourceProvider.Models; namespace DbResourceProvider.Data { public class ResourceData { private readonly string _resourceName; public ResourceData(string resourceName) { _resourceName = resourceName; } public Resource GetResource(string resourceKey, string culture) { using (var data = new TestContext()) { return data.Resources.SingleOrDefault(r => r.Name == _resourceName && r.Key == resourceKey && r.Culture == culture); } } public List<Resource> GetResources(string culture) { using (var data = new TestContext()) { return data.Resources.Where(r => r.Name == _resourceName && r.Culture == culture).ToList(); } } } }
using System.Collections.Generic; using System.Globalization; using DbResourceProvider.Data; namespace DbResourceProvider { public class DbResourceManager { private readonly string _resourceName; private readonly Dictionary<string, Dictionary<string, object>> _resourceCacheByCulture; public DbResourceManager(string resourceName) { _resourceName = resourceName; _resourceCacheByCulture = new Dictionary<string, Dictionary<string, object>>(); } public object GetObject(string resourceKey, CultureInfo culture) { return GetCachedObject(resourceKey, culture.Name); } private object GetCachedObject(string resourceKey, string cultureName) { if (!_resourceCacheByCulture.ContainsKey(cultureName)) _resourceCacheByCulture.Add(cultureName, new Dictionary<string, object>()); var cachedResource = _resourceCacheByCulture[cultureName]; lock (this) { if (!cachedResource.ContainsKey(resourceKey)) { var data = new ResourceData(_resourceName); var dbResource = data.GetResource(resourceKey, cultureName); if (dbResource == null) return null; var cachedResources = _resourceCacheByCulture[cultureName]; cachedResources.Add(dbResource.Key, dbResource.Value); } } return cachedResource[resourceKey]; } } }
private object GetCachedObject(string resourceKey, string cultureName) { lock (this) { if (!_resourceCacheByCulture.ContainsKey(cultureName)) { _resourceCacheByCulture.Add(cultureName, new Dictionary<string, object>()); var cachedResources = _resourceCacheByCulture[cultureName]; var data = new ResourceData(_resourceName); var dbResources = data.GetResources(cultureName); foreach (var dbResource in dbResources) { cachedResources.Add(dbResource.Key, dbResource.Value); } } } var cachedResource = _resourceCacheByCulture[cultureName]; return !cachedResource.ContainsKey(resourceKey) ? null : cachedResource[resourceKey]; }
using System.Collections; using System.Collections.Generic; using System.Globalization; namespace DbResourceProvider { public class CultureFallbackProvider : IEnumerable<CultureInfo> { private readonly CultureInfo _startingCulture; private readonly CultureInfo _neutralCulture; private readonly bool _tryParentCulture; public CultureFallbackProvider(CultureInfo startingCulture = null, CultureInfo neutralCulture = null, bool tryParentCulture = true) { _startingCulture = startingCulture ?? CultureInfo.CurrentUICulture; _neutralCulture = neutralCulture; _tryParentCulture = tryParentCulture; } #region Implementation of IEnumerable<CultureInfo> public IEnumerator<CultureInfo> GetEnumerator() { var reachedNeutralCulture = false; var currentCulture = _startingCulture; do { if (_neutralCulture != null && currentCulture.Name == _neutralCulture.Name) { yield return CultureInfo.InvariantCulture; reachedNeutralCulture = true; break; } yield return currentCulture; currentCulture = currentCulture.Parent; } while (_tryParentCulture && !HasInvariantCultureName(currentCulture)); if (!_tryParentCulture || HasInvariantCultureName(_startingCulture) || reachedNeutralCulture) yield break; yield return CultureInfo.InvariantCulture; } #endregion #region Implementation of IEnumerable IEnumerator IEnumerable.GetEnumerator() { return GetEnumerator(); } #endregion private bool HasInvariantCultureName(CultureInfo culture) { return culture.Name == CultureInfo.InvariantCulture.Name; } } }
public object GetObject(string resourceKey, CultureInfo culture) { foreach (var currentCulture in new CultureFallbackProvider(culture)) { var value = GetCachedObject(resourceKey, currentCulture.Name); if (value != null) return value; } throw new KeyNotFoundException("The specified 'resourceKey' not found."); }
ابتدا تنظیمات موردنیاز فایل کانفیگ را که در قسمت قبل نشان داده شد، در برنامه خود اعمال کنید.
دادههای نمونه نشان داده شده در ابتدای این مطلب را درنظر بگیرید. حال اگر در یک برنامه وب اپلیکیشن، صفحه Default.aspx در ریشه سایت حاوی دو کنترل زیر باشد:
<asp:Label ID="Label1" runat="server" meta:resourcekey="Label1" /> <asp:Label ID="Label2" runat="server" meta:resourcekey="Label2" />
سپس تغییر زیر را در فایل web.config اعمال کنید تا کالچر UI سایت به fa تغییر یابد (به بخش "uiCulture="fa دقت کنید):
<globalization uiCulture="fa" resourceProviderFactoryType = "DbResourceProvider.DbResourceProviderFactory, DbResourceProvider" />
میبینید که با توجه به عدم وجود مقداری برای Label2.Text برای کالچر fa، عملیات fallback اتفاق افتاده است.
کار تولید یک پرووایدر منابع سفارشی دیتابیسی به اتمام رسید. تا اینجا اصول کلی تولید یک پرووایدر سفارشی شرح داده شد. بدین ترتیب میتوان برای هر حالت خاص دیگری نیز پرووایدرهای سفارشی مخصوص ساخت تا مدیریت منابع به آسانی تحت کنترل برنامه نویس قرار گیرد.
اما نکتهای را که باید به آن توجه کنید این است که در پیادهسازیهای نشان داده شده با توجه به نحوه کششدن مقادیر ورودیها، اگر این مقادیر در دیتابیس تغییر کنند، تا زمانیکه سایت ریست نشود این تغییرات در برنامه اعمال نخواهد شد. زیرا همانطور که اشاره شد، مدیریت نمونههای تولیدشده از پرووایدرهای منابع برای هر منبع درخواستی درنهایت برعهده ASP.NET است. بنابراین باید مکانیزمی پیاده شود تا کلاس DbResourceManager از بهروزرسانی ورودیهای کششده اطلاع یابد تا آنها را ریفرش کند.
در ادامه درباره روشهای مختلف نحوه پیادهسازی قابلیت بهروزرسانی ورودیهای منابع در زمان اجرا با استفاده از پرووایدرهای منابع سفارشی بحث خواهد شد. همچنین راهحلهای مختلف استفاده از این پرووایدرهای سفارشی در جاهای مختلف پروژههای MVC شرح داده میشود.
البته مباحث پیشرفتهتری چون تزریق وابستگی برای پیادهسازی لایه ارتباط با دیتابیس در بیرون و یا تولید یک Factory برای تزریق کامل پرووایدر منابع از بیرون نیز جای بحث و بررسی دارد.
منابع
http://msdn.microsoft.com/en-us/library/aa905797.aspx
http://msdn.microsoft.com/en-us/library/system.web.compilation.resourceproviderfactory.aspx
http://www.dotnetframework.org/default.aspx/.../ResourceFallbackManager@cs
http://www.codeproject.com/Articles/14190/ASP-NET-2-0-Custom-SQL-Server-ResourceProvider
prototype: { startRequest: function( element ) { //... }, stopRequest: function( element, valid ) { //... },
var originalStartRequest = $.validator.prototype.startRequest; $.validator.prototype.startRequest = function (element) { // یافتن عنصر در حال بررسی var container = $('form').find("[data-valmsg-for='" + element.name + "']"); // افزودن کلاس نمایش منتظر بمانید container.addClass('loading'); // فراخوانی متد اصلی برای انجام کارهای درونی افزونه originalStartRequest.apply(this, arguments); }; var originalStopRequest = $.validator.prototype.stopRequest; $.validator.prototype.stopRequest = function (element) { // یافتن عنصر در حال بررسی var container = $('form').find("[data-valmsg-for='" + element.name + "']"); // حذف کلاس نمایش منتظر بمانید container.removeClass('loading'); // فراخوانی متد اصلی برای انجام کارهای درونی افزونه originalStopRequest.apply(this, arguments); };
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Url"></span>
<script type="text/javascript"> $(function () { // var r = "12"; var productsDataSource = new kendo.data.DataSource({ transport: { read: { url: "@Url.Action("GetProducts", "Home")", dataType: "json", contentType: 'application/json; charset=utf-8', type: 'GET', data: { param1: "dfvdf", param2: "val2" } // ارسال اطلاعات اضافی و سفارشی به سرور در حین درخواست }, create: { url: "@Url.Action("PostProduct","Home")", contentType: 'application/json; charset=utf-8', type: "POST" }, update: { url:// function (product) { "@Url.Action("UpdateProduct","Home")",//, +product.Id; //}, contentType: 'application/json; charset=utf-8', type: "PUT" }, destroy: { url: function (p) { return "@Url.Action("DeleteProduct","Home")/" + p.Id; }, contentType: 'application/json; charset=utf-8', type: "DELETE" }, parameterMap: function (options) { return kendo.stringify(options); } }, schema: { parse: function (data) { return data; }, data: "Data", total: "Total", model: { id: "Id", // define the model of the data source. Required for validation and property types. fields: { "Id": { type: "number", editable: false }, //تعیین نوع فیلد برای جستجوی پویا مهم است "Name": { type: "string", validation: { required: true }, editable: true }, "Discription": { type: "string", }, "Title": { type: "string", editable: false }, "GroupName": { type: "string", }, "Link": { type: "string" } } }, batch: false, }, error: function (e) { alert(e.errorThrown.stack); }, pageSize: 5, sort: { field: "Id", dir: "desc" } }); $("#report-grid").kendoGrid({ dataSource: productsDataSource, autoBind: true, scrollable: false, pageable: true, sortable: true, columns: [ { field: "Id", title: "#" }, { field: "Name", title: "Product" } ] }); }); </script>
@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>
namespace KendoUI03.Models { public class Product { public int Id { set; get; } public string Name { set; get; } public decimal Price { set; get; } public bool IsAvailable { set; get; } } }
/api/products?{"take":10,"skip":0,"page":1,"pageSize":10,"sort":[{"field":"Id","dir":"desc"}]}
{ "Data": [ {"Id":1500,"Name":"نام 1500","Price":2499.0,"IsAvailable":false}, {"Id":1499,"Name":"نام 1499","Price":2498.0,"IsAvailable":true} ], "Total":1500, "Aggregates":null }
PM> Install-Package Kendo.DynamicLinq
using System.Linq; using System.Net.Http; using System.Web.Http; using Kendo.DynamicLinq; using KendoUI03.Models; using Newtonsoft.Json; namespace KendoUI03.Controllers { public class ProductsController : ApiController { public DataSourceResult Get(HttpRequestMessage requestMessage) { var request = JsonConvert.DeserializeObject<DataSourceRequest>( requestMessage.RequestUri.ParseQueryString().GetKey(0) ); var list = ProductDataSource.LatestProducts; return list.AsQueryable() .ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter); } } }
<head> <meta charset="utf-8" /> <meta http-equiv="Content-Language" content="fa" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Kendo UI: Implemeting the Grid</title> <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <!--شیوه نامهی مخصوص راست به چپ سازی--> <link href="styles/kendo.rtl.min.css" rel="stylesheet" /> <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/kendo.all.min.js" type="text/javascript"></script> <!--محل سفارشی سازی پیامها و مسایل بومی--> <script src="js/cultures/kendo.culture.fa-IR.js" type="text/javascript"></script> <script src="js/cultures/kendo.culture.fa.js" type="text/javascript"></script> <script src="js/messages/kendo.messages.en-US.js" type="text/javascript"></script> <style type="text/css"> body { font-family: tahoma; font-size: 9pt; } </style> <script type="text/javascript"> // جهت استفاده از فایل: kendo.culture.fa-IR.js kendo.culture("fa-IR"); </script> </head>
<div class="k-rtl"> <div id="report-grid"></div> </div>
<script type="text/javascript"> $(function () { var productsDataSource = new kendo.data.DataSource({ transport: { read: { url: "api/products", dataType: "json", contentType: 'application/json; charset=utf-8', type: 'GET' }, parameterMap: function (options) { return kendo.stringify(options); } }, schema: { data: "Data", total: "Total", model: { fields: { "Id": { type: "number" }, //تعیین نوع فیلد برای جستجوی پویا مهم است "Name": { type: "string" }, "IsAvailable": { type: "boolean" }, "Price": { type: "number" } } } }, error: function (e) { alert(e.errorThrown); }, pageSize: 10, sort: { field: "Id", dir: "desc" }, serverPaging: true, serverFiltering: true, serverSorting: true }); $("#report-grid").kendoGrid({ dataSource: productsDataSource, autoBind: true, scrollable: false, pageable: true, sortable: true, filterable: true, reorderable: true, columnMenu: true, columns: [ { field: "Id", title: "شماره", width: "130px" }, { field: "Name", title: "نام محصول" }, { field: "IsAvailable", title: "موجود است", template: '<input type="checkbox" #= IsAvailable ? checked="checked" : "" # disabled="disabled" ></input>' }, { field: "Price", title: "قیمت", format: "{0:c}" } ] }); }); </script>
@using (Html.BeginForm("LoginResultWithParams", "Login",FormMethod.Get)) { <fieldset> <legend>Test LoginResult(string name, string password)</legend> <p> Name: @Html.TextBoxFor(m => m.Name) </p> <p> Password: @Html.PasswordFor(m => m.Password) </p> <input type="submit" value="Login" /> </fieldset> }
export class ShowHtmlComponent { htmlContent = "Template <script>alert(\"Hello!\")</script> <b>Syntax</b>"; }
<h3>Binding innerHTML</h3> <p>Bound value:</p> <p>{{htmlContent}}</p>
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
<p>Result of binding to innerHTML:</p> <p [innerHTML]="htmlContent"></p>
<p #dataContainer></p>
export class ShowHtmlComponent implements OnInit { @ViewChild("dataContainer") dataContainer: ElementRef; ngOnInit() { this.dataContainer.nativeElement.innerHTML = "nativeElement <script>alert(\"Hello!\")</script> <b>Syntax</b>"; } }
HTML Attributes – <div [innerHTML]="UNTRUSTED"></div> OR <input value="UNTRUSTED"> Style— <div [style]="height:UNTRUSTED"></div> URL — <a [href]="UNTRUSTED-URL"></a> OR <script [src]="UNTRUSTED-URL"></script> OR <iframe src="UNTRUSTED-URL" /> GET Parameter – <a href="/user?id=UNTRUSTED">link</a> JavaScript Variable – <script> var value='UNTRUSTED';</script>
export class ShowHtmlComponent implements OnInit { sanitizedHtml: string; constructor(private sanitizer: DomSanitizer) { } ngOnInit() { this.sanitizedHtml = this.sanitizer.sanitize(SecurityContext.HTML, "<b>Sanitize</b><script>attackerCode()</script>"); } }
SecurityContext.NONE SecurityContext.HTML SecurityContext.STYLE SecurityContext.SCRIPT SecurityContext.URL SecurityContext.RESOURCE_URL
export enum SecurityContext { NONE, HTML, STYLE, SCRIPT, URL, RESOURCE_URL } export abstract class DomSanitizer implements Sanitizer { abstract sanitize(context: SecurityContext, value: SafeValue|string|null): string|null; abstract bypassSecurityTrustHtml(value: string): SafeHtml; abstract bypassSecurityTrustStyle(value: string): SafeStyle; abstract bypassSecurityTrustScript(value: string): SafeScript; abstract bypassSecurityTrustUrl(value: string): SafeUrl; abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl; }
import { Pipe, PipeTransform } from "@angular/core"; import { DomSanitizer, SafeHtml, SafeResourceUrl, SafeScript, SafeStyle, SafeUrl } from "@angular/platform-browser"; @Pipe({ name: "safe" }) export class SafePipe implements PipeTransform { constructor(protected sanitizer: DomSanitizer) { } public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl { switch (type) { case "html": return this.sanitizer.bypassSecurityTrustHtml(value); case "style": return this.sanitizer.bypassSecurityTrustStyle(value); case "script": return this.sanitizer.bypassSecurityTrustScript(value); case "url": return this.sanitizer.bypassSecurityTrustUrl(value); case "resourceUrl": return this.sanitizer.bypassSecurityTrustResourceUrl(value); default: throw new Error(`Invalid safe type specified: ${type}`); } } }
@NgModule({ imports: [ // ... ], declarations: [ SafePipe] })
<p [innerHTML]="htmlContent | safe: 'html'"></p>