I'm using MVC4 to develop an intranet web app. When I try to create a new person, I have to choose a start date. I've implemented a datepicker with a jQuery script in order to do that. I had a problem with the culture and decimal numbers but fortunately, with help I managed to fix it. The accepted date format is the yyyy/mm/dd format but I want to make it dd/mm/yyyy. Is it possible? I tried to change the format, include the tags, ... No effect.
The Create View :
#model BuSIMaterial.Models.Person
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Person</legend>
<div class="editor-label">
First name :
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.FirstName, new { maxlength = 50 })
#Html.ValidationMessageFor(model => model.FirstName)
</div>
<div class="editor-label">
Last name :
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.LastName, new { maxlength = 50 })
#Html.ValidationMessageFor(model => model.LastName)
</div>
<div class="editor-label">
National number :
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.NumNat, new { maxlength = 11 })
#Html.ValidationMessageFor(model => model.NumNat)
</div>
<div class="editor-label">
Start date :
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.StartDate, new {#class = "datepicker" })
#Html.ValidationMessageFor(model => model.StartDate)
</div>
<div class="editor-label">
End date :
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.EndDate, new { #class = "datepicker" })
#Html.ValidationMessageFor(model => model.EndDate)
</div>
<div class="editor-label">
Distance House - Work (km) :
</div>
<div class="editor-field">
#Html.EditorFor(model => model.HouseToWorkKilometers)
#Html.ValidationMessageFor(model => model.HouseToWorkKilometers)
</div>
<div class="editor-label">
Category :
</div>
<div class="editor-field">
#Html.DropDownList("Id_ProductPackageCategory", "Choose one ...")
#Html.ValidationMessageFor(model => model.Id_ProductPackageCategory) Add a new category?
</div>
<div class="editor-label">
Upgrade? :
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Upgrade)
#Html.ValidationMessageFor(model => model.Upgrade)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jqueryui")
#Styles.Render("~/Content/themes/base/css")
}
jQuery picker and globalization culture :
$(document).ready(function () {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy'
});
});
$.validator.methods.number = function (value, element) {
return this.optional(element) ||
!isNaN(Globalize.parseFloat(value));
}
$(document).ready(function () {
Globalize.culture('fr-FR');
});
jQuery.extend(jQuery.validator.methods, {
range: function (value, element, param) {
//Use the Globalization plugin to parse the value
var val = $.global.parseFloat(value);
return this.optional(element) || (
val >= param[0] && val <= param[1]);
}
});
Thanks a lot.
You should add attribute for model property
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
public DateTime StartDate { get; set; }
Related
I've been working on asp.net mvc.I ran into a problem.I have a textbox which is multiline.I want to increase it's height.I've tried using #html.raw method and also tried to add inline style using new{styles:} in Html.EditFor.Nothing worked.So,How can I do that ?Here is my View
#model CTCFremont.Models.eMail
#{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function () {
$("#PrayerRequest").css("height", 300);
$("#PrayerRequest").css("width", 200);
});
</script>
<h2>Submit Your Prayer Request</h2>
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>eMail</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Email)
#Html.ValidationMessageFor(model => model.Email)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Request)
</div>
<div class="editor-field" >
#Html.EditorFor(model => model.Request,Html.Id("PrayerRequest"))
#Html.ValidationMessageFor(model => model.Request)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Let me know how to deal with this..
Not sure which editor you want to use a textarea for, but just use code like the following to specify a height in CSS styles.
#Html.TextAreaFor(x => x.Request, new {#style = "height: 30px;"})
I have a model named "Professional" that have as attribute a list of other objects named "Skill".
At my edit page I'm trying to do something that will list all skills persisted at database and the user will choice someone and create a link with that skill.
But I have no idea how can i achieve this:
My Edit View:
#model TCCApplication.Models.ProfessionalModel
#{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>ProfessionalModel</legend>
#Html.HiddenFor(model => model.Id)
#Html.HiddenFor(model => model.UserAccount.Id)
#Html.HiddenFor(model => model.UserAddress.Id)
<div class="editor-label">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.BirthDate)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.BirthDate)
#Html.ValidationMessageFor(model => model.BirthDate)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.PhoneNumber)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.PhoneNumber)
#Html.ValidationMessageFor(model => model.PhoneNumber)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Profession)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Profession)
#Html.ValidationMessageFor(model => model.Profession)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.UserAccount.Username)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.UserAccount.Username)
#Html.ValidationMessageFor(model => model.UserAccount.Username)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.UserAccount.Password)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.UserAccount.Password)
#Html.ValidationMessageFor(model => model.UserAccount.Password)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.UserAddress.Street)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.UserAddress.Street)
#Html.ValidationMessageFor(model => model.UserAddress.Street)
</div>
<fieldset class="row">
<legend>Habilidades</legend>
#foreach (var skill in Model.Skills)
{
#Html.HiddenFor(sk => skill.Id)
<div class="col-md-10">
<div class="display-label">
#Html.Label("Nome da habilidade: ")
#Html.DisplayFor(sk => skill.Name)
</div>
<div class="display-label">
#Html.Label("Descrição")
#Html.DisplayFor(sk => skill.Description)
</div>
<div class="display-label">
#Html.Label("Categoria: ")
#Html.DisplayFor(sk => skill.Category.Name)
</div>
</div>
<div class="col-md-2">
#Html.ActionLink("Deletar Skill", "DeleteSkill", new { skillId = skill.Id, professionalId = Model.Id })
</div>
}
<p>
<div>
#Html.DropDownList("Skills", (IEnumerable<SelectListItem>)ViewBag.skills)
</div>
</p>
<div>
#Html.ActionLink("Adicionar habilidade não presente na lista", "AddNewSkill", new { professionalId = Model.Id})
</div>
</fieldset>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
This will get a list of distinct strings from the database.
Controller:
ViewBag.Skills = db.Skills.OrderBy(c=>c.Name).Select(c => c.Name).Distinct().ToList();
This will put the strings gathered previously into a multi-select list.
View:
#Html.DropDownListFor(model => model.Skills, ((List<int>)ViewBag.Skills).Select(m=> new SelectListItem{Value = m.ToString(CultureInfo.InvariantCulture), Text = m.ToString(CultureInfo.InvariantCulture)}), new {multiple = "multiple"})
You can approach this a bit more intelligently by creating a list of SelectListItems from the result of your db result by putting the value to the ID and the text to the name. That'll make it easier to save changes later.
I am using MVC 4 (C# with razor) and I have added a jquery datepicker to my page which works fine.
I now want to add a tooltip which I have done in the code below.
<div class="editor-label">
#Html.LabelFor(model => model.Rating)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Rating, new { title = "Rating" })
#Html.ValidationMessageFor(model => model.Rating)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ReleaseDate)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ReleaseDate, new { id = "ReleaseDate" })
#Html.ValidationMessageFor(model => model.ReleaseDate)
</div>
With the script as
<script type="text/javascript">
$(function () {
$('#ReleaseDate').datepicker({ dateFormat: "dd-mm-yy" });
$( document ).tooltip();
});
The date picker works fine but nothing happens with the tooltip, any ideas?
Here is the full page code for the view
#model testpage.Models.Game
#{
ViewBag.Title = "Create";
}
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<h2>Create</h2>
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>Game</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Title)
#Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Rating)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Rating, new { #title = "Rating" })
#Html.ValidationMessageFor(model => model.Rating)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ReleaseDate, "Release Date")
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ReleaseDate, new { id = "ReleaseDate" })
#Html.ValidationMessageFor(model => model.ReleaseDate)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Price)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Price)
#Html.ValidationMessageFor(model => model.Price)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript">
$(function () {
$('#ReleaseDate').datepicker({ dateFormat: "dd-mm-yy" });
$( document ).tooltip();
});
</script>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
After a lucky find on google the tooltip doesn't work with editorfor so I changed it to TextBoxfor and it worked great
I have a Create cshtml Page as follows :-
#model MvcCommons.ViewModels.CompositeViewModel
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Article</legend>
<div class="editor-label">
#Html.LabelFor(model => model.ArticleViewModel.Article.ArticleTitle)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ArticleViewModel.Article.ArticleTitle)
#Html.ValidationMessageFor(model => model.ArticleViewModel.Article.ArticleTitle)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ArticleViewModel.Article.ArticleDate)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ArticleViewModel.Article.ArticleDate)
#Html.ValidationMessageFor(model => model.ArticleViewModel.Article.ArticleDate)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ArticleViewModel.Article.ArticleText)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ArticleViewModel.Article.ArticleText)
#Html.ValidationMessageFor(model => model.ArticleViewModel.Article.ArticleText)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ArticleViewModel.Article.ArticleSource)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ArticleViewModel.Article.ArticleSource)
#Html.ValidationMessageFor(model => model.ArticleViewModel.Article.ArticleSource)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ArticleViewModel.Article.CategoryID, "Category")
</div>
<div class="editor-field">
#Html.DropDownList("CategoryID", String.Empty)
#Html.ValidationMessageFor(model => model.ArticleViewModel.Article.CategoryID)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
and then I am getting the viewModel inside the Create Action as follows :-
[HttpPost]
public ActionResult Create(CompositeViewModel viewModel)
{
if (ModelState.IsValid)
{
unitOfWork.ArticleRepository.Insert(viewModel.ArticleViewModel.Article);
unitOfWork.Save();
return RedirectToAction("Index");
}
PopulateDropDownList(viewModel.ArticleViewModel.Article.CategoryID);
return View(viewModel);
}
The PopulateDropDownList code is as follows :-
private void PopulateDropDownList(object selectedCategory = null)
{
var categoryQuery = unitOfWork.CategoryRepository.Get(
orderBy: q => q.OrderBy(d => d.CategoryTitle));
ViewBag.CategoryID = new SelectList(unitOfWork.CategoryRepository.Get(), "CategoryID", "CategoryTitle", selectedCategory);
}
My problem is that the CategoryID inside the CompositeViewModel viewModel is always 0 no matter what values I choose in the dropdown list! The other data entered in the Create cshtml is filled correctly inside the viewModel.
I cannot spot what I am doing wrong.
Thanks for your help and time
Shouldn't you be using DropDownListFor:
#Html.DropDownListFor(model => model.ArticleViewModel.Article.CategoryID, (SelectList)ViewBag.CategoryID)
You should write
#Html.DropDownList("ArticleViewModel.Article.CategoryID", ViewBag.CategoryID, null)
so ModelBinding works correctly or even use DropDownListFor<>().
Here is my table schema:
Here is my controller:
public ActionResult Register()
{
return View();
}
[HttpPost]
public ActionResult Register(FormCollection formValues)
{
return View();
}
And here is my Register view:
#model LocalizationWebsite.Models.SiteUser
#{
ViewBag.Title = "Localization | Create Account";
}
<h2>Create Your Account</h2>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<div class="editor-label">
#Html.LabelFor(model => model.Username)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Username)
#Html.ValidationMessageFor(model => model.Username)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Password)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Password)
#Html.ValidationMessageFor(model => model.Password)
</div>
<div class="editor-label">
#Html.EditorFor(model => model.Password)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Password)
#Html.ValidationMessageFor(model => model.Password)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Email)
#Html.ValidationMessageFor(model => model.Email)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.AvatarPath)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.AvatarPath)
#Html.ValidationMessageFor(model => model.AvatarPath)
</div>
<p>
<input type="submit" value="Create" />
</p>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
How do you suggest I check if the same password was written in both fields? If possible, I'd like to do this automatically as the user is typing in.
Thank you for the help.
You could decorate your view model properties with the [Compare] validation attribute to ensure that two propery values are matching.
If you want to do it from scratch, I would suggest using a little JQuery or javascript. This will give you control over how to do it "automatically."
But, if you can use the [Compare] attribute on the ViewModel, then this post from Scott Gu will allow you to use client-side validation via the DataAnnotations.
Use the CompareAttribute. Good article: http://davidhayden.com/blog/dave/archive/2011/01/01/CompareAttributeASPNETMVC3.aspx