1

aspx フォームを作成しました。検証に JQuery 検証エンジン ( http://www.position-relative.net/creation/formValidator/ ) を使用しています。

ここで、使用された ID がデータベースに既に存在するかどうかを、同じ赤いバルーン エラー ヒント (jquery 検証エンジンのデフォルト) でユーザーに通知したいと考えています。

Google を検索していくつかのヒントを得ましたが、ajaxcall に関連する webmethod に引数を渡す方法について混乱しています。

これは、github サイト ( http://posabsolute.github.io/jQuery-Validation-Engine/#options/ajaxformvalidation )で指定されたコードです。

"ajaxUserCall": {
    "url": "~/Page.aspx/ajaxValidateFieldUser",
    "extraData": "name=eric",
    "extraDataDynamic": ['#user_id', '#user_email'],
    "alertText": "* This user is already taken",
    "alertTextOk": "All good!",
    "alertTextLoad": "* Validating, please wait"
}

以下のように理解しました。間違っている場合は修正してください。

1) このコード ブロックを「jquery.validationEngine.js」ファイルに含めました。2) .Page.aspx に webmethod 'ajaxValidateFieldUser' を作成しました。それは次のとおりです。

[WebMethod]
public static bool IsUserAvailable(string username)
{
if (record does not exist in table) // do not worry about this part of code. It is just for example
    return true;
else
    return false;
}

3) userId テキストボックスに、クラス「validate[ajaxValidateFieldUser]」を追加しました。

4) もちろん、JQuery ValidationEngine の他の検証が適切に機能するように、適切な jquery ファイルを追加しました。

機能していません。ユーザー名パラメーター (使用されている ID テキストボックスの入力) を webmethod に渡す方法がわかりません。

4

2 に答える 2

0

この記事を使用できます

jQuery の $.ajax() 関数には便利なオプションがあります。async を false に設定すると、必要な処理が行われます。成功関数に進む前に、サーバーからの応答を待ちます。 

function doesUsernameExist(source, arguments) {
var exists;
$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "Default.aspx/DoesUserExist",
    data: "{'username': '" + arguments.Value + "'}",
    dataType: "json",
    async: false,
    success: function(result) {
        exists = result.d;
    }
});
arguments.IsValid = !exists;
}

コード ビハインドで Web メソッドを作成しました

[WebMethod]
public static bool DoesUserExist(string username)
{
 if (record does not exist in table) // do not worry about this part of code. It is just for example
  return true;
 else
  return false;
}

HTML

<div>
 Username:
 <asp:TextBox runat="server" ID="UserNameTextBox" CausesValidation="true" />
</div>
<asp:CustomValidator runat="server"
    ID="UserNameExistsValidator"
    ControlToValidate="UserNameTextBox"
    ClientValidationFunction="doesUsernameExist"
    ErrorMessage="Username Already Exists" />
于 2014-01-25T05:40:34.137 に答える
0

私は Inline Form Validation Engine 2.6.2 を使用していますが、この関数を使用しても同じ問題がありましたが、機能しています。

jquery.validationEngine-en.js では、

   // --- CUSTOM RULES -- Those are specific to the demos, they can be removed or changed to your likings
            "ajaxUserCall": {
                "url":"/Modules/CategoryModule/CategoryViewService.asmx/UserCheck",
                // you may want to pass extra data on the ajax call
                "extraDataDynamic": ['txtCategory', $('#txtCategory').val()],//ID of element you want to check with its value
                "alertTextOk": "All good",
                "alertText": "* This user is already taken",
                "alertTextLoad": "* Validating, please wait"
            },

HTML コード:

<tr>

    <td> CategoryName</td>
    <td>
        <input type="hidden" id="hfCategoryID" value="-10" />
<input type="text" value="" id="txtCategory" class="form form-Control validate[required],ajax[ajaxUserCall]" />
   </td>
</tr>
<tr>

Web サーバーの Web メソッド "CategoryViewService.asmx" :

[WebMethod]
public Class1 UserCheck(String fieldId, String fieldValue)
{
    String temp = fieldId;
    String temp2 = fieldValue;
    Class1 objInfo = new Class1();
    objInfo.FieldID = fieldId;
   if(//check UniqueValue in Database)
   {
   objInfo.Status = true;//Display Green Prompt
   objInfo.FieldValue = "All good1";
    }
    else
    {
    objInfo.Status = false; //Display Red Prompt
   objInfo.FieldValue = "Try Again!! not unique Value";
    }
    return objInfo;
     }

_ajax jquery.validationEngine.js 内 (web メソッドから xml (デフォルトの json ではない) を渡しているため、少し変更が加えられています)

 _ajax: function(field, rules, i, options) {
         var errorSelector = rules[i + 1];
         var rule = options.allrules[errorSelector];
         var extraData = rule.extraData;
         var extraDataDynamic = rule.extraDataDynamic;
         if (typeof extraData === "object") {
            $.extend(data, extraData);
         } else if (typeof extraData === "string") {
            var tempData = extraData.split("&");
            for(var i = 0; i < tempData.length; i++) {
                var values = tempData[i].split("=");
                if (values[0] && values[0]) {
                    //var inputValue = field.closest("form, .validationEngineContainer").find(id).val();
                    data[values[0]] = values[1];
                }
            }
         }
         var data = JSON2.stringify({
             fieldId: field.attr("id"),
             fieldValue: field.val(),    
         });
         if (extraDataDynamic) {
             var tmpData = [];
             var domIds = String(extraDataDynamic).split(",");
             for (var i = 0; i < domIds.length; i++) {
                 var id = domIds[i];
                 if ($(id).length) {
                     var inputValue = field.closest("form, .validationEngineContainer").find(id).val();
                     var keyValue = id.replace('#', '') + '=' + escape(inputValue);
                     data[id.replace('#', '')] = inputValue;

                 }
             }

         }
         // If a field change event triggered this we want to clear the cache for this ID
         if (options.eventTrigger == "field") {
            delete(options.ajaxValidCache[field.attr("id")]);
         }
         // If there is an error or if the the field is already validated, do not re-execute AJAX
         if (!options.isError && !methods._checkAjaxFieldStatus(field.attr("id"), options)) {
             $.ajax({
                 type: "post",
                 url: rule.url,
                 cache: false,
                 dataType: "json",
                 contentType: 'application/json;charset=utf-8',
                 data: data,
                 field: field,
                 rule: rule,
                 async:true,
                 methods: methods,
                 options: options,
                 beforeSend: function() {},
                 error: function(data, transport) {
                     methods._ajaxError(data, transport);
                 },
                 success: function (xml) {
                             var json=xml.d
                            $('#ajaxStatus' + json.FieldID).val(json.Status);
                     // asynchronously called on success, data is the json answer from the server
                     var errorFieldId = json.FieldID;
                     //var errorField = $($("#" + errorFieldId)[0]);
                     var errorField = $("#"+ errorFieldId).eq(0);
                     // make sure we found the element
                     if (errorField.length == 1) {
                         var status = json.Status;
                         // read the optional msg from the server
                         var msg = json.FieldValue;

エラーをスローし続けるため、これを Web.Config に追加する必要もありました

  <system.webServer>
 <handlers>
  <add name="ScriptHandlerFactory"
       verb="*" path="*.asmx"
       type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
       resourceType="Unspecified" />
</handlers>

于 2016-12-28T00:05:06.063 に答える