目录
4.6同步ASP.NET CSS错误类与Bootstrap CSS类
1. 多语言表单验证错误字符串
另一个任务是如何在ASP.NET MVC应用程序中处理表单验证错误字符串的本地化 即所谓的数据注释本地化。这是本文的重点。
2. 本系列其他文章
本系列中的文章包括：
- ASP.NET 8——使用单个Resx文件的多语言应用程序
- ASP.NET 8——使用单个Resx文件的多语言应用程序——第2部分——替代方法
- ASP.NET 8——使用单个Resx文件的多语言应用程序——第3部分——表单验证字符串
- ASP.NET8——具有单个Resx文件的多语言应用程序——第4部分——资源管理器
3. 共享资源方法
默认情况下，ASP.NET Core 8 MVC技术为每个控制器和视图设想单独的资源文件.resx。但是大多数人不喜欢它，因为大多数多语言字符串在应用程序的不同位置都是相同的，我们希望它都在同一个地方。文献[1]将这种方法称为“共享资源”方法。为了实现它，我们将创建一个标记类SharedResources.cs来对所有资源进行分组。然后，在我们的应用程序中，我们将为该特定类/类型调用依赖注入（DI），而不是特定的控制器/视图。这是Microsoft文档[1]中提到的一个小技巧，在StackOverflow文章[6]中一直是混淆的根源。我们计划在这里揭开它的神秘面纱。虽然一切都在[1]中进行了解释，但需要的是一些实际示例，例如我们在这里提供的示例。
4. 多语种申请步骤
4.1 配置本地化服务和中间件
本地化服务配置Program.cs：
private static void AddingMultiLanguageSupportServices(WebApplicationBuilder? builder)
{
if (builder == null) { throw new Exception("builder==null"); };
builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");
builder.Services.AddMvc()
.AddViewLocalization(LanguageViewLocationExpanderFormat.Suffix)
.AddDataAnnotationsLocalization(options =>
{
options.DataAnnotationLocalizerProvider = (type, factory) =>
factory.Create(typeof(SharedResource));
});
builder.Services.Configure<RequestLocalizationOptions>(options =>
{
var supportedCultures = new[] { "en", "fr", "de", "it" };
options.SetDefaultCulture(supportedCultures[0])
.AddSupportedCultures(supportedCultures)
.AddSupportedUICultures(supportedCultures);
});
}
private static void AddingMultiLanguageSupport(WebApplication? app)
{
app?.UseRequestLocalization();
}4.2 创建标记类SharedResources.cs
这只是一个用于对共享资源进行分组的虚拟标记类。我们需要它的名称和类型。
似乎命名空间需要与应用根命名空间相同，而应用根命名空间需要与程序集名称相同。我在更改命名空间时遇到了一些问题，它不起作用。如果它不适合您，您可以尝试在DI指令中使用完整的类名，如下所示：
IStringLocalizer<SharedResources01.SharedResource> StringLocalizer
名称“SharedResource”没有魔力，您可以将其命名为“MyResources”并将代码中的所有引用更改为“MyResources”，所有引用仍然有效。
位置似乎可以是任何文件夹，尽管有些文章（[6]声称它需要是根项目文件夹，但我在此示例中没有看到此类问题。对我来说，看起来它可以是任何文件夹，只需保持命名空间整洁即可。
//SharedResource.cs===================================================
namespace SharedResources03
{
/*
* This is just a dummy marker class to group shared resources
* We need it for its name and type
*
* It seems the namespace needs to be the same as app root namespace
* which needs to be the same as the assembly name.
* I had some problems when changing the namespace, it would not work.
* If it doesn't work for you, you can try to use full class name
* in your DI instruction, like this one: SharedResources03.SharedResource
*
* There is no magic in the name "SharedResource", you can
* name it "MyResources" and change all references in the code
* to "MyResources" and all will still work
*
* Location seems can be any folder, although some
* articles claim it needs to be the root project folder
* I do not see such problems in this example.
* To me looks it can be any folder, just keep your
* namespace tidy.
*/
public class SharedResource
{
}
}4.3 创建语言资源文件
在“资源”文件夹中，创建语言资源文件，并确保将其命名为SharedResources.xx.resx。
4.4 选择语言/文化
基于[5]，本地化服务有三个默认提供程序：
- QueryStringRequestCultureProvider
- CookieRequestCultureProvider
- AcceptLanguageHeaderRequestCultureProvider
由于大多数应用通常会提供一种机制来设置区域性，用于使用ASP.NET Core区域性Cookie设置区域性，因此在示例中，我们将仅关注该方法。
这是设置.AspNetCore.Culture cookie的代码：
private void ChangeLanguage_SetCookie(HttpContext myContext, string? culture)
{
if (culture == null) { throw new Exception("culture == null"); };
//this code sets .AspNetCore.Culture cookie
CookieOptions cookieOptions=new CookieOptions();
cookieOptions.Expires = DateTimeOffset.UtcNow.AddMonths(1);
cookieOptions.IsEssential = true;
myContext.Response.Cookies.Append(
CookieRequestCultureProvider.DefaultCookieName,
CookieRequestCultureProvider.MakeCookieValue(new RequestCulture(culture)),
cookieOptions
);
}使用Chrome DevTools可以很容易地看到Cookie：
我构建了一个小型应用程序来演示它，这是我可以更改语言的屏幕：
请注意，我在页脚中添加了一些调试信息，以显示请求语言cookie 的值，以查看应用程序是否按预期工作。
4.5 使用数据注释——字段验证
在模型类中，您可以使用需要本地化的适当字符串设置验证属性。
//LocalizationExampleViewModel.cs===============================================
namespace SharedResources03.Models.Home
{ public class LocalizationExampleViewModel
{
/* It is these field validation error messages
* that are focus of this example. We want to
* be able to present them in multiple languages
*/
//model
[Required(ErrorMessage = "The UserName field is required.")]
[Display(Name = "UserName")]
public string? UserName { get; set; }
[EmailAddress(ErrorMessage = "The Email field is not a valid email address.")]
[Display(Name = "Email")]
public string? Email { get; set; }
public bool IsSubmit { get; set; } = false;
}
}对于控制器中的模型级验证，我们将使用经典的IStringLocalizer。
public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
private readonly IStringLocalizer<SharedResource> _stringLocalizer;
public HomeController(ILogger<HomeController> logger,
IStringLocalizer<SharedResource> stringLocalizer)
{
_logger = logger;
_stringLocalizer = stringLocalizer;
}
//--------------------------
public IActionResult LocalizationExample(LocalizationExampleViewModel model)
{
if(model.IsSubmit)
{
if (!ModelState.IsValid)
{
ModelState.AddModelError
("", _stringLocalizer["Please correct all errors and submit again"]);
}
}
else
{
ModelState.Clear();
}
return View(model);
}4.6同步ASP.NET CSS错误类与Bootstrap CSS类
ASP.NET将添加CSS类以.input-validation-error形成一个带有错误的字段。但是，Bootstrap不知道该如何处理该CSS类，因此该类需要映射到Bootstrap理解的CSS类，那就是CSS类.is-invalid。
这就是这里这个JavaScript代码的目的。当然，我们挂钩到DOMContentLoaded事件并做CSS类的映射。
所有这些都是为了将ASP.NET CSS错误类与Bootstrap CSS类同步，以将错误输入元素边框标记为Bootstrap的红色。
最终结果是窗体控件上的红线标记无效字段。
@* _ValidationClassesSyncBetweenAspNetAndBootstrap.cshtml===================== *@
@*
All this is to sync Asp.Net CSS error classes with Bootstrap CSS classes to
mark error input elements border to red by Bootstrap.
Asp.Net will add CSS class .input-validation-error to form a field with an error.
But, Bootstrap does not know what to do with that CSS class, so that class
needs to be mapped to CSS class that Bootstrap understands, and that is
CSS class .is-invalid.
That is the purpose of this JavaScript code that is here. Of course, we hook
to DOMContentLoaded event and do the mapping of CSS classes.
The final result is that the red line on the form control marking an invalid field.
*@
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("input.input-validation-error")
.forEach((elem) => { elem.classList.add("is-invalid"); }
);
});
</script>4.7 带有现场和模型验证消息的示例视图
下面是我们的示例视图：
@* LocalizationExample.cshtml ====================================================*@
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.Extensions.Localization
@model LocalizationExampleViewModel
@{
<partial name="_ValidationClassesSyncBetweenAspNetAndBootstrap" />
<div style="width:500px ">
<fieldset class="border rounded-3 p-3 bg-info">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<form id="formlogin" novalidate>
<div class="form-group">
<label asp-for="UserName"></label>
<div>
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<input class="form-control" asp-for="UserName" />
</div>
<div class="form-group">
<label asp-for="Email"></label>
<div>
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<input class="form-control" asp-for="Email" />
</div>
<input type="hidden" name="IsSubmit" value="true">
<button type="submit" class="btn btn-primary mt-3 float-end"> Submit
</button>
</form>
</fieldset>
</div>
}请注意，我们在form元素中使用了novalidate属性来禁止弹出且未本地化的浏览器级集成验证。
因此，有三个可能的验证级别：
- 服务器端验证——在此示例中使用，并且是本地化的（多语言）
- 客户端验证——在ASP.NET中，可以使用jquery.validate.unobtrusive.min.js来启用它，但我们在此示例中没有使用它。
- 浏览器集成验证——在此示例中，由于使用novalidate属性而禁用，因为它未本地化，并且始终使用英文。
如果不设置novalidate属性，浏览器将弹出其验证对话框，您将在以下屏幕上看到消息。它可能会使用户对多个不同的消息感到困惑。
4.8 执行结果
执行结果如下所示：
请注意，我在页脚中添加了一些调试信息，以显示请求语言cookie 的值，以查看应用程序是否按预期工作。
5. 完整代码
由于大多数人都喜欢可以复制粘贴的代码，因此这是应用程序的完整代码。
//Program.cs===========================================================================
namespace SharedResources03
{
public class Program
{
public static void Main(string[] args)
{
//=====Middleware and Services=============================================
var builder = WebApplication.CreateBuilder(args);
//adding multi-language support
AddingMultiLanguageSupportServices(builder);
// Add services to the container.
builder.Services.AddControllersWithViews();
//====App===================================================================
var app = builder.Build();
//adding multi-language support
AddingMultiLanguageSupport(app);
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=ChangeLanguage}/{id?}");
app.Run();
}
private static void AddingMultiLanguageSupportServices
(WebApplicationBuilder? builder)
{
if (builder == null) { throw new Exception("builder==null"); };
builder.Services.AddLocalization
(options => options.ResourcesPath = "Resources");
builder.Services.AddMvc()
.AddViewLocalization(LanguageViewLocationExpanderFormat.Suffix)
.AddDataAnnotationsLocalization(options =>
{
options.DataAnnotationLocalizerProvider = (type, factory) =>
factory.Create(typeof(SharedResource));
});
builder.Services.Configure<RequestLocalizationOptions>(options =>
{
var supportedCultures = new[] { "en", "fr", "de", "it" };
options.SetDefaultCulture(supportedCultures[0])
.AddSupportedCultures(supportedCultures)
.AddSupportedUICultures(supportedCultures);
});
}
private static void AddingMultiLanguageSupport(WebApplication? app)
{
app?.UseRequestLocalization();
}
}
}
//SharedResource.cs===================================================
namespace SharedResources03
{
/*
* This is just a dummy marker class to group shared resources
* We need it for its name and type
*
* It seems the namespace needs to be the same as app root namespace
* which needs to be the same as the assembly name.
* I had some problems when changing the namespace, it would not work.
* If it doesn't work for you, you can try to use full class name
* in your DI instruction, like this one: SharedResources03.SharedResource
*
* There is no magic in the name "SharedResource", you can
* name it "MyResources" and change all references in the code
* to "MyResources" and all will still work
*
* Location seems can be any folder, although some
* articles claim it needs to be the root project folder
* I do not see such problems in this example.
* To me looks it can be any folder, just keep your
* namespace tidy.
*/
public class SharedResource
{
}
}
//ChangeLanguageViewModel.cs=====================================================
namespace SharedResources03.Models.Home
{
public class ChangeLanguageViewModel
{
//model
public string? SelectedLanguage { get; set; } = "en";
public bool IsSubmit { get; set; } = false;
//view model
public List<SelectListItem>? ListOfLanguages { get; set; }
}
}
//LocalizationExampleViewModel.cs===============================================
namespace SharedResources03.Models.Home
{ public class LocalizationExampleViewModel
{
/* It is these field validation error messages
* that are focus of this example. We want to
* be able to present them in multiple languages
*/
//model
[Required(ErrorMessage = "The UserName field is required.")]
[Display(Name = "UserName")]
public string? UserName { get; set; }
[EmailAddress(ErrorMessage = "The Email field is not a valid email address.")]
[Display(Name = "Email")]
public string? Email { get; set; }
public bool IsSubmit { get; set; } = false;
}
}
//HomeController.cs================================================================
namespace SharedResources03.Controllers
{
public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
private readonly IStringLocalizer<SharedResource> _stringLocalizer;
public HomeController(ILogger<HomeController> logger,
IStringLocalizer<SharedResource> stringLocalizer)
{
_logger = logger;
_stringLocalizer = stringLocalizer;
}
public IActionResult ChangeLanguage(ChangeLanguageViewModel model)
{
if (model.IsSubmit)
{
HttpContext myContext = this.HttpContext;
ChangeLanguage_SetCookie(myContext, model.SelectedLanguage);
//doing funny redirect to get new Request Cookie
//for presentation
return LocalRedirect("/Home/ChangeLanguage");
}
//prepare presentation
ChangeLanguage_PreparePresentation(model);
return View(model);
}
private void ChangeLanguage_PreparePresentation(ChangeLanguageViewModel model)
{
model.ListOfLanguages = new List<SelectListItem>
{
new SelectListItem
{
Text = "English",
Value = "en"
},
new SelectListItem
{
Text = "German",
Value = "de",
},
new SelectListItem
{
Text = "French",
Value = "fr"
},
new SelectListItem
{
Text = "Italian",
Value = "it"
}
};
}
private void ChangeLanguage_SetCookie(HttpContext myContext, string? culture)
{
if (culture == null) { throw new Exception("culture == null"); };
//this code sets .AspNetCore.Culture cookie
CookieOptions cookieOptions=new CookieOptions();
cookieOptions.Expires = DateTimeOffset.UtcNow.AddMonths(1);
cookieOptions.IsEssential = true;
myContext.Response.Cookies.Append(
CookieRequestCultureProvider.DefaultCookieName,
CookieRequestCultureProvider.MakeCookieValue(new RequestCulture(culture)),
cookieOptions
);
}
public IActionResult LocalizationExample(LocalizationExampleViewModel model)
{
if(model.IsSubmit)
{
if (!ModelState.IsValid)
{
ModelState.AddModelError
("", _stringLocalizer["Please correct all errors and submit again"]);
}
}
else
{
ModelState.Clear();
}
return View(model);
}
public IActionResult Error()
{
return View(new ErrorViewModel
{ RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
}
}@* _ValidationClassesSyncBetweenAspNetAndBootstrap.cshtml===================== *@
@*
All this is to sync Asp.Net CSS error classes with Bootstrap CSS classes to
mark error input elements border to red by Bootstrap.
Asp.Net will add CSS class .input-validation-error to form a field with an error.
But, Bootstrap does not know what to do with that CSS class, so that class
needs to be mapped to CSS class that Bootstrap understands, and that is
CSS class .is-invalid.
That is the purpose of this JavaScript code that is here. Of course, we hook
to DOMContentLoaded event and do the mapping of CSS classes.
The final result is that the red line on the form control marking an invalid field.
*@
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("input.input-validation-error")
.forEach((elem) => { elem.classList.add("is-invalid"); }
);
});
</script>
@* ChangeLanguage.cshtml ===================================================*@
@model ChangeLanguageViewModel
@{
<div style="width:500px">
<p class="bg-info">
<partial name="_Debug.AspNetCore.CultureCookie" /><br />
</p>
<form id="form1" >
<fieldset class="border rounded-3 p-3">
<legend class="float-none w-auto px-3">Change Language</legend>
<div class="form-group">
<label asp-for="SelectedLanguage">Select Language</label>
<select class="form-select" asp-for="SelectedLanguage"
asp-items="@Model.ListOfLanguages">
</select>
<input type="hidden" name="IsSubmit" value="true">
<button type="submit" form="form1"
class="btn btn-primary mt-3 float-end"
asp-area="" asp-controller="Home" asp-action="ChangeLanguage">
Submit
</button>
</div>
</fieldset>
</form>
</div>
}
@* LocalizationExample.cshtml ====================================================*@
@using Microsoft.AspNetCore.Mvc.Localization
@using Microsoft.Extensions.Localization
@model LocalizationExampleViewModel
@{
<partial name="_ValidationClassesSyncBetweenAspNetAndBootstrap" />
<div style="width:500px ">
<fieldset class="border rounded-3 p-3 bg-info">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<form id="formlogin" novalidate>
<div class="form-group">
<label asp-for="UserName"></label>
<div>
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<input class="form-control" asp-for="UserName" />
</div>
<div class="form-group">
<label asp-for="Email"></label>
<div>
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<input class="form-control" asp-for="Email" />
</div>
<input type="hidden" name="IsSubmit" value="true">
<button type="submit" class="btn btn-primary mt-3 float-end">
Submit</button>
</form>
</fieldset>
</div>
}6. 参考资料
- [1] 使ASP.NET Core应用的内容可本地化
- [2] 在ASP.NET Core应用中提供语言和文化的本地化资源
- [3] 实施策略，在本地化的ASP.NET Core应用中为每个请求选择语言/区域性
- [4] ASP.NET Core中的全球化和本地化
- [5] 排查ASP.NET Core本地化问题
- [6] 在SharedResources的帮助下ASP.NET Core本地化
https://www.codeproject.com/Articles/5379125/ASP-NET-8-Multilingual-Application-with-Single-R-3
扫一扫
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
