Как ни странно, я не получаю сообщение об ошибке, однако функция jquery datepicker
и numeric
плагин, который я использую, не будут работать ни в одном из полей ввода, к которым они должны быть прикреплены.
Это просто простая страница создания, поэтому метод контроллера ничего не делает, но перенаправляет пользователя на страницу Create.cshtml
.
//
// GET: /ZipCodeTerritory/Create
public ActionResult Create()
{
return View();
}
Я только начинаю с этой страницы, так что представление в равной степени упрощено. Ниже представлены теги сценария jquery в общем макете, а затем страница " Create
.
раскладка
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/typeahead.js")" type="text/javascript"></script>
Создать представление
@model Monet.Models.ZipCodeTerritory
@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create</h2>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.numeric.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/datepicker.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$('#ZipCode').numeric();
$('#EndDate').datepicker({
dateFormat: 'mm/dd/yy'
})
$('#EffectiveDate').datepicker({
dateFormat: 'mm/dd/yy'
})
</script>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>ZipCodeTerritory</legend>
<div class="editor-label">
@Html.LabelFor(model => model.ChannelCode)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.ChannelCode, new { maxLength = 1 })
@Html.ValidationMessageFor(model => model.ChannelCode)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.DrmTerrDesc)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.DrmTerrDesc, new { maxLength = 30 })
@Html.ValidationMessageFor(model => model.DrmTerrDesc)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.IndDistrnId)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.IndDistrnId, new { maxLength = 3 })
@Html.ValidationMessageFor(model => model.IndDistrnId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.StateCode)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.StateCode, new { maxLength = 2 })
@Html.ValidationMessageFor(model => model.StateCode)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ZipCode)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.ZipCode, new { maxLength = 9 })
@Html.ValidationMessageFor(model => model.ZipCode)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.EndDate)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.EndDate)
@Html.ValidationMessageFor(model => model.EndDate)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.EffectiveDate)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.EffectiveDate)
@Html.ValidationMessageFor(model => model.EffectiveDate)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.LastUpdateId)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.LastUpdateId, new { maxLength = 8 })
@Html.ValidationMessageFor(model => model.LastUpdateId)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
Вот рендеринг HTML
<script type="text/javascript">
$('#ZipCode').numeric();
$('#EndDate').datepicker({
dateFormat: 'mm/dd/yy'
})
$('#EffectiveDate').datepicker({
dateFormat: 'mm/dd/yy'
})
</script>
<form action="/ZipCodeTerritory/Create" method="post"> <fieldset>
<legend>ZipCodeTerritory</legend>
<div class="editor-label">
<label for="ChannelCode">Channel Code</label>
</div>
<div class="editor-field">
<input id="ChannelCode" maxLength="1" name="ChannelCode" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="ChannelCode" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="DrmTerrDesc">DRM Territory Description</label>
</div>
<div class="editor-field">
<input id="DrmTerrDesc" maxLength="30" name="DrmTerrDesc" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="DrmTerrDesc" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="IndDistrnId">Territory</label>
</div>
<div class="editor-field">
<input id="IndDistrnId" maxLength="3" name="IndDistrnId" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="IndDistrnId" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="StateCode">State Code</label>
</div>
<div class="editor-field">
<input id="StateCode" maxLength="2" name="StateCode" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="StateCode" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="ZipCode">Zip Code</label>
</div>
<div class="editor-field">
<input id="ZipCode" maxLength="9" name="ZipCode" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="ZipCode" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="EndDate">End Date</label>
</div>
<div class="editor-field">
<input data-val="true" data-val-required="The End Date field is required." id="EndDate" name="EndDate" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="EndDate" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="EffectiveDate">Effective Date</label>
</div>
<div class="editor-field">
<input data-val="true" data-val-required="The Effective Date field is required." id="EffectiveDate" name="EffectiveDate" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="EffectiveDate" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="LastUpdateId">Last Update ID</label>
</div>
<div class="editor-field">
<input id="LastUpdateId" maxLength="8" name="LastUpdateId" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="LastUpdateId" data-valmsg-replace="true"></span>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
</form>
<div>
<a href="/ZipCodeTerritory">Back to List</a>
</div>
Как я уже сказал выше, ни поля EndDate
ни EffectiveDate
показывают календарь при нажатии, и вы можете ввести любое значение, которое вы хотите в поле ввода ZipCode
. Надеясь, что это не слишком сложно.
РЕДАКТИРОВАТЬ
Таким образом, похоже, что никакие плагины jquery не работают. Добавлены следующие теги и не могут заставить .mask
работать. Это объявления скриптов из представления Create
<h2>Create</h2>
<script src="@Url.Content("~/Scripts/jquery-1.8.3.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.maskedinput-1.3.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.numeric.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/datepicker.css")" rel="stylesheet" type="text/css" />
Поместив их в функцию document.ready
они теперь работают.
$(document).ready(function() {
$('#ZipCode').numeric();
$('#EndDate').datepicker({
dateFormat: 'mm/dd/yy'
})
});