ホームページ > 記事 > ウェブフロントエンド > MVC がブートストラップを満たした後の Ajax フォーム検証
この記事では、MVC が bootstrap と出会った後の ajax フォーム検証について詳しく紹介します。興味のある方は参考にしてください。
bootstrap を使用すると、独自の形式の has-error があり、使用するのがさらに面倒になります。通常 jquery.validate を使用する場合は、独自のスタイルしか使用できず、モデルがある場合はモデル検証を使用する方が便利です。 どうやって解決しますか?
もちろん、これ専用の jquery プラグインを作成することもできますが、プラグインを作成するのが好きな場合は、少し調べてください。
まず、Nuget は Bootstrap 3 用の MVC EditorTemplates のコンポーネントを取得します。これにより、比較的単純なテキストなどのいくつかのテンプレートが含まれます:
@model object <p class="form-group@(Html.ValidationErrorFor(m => m, " has-error"))"> @Html.LabelFor(m => m, new { @class = "control-label" }) <p class="controls"> @Html.TextBox( "", ViewData.TemplateInfo.FormattedModelValue, ViewBag.ClearTextField == true ? new { @class = "form-control clear-text-field input-block-level" } : new { @class = "form-control input-block-level" } ) @Html.ValidationMessageFor(m => m, null, new { @class = "help-block" }) </p> </p>
このようにして、EditorFor を使用した後、必要な HTML を直接出力します。ブートストラップがさらに便利になりました。
検証失敗に対する has-error ハンドラーがすでに存在していることがわかります。2 番目の質問は、フロントエンド検証も可能です。カスタム検証についてはどうでしょうか。
そこで、MVC に付属するモデル検証を引き続き使用します。取得したばかりのコンポーネントに Validation クラスがあります。まず、非強力な型用の拡張メソッドを追加します。これは View で追加できます。
public static MvcHtmlString ValidationError(this HtmlHelper htmlHelper, string field, string error) { if (HasError(htmlHelper, ModelMetadata.FromStringExpression(field, htmlHelper.ViewData), field)) return new MvcHtmlString(error); else return null; }
最後に、スクリプトは Ajax の送信とポストバック処理を処理します。MVC の Ajax.BeginForm を使用した方が便利かどうかはわかりませんが、これはあまり柔軟性がないと感じているので、引き続き使用します。 ajaxSubmit と jquery.ajax:
<p class="form-group@(Html.ValidationError("Department", " has-error"))"> <label class="control-label" for="DepartmentId">所在部门</label> <p class="controls"> <span id="deptname"> </span><a id="btnSelectDepartment">选择部门</a> <input class="form-control" data-val="true" data-val-required="部门是必需的。" id="DepartmentId" name="DepartmentId" type="hidden" value=""> @Html.ValidationMessage("Department", null, new { @class = "help-block" }) </p> </p>
バックグラウンドでのアクション メソッド カスタム検証を追加できます:
//ready var $puserform = $("#puserform"); $puserform.dialog({ title: '新建用户',//..... }); $("#btnCreateUser").click(function () { var nodes = zTreeObjleft.getSelectedNodes(); if (nodes.length > 0) { CreateUserForm($puserform); } }) function CreateUserForm(form) { var $puserform = form; $.ajax({ url: "CreateUser", success: function (html) { CreateUserFormSuccessCallback(html, $puserform); } }); } function InitSelectDepartmentWhenCreateUser() { $("#btnSelectDepartment").departmentSelection({ onSelected: function (name, id) { $("#deptname").text(name); $("#DepartmentId").val(id); } }); } function CreateUserFormSuccessCallback(html, form) { var $puserform = form; $puserform.children().children().html(html); $("#puserform").dialog("open"); var $form = $puserform.find("form") InitSelectDepartmentWhenCreateUser(); $form.submit(function () { $form.ajaxSubmit(function (data) { if (data == "success") { $("#puserform").dialog("close"); $("#puserform").clearForm(); } else { CreateUserFormSuccessCallback(data, form); } }); event.preventDefault(); }); }
おおよその効果:
上記は、私が皆さんのためにまとめたものです。皆さんのお役に立てれば幸いです。将来。
関連記事:
AJAXリクエストキューの実装ajaxを使用してフォームを非同期送信するいくつかの方法のまとめAJAXリクエストの配列の問題を解決する方法以上がMVC がブートストラップを満たした後の Ajax フォーム検証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。