使用Jquery Globalize和MVC 5 [英] Using Jquery Globalize with MVC 5
问题描述
我试图在MVC5中使用MVC unobstrusive验证和jquery globalize插件(与包
那么,这里有什么问题?我怎么能让这个东西工作?
我最近遇到了同样的问题,试图将I18n添加到MVC5网络应用程序。经过几天的研究并部分使用您的代码作为基础,我找到了一些帮助我实现它的东西。
我的解决方案:
在一个单独的项目中,我将decimal和DateTime属性添加到ApplicationUser类:
public class ApplicationUser:IdentityUser
{
public异步任务< ClaimsIdentity> GenerateUserIdentityAsync(UserManager< ApplicationUser> manager)
{
//注意,authenticationType必须与CookieAuthenticationOptions.AuthenticationType中定义的一致。
var userIdentity = await manager.CreateIdentityAsync(this,DefaultAuthenticationTypes.ApplicationCookie);
//在此处添加自定义用户声明
return userIdentity;
}
public DateTime birthdate {get;组; }
公共十进制余额{get;组; }
}
我还修改了RegisterViewModel以接受这些属性,如下所示:
公共类RegisterViewModel
{
[必填]
[EmailAddress]
[显示(Name =Email)]
public string Email {get;组; }
[必需]
[StringLength(100,ErrorMessage ={0}必须至少{2}个字符。,MinimumLength = 6)]
[ DataType(DataType.Password)]
[显示(名称=密码)]
公共字符串密码{get;组; }
[DataType(DataType.Password)]
[显示(名称=确认密码)]
[比较(密码,ErrorMessage =密码和确认)密码不匹配。)]
public string ConfirmPassword {get;组; }
[必需]
[DataType(DataType.DateTime)]
public DateTime birthdate {get;组; }
[必需]
[DataType(DataType.Currency)]
公共十进制余额{get;组; }
}
然后,我在基础控制器中设置文化,其他控制器继承:
public class BaseController:Controller
{
protected override IAsyncResult BeginExecuteCore(AsyncCallback callback,object state) )
{
string [] cultures = {es-CL,es-GT,en-US};
Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo(cultures [1]);
Thread.CurrentThread.CurrentUICulture = Thread.CurrentThread.CurrentCulture;
返回base.BeginExecuteCore(callback,state);
}
}
这只是出于测试目的,而不是我取的方式真正的应用程序中的文化。
我的文件结构与你的相同,我没有修改web.config文件。
我还使用了此链接用于依赖项。但后来我修改了Register.cshtml的脚本部分中的一些内容:
<! - CLDR - >
< script src =〜/ Scripts / cldr.js>< / script>
< script src =〜/ Scripts / cldr / event.js>< / script>
< script src =〜/ Scripts / cldr / supplemental.js>< / script>
<! - Globalize - >
< script src =〜/ Scripts / globalize.js>< / script>
< script src =〜/ Scripts / globalize / number.js>< / script>
< script src =〜/ Scripts / globalize / date.js>< / script>
<! - $ validate - >
< script src =〜/ Scripts / jquery.validate.js>< / script>
< script src =〜/ Scripts / jquery.validate.globalize.js>< / script>
<! - fetch files - >
< script>
$ .when(
$ .getJSON(/ Scripts / cldr / supplemental / possibleSubtags.json),
$ .getJSON(/ Scripts / cldr / main / en / numbers。 json),
$ .getJSON(/ Scripts / cldr / supplemental / numberingSystems.json),
$ .getJSON(/ Scripts / cldr / main / en / ca-gregorian.json ),
$ .getJSON(/ Scripts / cldr / main / en / timeZoneNames.json),
$ .getJSON(/ Scripts / cldr / supplemental / timeData.json),
$ .getJSON(/ Scripts / cldr / supplemental / weekData.json),
$ .getJSON(/ Scripts / cldr / main / tr / numbers.json),
$。 getJSON(/ Scripts / cldr / main / tr / ca-gregorian.json),
$ .getJSON(/ Scripts / cldr / main / tr / timeZoneNames.json),
)。然后(function(){
console.log(start slicing);
return [] .slice.apply(arguments,[0])。map(function(result){
console.log(切片完成);
返回结果[0];
});
})。then(Globalize.loa d).then(function(){
Globalize.locale(en);
console.log(Locale set to en);
})。then(console.log(LOADED EVERYTHING));
< / script>
根本没有修改_Layout视图脚本,我对控制台日志没有任何问题。
这就是全部,它对我有用,而且这是一个非常相似的案例,我希望它也适合你。
I am trying to use the MVC unobstrusive validation with jquery globalize plugin in MVC5 (in conjunction with the package jquery-validate-globalize). For learning purposes I started a demo project as per here, but it fails to run with globalize (it works on default Microsoft unobstrusive validation). The model is very simple:
public class GlobalizeModel
{
[Range(10.5D, 20.3D)]
public decimal Double { get; set; }
[Required]
public DateTime? DateTime { get; set; }
}
I try to initiate Globalize as follows at the bottom of the _Layout page (the view is minimal with 2 input only): (I get list of necessary files from https://johnnyreilly.github.io/globalize-so-what-cha-want/)
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<!--cldr scripts-->
<script src="~/Scripts/cldr.js"></script>
<script src="~/Scripts/cldr/event.js"></script>
<script src="~/Scripts/cldr/supplemental.js"></script>
<!--globalize scripts-->
<script src="~/Scripts/globalize.js"></script>
<script src="~/Scripts/globalize/number.js"></script>
<script src="~/Scripts/globalize/date.js"></script>
<!--jquery globalize-->
<script src="~/Scripts/jquery.validate.globalize.js"></script>
<script>
$.when(
$.getJSON("/Scripts/cldr/supplemental/likelySubtags.json"),
$.getJSON("/Scripts/cldr/main/en/numbers.json"),
$.getJSON("/Scripts/cldr/supplemental/numberingSystems.json"),
$.getJSON("/Scripts/cldr/main/en/ca-gregorian.json"),
$.getJSON("/Scripts/cldr/main/en/timeZoneNames.json"),
$.getJSON("/Scripts/cldr/supplemental/timeData.json"),
$.getJSON("/Scripts/cldr/supplemental/weekData.json"),
$.getJSON("/Scripts/cldr/main/tr/numbers.json"),
$.getJSON("/Scripts/cldr/main/tr/ca-gregorian.json"),
$.getJSON("/Scripts/cldr/main/tr/timeZoneNames.json"),
console.log("JSONs loaded")
).then(function () {
console.log("start slicing");
return [].slice.apply(arguments, [0]).map(function (result) {
console.log("slicing done");
return result[0];
});
}).then(Globalize.load).then(function () {
Globalize.locale("en");
console.log("Locale set to en");
}).then(console.log("LOADED EVERYTHING"));
</script>
But when I run the page, I only see the console logs JSOns loaded
and LOADED EVERYTHING
. Moreover, when I try a client side validation by typing anything in the number textbox (and of course when the focus is lost), I get the following error in the console:
Uncaught Error: E_DEFAULT_LOCALE_NOT_DEFINED: Default locale has not been defined.
This post here is similar, and I tried to check the things listed there. I think my JSON objects are not fetched, but I am not good aj JS so I am not sure on that. I added the following items to web.config to see if this is something related with file serving, with no avail:
<system.webServer>
<staticContent>
<remove fileExtension=".json"/>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
The culture is set to auto in web.config as follows:
<system.web>
<globalization culture="auto" uiCulture="auto" />
<compilation debug="true" targetFramework="4.5.2"/>
<httpRuntime targetFramework="4.5.2"/>
</system.web>
You can see Scripts
folder structure in here:
So, what is the problem here? How can I make this thing work?
I recently ran into the same problem, trying to add I18n to an MVC5 web app. After several days of research and partly using your code as base, I found some things that helped me implement it.
My Solution: In a separate project, I added decimal and DateTime properties to the ApplicationUser class:
public class ApplicationUser : IdentityUser
{
public async Task<ClaimsIdentity> GenerateUserIdentityAsync(UserManager<ApplicationUser> manager)
{
// Note the authenticationType must match the one defined in CookieAuthenticationOptions.AuthenticationType
var userIdentity = await manager.CreateIdentityAsync(this, DefaultAuthenticationTypes.ApplicationCookie);
// Add custom user claims here
return userIdentity;
}
public DateTime birthdate { get; set; }
public decimal balance { get; set; }
}
I also modified the RegisterViewModel to accept those properties, as follows:
public class RegisterViewModel
{
[Required]
[EmailAddress]
[Display(Name = "Email")]
public string Email { get; set; }
[Required]
[StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }
[DataType(DataType.Password)]
[Display(Name = "Confirm password")]
[Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
public string ConfirmPassword { get; set; }
[Required]
[DataType(DataType.DateTime)]
public DateTime birthdate { get; set; }
[Required]
[DataType(DataType.Currency)]
public decimal balance { get; set; }
}
Then, I set the culture in a base controller, from which other controllers inherit:
public class BaseController : Controller
{
protected override IAsyncResult BeginExecuteCore(AsyncCallback callback, object state)
{
string[] cultures = { "es-CL", "es-GT", "en-US" };
Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo(cultures[1]);
Thread.CurrentThread.CurrentUICulture = Thread.CurrentThread.CurrentCulture;
return base.BeginExecuteCore(callback, state);
}
}
That's just for testing purposes, not the way I fetch culture in the real app.
My file structure is the same as yours and I didn't modify the web.config file.
I also used this link for dependencies. But then I modified a few things in the scripts section of Register.cshtml:
<!-- CLDR -->
<script src="~/Scripts/cldr.js"></script>
<script src="~/Scripts/cldr/event.js"></script>
<script src="~/Scripts/cldr/supplemental.js"></script>
<!-- Globalize -->
<script src="~/Scripts/globalize.js"></script>
<script src="~/Scripts/globalize/number.js"></script>
<script src="~/Scripts/globalize/date.js"></script>
<!-- $ validate -->
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.globalize.js"></script>
<!-- fetch files -->
<script>
$.when(
$.getJSON("/Scripts/cldr/supplemental/likelySubtags.json"),
$.getJSON("/Scripts/cldr/main/en/numbers.json"),
$.getJSON("/Scripts/cldr/supplemental/numberingSystems.json"),
$.getJSON("/Scripts/cldr/main/en/ca-gregorian.json"),
$.getJSON("/Scripts/cldr/main/en/timeZoneNames.json"),
$.getJSON("/Scripts/cldr/supplemental/timeData.json"),
$.getJSON("/Scripts/cldr/supplemental/weekData.json"),
$.getJSON("/Scripts/cldr/main/tr/numbers.json"),
$.getJSON("/Scripts/cldr/main/tr/ca-gregorian.json"),
$.getJSON("/Scripts/cldr/main/tr/timeZoneNames.json"),
).then(function () {
console.log("start slicing");
return [].slice.apply(arguments, [0]).map(function (result) {
console.log("slicing done");
return result[0];
});
}).then(Globalize.load).then(function () {
Globalize.locale("en");
console.log("Locale set to en");
}).then(console.log("LOADED EVERYTHING"));
</script>
The _Layout view scripts weren't modified at all, and I had no problem with the console logs.
That's all, it worked out for me, and as it's a very similar case, I hope it works for you too.
这篇关于使用Jquery Globalize和MVC 5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!