0

私はmvc3を初めて使用します。Jquery透かし効果を使用してフォーム検証を開発したいと思います。エラーが発生した場合、テキストボックスの境界線は赤い色で強調表示され、エラー検証はテキストボックスにのみ表示されます。

私のモデルはこんな感じです

public class Registration
    {
        [Required]
        [Display(Name = "Name")]
        public string Name { get; set; }

        [Required]
        [Display(Name = "Email")]
        public string Email { get; set; }

        [Required]
        [Display(Name = "Phone No")]
        public string PhoneNo { get; set; }

        [Required]
        [Display(Name = "City")]
        public string City { get; set; }

        [Required]
        [Display(Name = "Country")]
        public string Country { get; set; }
    }

私のビューページコードはこのようなものです

@model WaterMarkFormInput.Models.Registration
<script type="text/javascript">
    $(document).ready(function () {
        $('#name').Watermark("Your Name");
        $('#email').Watermark("Your Email");
        $('#phoneno').Watermark("Your PhoneNumber");
        $('#city').Watermark("Your City");
        $('#country').Watermark("Your Country");
    })

</script>

<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.watermarkinput.js" type="text/javascript"></script>
<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)
    <fieldset>
        <legend>Registration</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Name, new { id="name"})
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Email, new { id = "email" })
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PhoneNo)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.PhoneNo, new { id = "phoneno" })
            @Html.ValidationMessageFor(model => model.PhoneNo)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.City, new { id = "city" })
            @Html.ValidationMessageFor(model => model.City)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Country)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Country, new { id = "country" })
            @Html.ValidationMessageFor(model => model.Country)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

アプリケーションを実行すると、下の画像のような透かし効果が表示されます。

http://i.imgur.com/CTMiS.png

しかし、作成ボタンを押すと、フォームの検証が機能しなくなります。スクリプトをappy透かしにコメントすると、このようなフォーム検証が表示されます

http://i.imgur.com/HyvJs.png

しかし、テキストボックスに検証テキストが必要ですが、どうすればよいですか？返信を待っています:)

4

1 に答える 1

0

透かしと検証は同じものではありません。（私はあなたに何か新しいことを言っているのではないと確信していますが、私の考えに従ってください）しかし、どちらも非常によく似た方法で定義されており、データ注釈を使用しています。あなたは検証のためにそれを正しくやっています。透かしを定義するには、次のようにします。

[Display(Name = "Name", Description = "This is tooltip", Prompt = "This is watermark")]
public string Name { get; set; }

<YourApp>/Views/Shared/と呼ばれる作成フォルダー内EditorTemplates、および<YourApp>/Views/Shared/EditorTemplates透かしを次のように表示する必要があるすべてのタイプのString.cshtml、Text.cshtml、Multiline.cshtmlなどを定義します。

アップデート

これはString.cshtml、Text.cshtmlかみそりのビュー（そのうちの2つ）がフォルダーに入れられ<YourApp>/Views/Shared/EditorTemplatesます（ファイル名を除いてまったく同じに見えます）：

更新を終了

// string, text 
@Html.TextBox(string.Empty, ViewData.TemplateInfo.FormattedModelValue, new
{
    @class = "text-box single-line",
    placeholder = ViewData.ModelMetadata.Watermark,
    title = ViewData.ModelMetadata.Description
})

アップデート

これは<YourApp>/Views/Shared/EditorTemplates/MultilineText.cshtmlかみそりのビューです：

更新を終了

// multiline
@Html.TextArea(string.Empty, ViewData.TemplateInfo.FormattedModelValue.ToString(), 0, 0, new
    {
        @class = "text-box multi-line",
        placeholder = ViewData.ModelMetadata.Watermark,
        title = ViewData.ModelMetadata.Description
    })

そして、あなたが呼ぶビューで@EditorFor(m => m.Name)。

それらはHTML5であり、魅力のように機能します（ChromeおよびIE9でテスト済み）

お役に立てれば

アップデート

エディターテンプレートは、名前が示すとおりです-エディターのテンプレートです。したがって、ビューで、EditorFor文字列またはテキストのエディターテンプレートを共有していると呼び出すと、文字列またはテキストなどのデフォルトを効果的に変更できます。この場合、デフォルトの場合と同じように表示し、プレースホルダー（透かし）やタイトル（ツールチップ）などのhtml5パラメーターをいくつか追加します。ビューモデルでの値を定義し、透かしの場合はPrompt =、ツールチップの場合はDescription=を追加します。基本的に、ASPMVC定義とHTML5の間のマッピング：

  • Descriptionツールチップ（業界名）になりtitle、html5で呼び出されます
  • Prompt透かし（業界名）になりplaceholder、html5で呼び出されます
于 2012-08-26T17:07:57.883 に答える