I'm currently reading ASP.NET MVC Succintly ebook, and some examples aren't working properly, one of them is the following:
I created a project from a ASP.NET MVC 4 (.NET 4.5) Template, and in the model a created this ItineraryItem class:
public class ItineraryItem {
public DateTime? When { get; set; }
public string Description { get; set; }
public int? Duration { get; set; }
public bool IsActive { get; set; }
public bool? Confirmed { get; set; }
}
This is the view:
@model AbacoASP.Models.ItineraryItem
<h2>Create</h2>
<div class="editor">
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
@Html.EditorFor(m=>m)
<p><input type="submit" value="Save" /></p>
}
</div>
Then, I created a Custom Editor for DateTime in \Views\Shared\EditorTemplates DateTime.cshtml:
@model DateTime?
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datePicker" , @readonly = "readonly"})
Then suggest to add this script... but not where. I guess to the same DateTime.cshtml in a script tag:
$(".datePicker").datepicker(
{
showOn: "button",
gotoCurrent: true,
showAnim: 'fold',
buttonImage: "/Content/calendar.png",
buttonImageOnly: true
})
There's a similar example that doesn't work either, when I create a Phone.cshtml I get a $ is not defined in console, this is its content:
@model string
@{
var areaCode = string.Empty;
var firstNumber = string.Empty;
var secondNumber = string.Empty;
if (Model != null) {
areaCode = Model.Substring(0, 3);
firstNumber = Model.Substring(3, 3);
if (Model.Length >= 10) {
secondNumber = Model.Substring(6, 4);
}
}
}
<input type="text" name="area_code" id="area_code"
maxlength="3" size="3" value="@areaCode" /> -
<input type="text" name="number1" id="number1"
maxlength="3" size="3" value="@firstNumber" /> -
<input type="text" name="number2" id="number2"
maxlength="4" size="5" value="@secondNumber" />
<input type="hidden" name="@ViewData.TemplateInfo.HtmlFieldPrefix"
id="@ViewData.TemplateInfo.HtmlFieldPrefix" value="@Model" />
<img src="../../../Content/images/Edit32.png" id="phoneNumberEdit" />
<input type="text" name="unparsed" id="unparsed" />
<script type="text/javascript">
$(document).ready(function () {
$("#unparsed").hide();
var edit = $("#phoneNumberEdit");
edit.click(function () { $("#unparsed").toggle(); });
var phone = $('#area_code, #number1, #number2');
phone.autotab_magic().autotab_filter('numeric');
$("#unparsed").change(function () {
var unparsed = $("#unparsed");
var value = unparsed.val();
value = value.replace(/\(|\)|\s|\-/gi, '');
value = value.replace(/[a-zA-Z]+/gi, '');
unparsed.val(value);
$("#area_code").val(value.substring(0, 3));
$("#number1").val(value.substring(3, 6));
$("#number2").val(value.substring(6, 10));
if (value.length == 10)
unparsed.hide();
var result = ($('#area_code').val()
+ $("#number1").val()
+ $("#number2").val());
$("#@ViewData.TemplateInfo.HtmlFieldPrefix")
.val(result);
});
phone.blur(function () {
var result = ($('#area_code').val()
+ $("#number1").val()
+ $("#number2").val());
$("#@ViewData.TemplateInfo.HtmlFieldPrefix")
.val(result);
});
});
</script>
Edit: The accepted answer in this suggested question doesn't work, and answers aren't helpful at all.
Update: I had to manually add the following to _Layout.cshtml inside :
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
I don't know why jQuery is included in Scripts doesn't work out of the box. Even changed that, the Datepicker is not rendered properly, I got 404 error for the "Calendar.png" and no styling for this.
