ホームページ > 記事 > ウェブフロントエンド > MVC+ブートストラップインターフェイスでAjaxフォーム検証を実行する方法
今回は、MVC+ブートストラップインターフェースでajaxフォーム検証を実行する方法と、MVC+ブートストラップインターフェースでの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(); }); }おおよその効果: この記事のケースを読んだ後は、このメソッドを習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。 推奨書籍:
AjaxトラバーサルjSonはデータの変更と削除を実行します
以上がMVC+ブートストラップインターフェイスでAjaxフォーム検証を実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。