1

SPAテンプレート（シングルページアプリケーション）を使用してASP.NETMVC4ソリューションの作業を開始しました。

開始テンプレートは、一種のポストイットデザインでいくつかのtodoリストを管理します。

テンプレートを次のように少し変更しました。

  • 要素を配置するためのポストイットデザインはもうありません
  • ただし、すべての要素を一覧表示するテーブル+各要素の削除+編集ボタン
  • 表の最後：追加ボタン

これで、次のようにフォームタグの1つの要素を編集できるようになりました。

<form data-bind="with: currentTodoList, validate: true">
    <h1>Edition</h1>
    <table>
        <tr>
            <td>ID</td>
            <td><b data-bind="text: todoListId"></b></td>
        </tr>
        <tr>
            <td>User ID:</td>
            <td><input class="required" data-bind="value: userId" /></td>
        </tr>
        <tr>
            <td>Title:</td>
            <td><input class="required" data-bind="value: title" /></td>
        </tr>
        <tr>
            <td>Category:</td>
            <td><input data-bind="value: category" /></td>
        </tr>
    </table>

    <p>
        <button data-bind="click: $parent.saveTodoList">Save</button>
        <button data-bind="visible: todoListId, click: $parent.deleteTodoList">Delete</button>
        <button data-bind="click: $parent.showGrid">Cancel</button>
    </p>
</form>

上記のように、formタグにvalidate data-bindingを設定し、必要なクラスを持ついくつかの入力要素があります。

この実装をテストすると、期待どおりに機能しません。例：

  • userIdフィールド（必須）をクリア（空）にすると、赤い検証メッセージが表示されます（図1）。わかった。
  • このuserIdフィールドにもう一度入力すると、メッセージが表示された赤い検証が消えました。わかった。
  • 次に、タイトルフィールドをクリア（空）にすると（これも必須です）、userIdフィールドの横に赤い検証メッセージが表示されます（図2）。NOK。

ここに画像の説明を入力してください

ここに画像の説明を入力してください

逆もまた真です：userId <--> title。問題はどこにありますか？

これは、問題を再現するためのテストVS2012ソリューションをダウンロードするためのリンクです。

4

1 に答える 1

1

さて、ビューモデルを少し変更して（リストを使用せずに、単一のエントリを編集して）、マークアップを少し試してみました。

このjsfiddleを見てください-http ://jsfiddle.net/Zxjrb/1/

IDとユーザーIDの検証メッセージのスパンを追加し、タイトルとカテゴリのスパンをスキップしました。

<span data-bind='visible: todoListId.hasError, text: todoListId.validationMessage'> </span>

IdまたはUserIdフィールドが空の場合に表示されるメッセージと、title/categoryフィールドでは発生しないメッセージを確認できます。

于 2013-03-03T15:29:51.883 に答える