Question

奇怪的是，我没有收到错误消息，但是我正在使用的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" />

Answer 1

将它们放入document.ready函数中，它们现在可以正常工作。

$(document).ready(function() {
    $('#ZipCode').numeric();
    $('#EndDate').datepicker({
        dateFormat: 'mm/dd/yy'
    })
});

尽管jquery-ui.js和numeric.js声明正确，jQuery datepicker和数字插件仍无法运行

1 个答案: