remote jQuery-Validierung mit MVC 4, dynamisch alle Eingaben validieren, beginnend mit loc?

Question

Beschreibung:

Ich habe ein einfaches Formular in einer MVC4-Anwendung, die 5 Textfelder mit dem Namen Loc1-5 und einem Absenden-Button hat. Die Anwendung nimmt bis zu 5 Adressen in den Textfeldern loc1-5 auf und verwendet die Bing-Geokodierungsdienste mit jQuery, um die Adressen zu bearbeiten und eine Karte mit Wegbeschreibungen zu erstellen.

Das Problem ist, dass ich die loc1-5 Textfelder validieren muss, um sicherzustellen, dass sie gültige Adressen sind, bevor Sie fortfahren und entschieden, dass die beste Möglichkeit sinnvoll ist, jQuery.validate mit einem Remoteaufruf zu einer MVC-Controllerfunktion zu verwenden das kann meine vorgefertigten Funktionen verwenden, um nach einer gültigen Adresse zu suchen.

Jetzt habe ich eine funktionierende Lösung gefunden, um diese Felder zu validieren, aber ich muss sie unbedingt dynamischer gestalten, damit in Zukunft mehr Textboxen mit minimalem Aufwand hinzugefügt werden können. Idealerweise möchte ich, dass die Logik bei allen Eingaben, die mit "loc" beginnen, so etwas wie "validieren" ausführt.

Arbeitslösung (sehr schmutzig):

einfache Form (in MVC-Ansicht)

<form action="/Home/ViewResult" method="post" id="ViewResult" name="ViewResult"> 
<fieldset> 
<legend>Enter Route</legend> 
<p> 
Address 1 (Start & End): 
</p> 
<p> 
<input type="text" id="loc1" name="loc1" value='' /> 
</p> 
<p> 
Address 2: 
</p> 
<p> 
<input type="text" id="loc2" name="loc2" value='' /> 
</p> 
<p> 
Address 3: 
</p> 
<p> 
<input type="text" id="loc3" name="loc3" value='' /> 
</p> 
<p> 
Address 4: 
</p> 
<p> 
<input type="text" id="loc4" name="loc4" value='' /> 
</p> 
<p> 
Address 5: 
</p> 
<p> 
<input type="text" id="loc5" name="loc5" value='' /> 
</p> 
<p> 
<input type="submit" value="Route"/> 
</p> 
</fieldset> 
</form> 

jQuery Validierungscode (in MVC-Ansicht)

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script> 
<script type="text/javascript"> 

 

    $(document).ready(function() { 
     $("#ViewResult").validate({ 
      onfocusout: false, 
      onkeyup: false, 
      rules: { 
       "loc1": { 
        required: true, 
        remote: { 
         url: "/Home/IsValidAddress1", 
         timeout: 2000, 
         type: "post" 
        } 
       }, 
       "loc2": { 
        required: true, 
        remote: { 
         url: "/Home/IsValidAddress2", 
         timeout: 2000, 
         type: "post" 
        } 
       }, 
       "loc3": { 
        required: true, 
        remote: { 
         url: "/Home/IsValidAddress3", 
         timeout: 2000, 
         type: "post" 
        } 
       }, 
       "loc4": { 
        remote: { 
         url: "/Home/IsValidAddress4", 
         timeout: 2000, 
         type: "post" 
        } 
       }, 
       "loc5": { 
        remote: { 
         url: "/Home/IsValidAddress5", 
         timeout: 2000, 
         type: "post" 
        } 
       } 
      }, 
      messages: { 
       "loc1": { 
        required: "Start/End Location is a required field.", 
        remote: "Please enter a valid address." 
       }, 
       "loc2": { 
        required: "Please enter at least 3 addresses.", 
        remote: "Please enter a valid address. " 
       }, 
       "loc3": { 
        required: "Please enter at least 3 addresses.", 
        remote: "Please enter a valid address. " 
       }, 
       "loc4": { 
        remote: "Please enter a valid address. " 
       }, 
       "loc5": { 
        remote: "Please enter a valid address. " 
       }, 
      } 

     }); 
    }); 

</script> 

Funktionen im Home Controller, auf die mit re verwiesen wird mote

 

    // Function to check for a valid address 
    public Boolean IsValidAddress(string location) 
    { 
     // If it is not blank 
     if (location != "") 
     { 
      // Attempt to get the waypoint 
      Waypoint waypoint = getWaypoint(location); 

      // If no waypoint returned, return false 
      if (waypoint == null) 
      { 
       return false; 
      } 
     } 

     return true; 
    } 

    public JsonResult isValidAddress1(string loc1) // Parameter must be textbox name 
    { 
     if (!IsValidAddress(loc1)) 
     { 
      return new JsonResult { Data = false }; 
     } 
     return new JsonResult { Data = true }; 
    } 

    public JsonResult isValidAddress2(string loc2) // Parameter must be textbox name 
    { 
     if (!IsValidAddress(loc2)) 
     { 
      return new JsonResult { Data = false }; 
     } 
     return new JsonResult { Data = true }; 
    } 

    public JsonResult isValidAddress3(string loc3) // Parameter must be textbox name 
    { 
     if (!IsValidAddress(loc3)) 
     { 
      return new JsonResult { Data = false }; 
     } 
     return new JsonResult { Data = true }; 
    } 

    public JsonResult isValidAddress4(string loc4) // Parameter must be textbox name 
    { 
     if (!IsValidAddress(loc4)) 
     { 
      return new JsonResult { Data = false }; 
     } 
     return new JsonResult { Data = true }; 
    } 

    public JsonResult isValidAddress5(string loc5) // Parameter must be textbox name 
    { 
     if (!IsValidAddress(loc5)) 
     { 
      return new JsonResult { Data = false }; 
     } 
     return new JsonResult { Data = true }; 
    } 

PROBLEM:

Auch dies funktioniert, aber es ist sehr schmutzig und ist überhaupt nicht dynamisch.

Im Wesentlichen habe ich zwei Probleme.

1. Wie kann ich die jQuery-Kurzschrift schreiben, um eine Validierungsregel für alle Textfelder zu erstellen, die mit "loc" beginnen?
2. Soweit ich sagen kann die MVC-Controller-Funktion, die den Remote-Aufruf behandelt muss der Name des Textfelds an ihn übergeben haben. Also, wie kann ich eine MVC-Controller-Funktion mehrere Remote-Anrufe zu behandeln?

Ich bin nicht sehr stark in jQuery, aber was würde ich wirklich will, ist so etwas wie dies, so kann ich mehr Textfelder hinzufügen, später mit minimalem Aufwand:

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script> 
<script type="text/javascript"> 

 

    $(document).ready(function() { 
     $("#ViewResult").validate({ 
      onfocusout: false, 
      onkeyup: false, 
      rules: { 
       "loc1": { 
        required: true, 
       }, 
       "loc2": { 
        required: true, 
       }, 
       "loc3": { 
        required: true, 
       }, 
       $("input=text").StartsWith("loc").each(): { 
        remote: { 
         url: "/Home/IsValidAddress", 
         timeout: 2000, 
         type: "post" 
        } 
       } 
      }, 
      messages: { 
       "loc1": { 
        required: "Start/End Location is a required field.", 
       }, 
       "loc2": { 
        required: "Please enter at least 3 addresses.", 
       }, 
       "loc3": { 
        required: "Please enter at least 3 addresses.", 
       }, 
       $("input=text").StartsWith("loc").each(): { 
        remote: "Please enter a valid address. " 
       }, 
      } 

     }); 
    }); 

</script> 

und die Heimat Controller-Funktionen

 

    // Function to check for a valid address 
    public JsonResult IsValidAddress(string loc) // loc variable connect to dynamic textbox names? 
    { 
     // If it is not blank 
     if (loc != "") 
     { 
      // Attempt to get the waypoint 
      Waypoint waypoint = getWaypoint(loc); 

      // If no waypoint returned, return false 
      if (waypoint == null) 
      { 
       return new JsonResult { Data = false }; 
      } 
     } 

     return new JsonResult { Data = true }; 
    } 

Schließlich beachten Sie, dass ich die nicht habe Fähigkeit, das MVC-Modell zu ändern. Ich habe viele ähnliche Lösungen gesehen, die Validierungsregeln und Remote-Aufrufe direkt in das MVC-Modell schreiben, aber das kann ich einfach nicht.

Alle Vorschläge zur Verbesserung sind willkommen und bedanken sich im Voraus für alle Antworten.

Bitte versuchen Sie und sagen Sie mir, wo ich falsch gelaufen bin oder wenn was ich will ist sogar möglich. So

Answer 1

Also ich feige habe es rausgeholt.

Abschlussarbeitslösung:

Funktion in MVC Home Controller:

 

    // Function to check for a valid address 
    // Note: address variable parameter connects to data attribute in remote call 
    public JsonResult IsValidAddress(string address) 
    { 
     // If it is not blank 
     if (address != "") 
     { 
      // Attempt to get the waypoint 
      Waypoint waypoint = getWaypoint(address); 

      // If no waypoint returned, return false 
      if (waypoint.Location == null) 
      { 
       return new JsonResult { Data = false }; 
      } 
     } 
     return new JsonResult { Data = true }; 
    } 

jQuery-Funktionen in Aussicht:

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script> 
<script type="text/javascript"> 

 

    $(document).ready(function() { 
     $("#ViewResult").validate({ 
      onfocusout: false, 
      onkeyup: false 
     }); 
     $("#loc1").rules("add", { 
      required: true, 
      messages: { 
       required: "Start/End Location is a required field.", 
      } 
     }); 
     $("#loc2").rules("add", { 
      required: true, 
      messages: { 
       required: "Please enter at least 3 addresses." 
      } 
     }); 
     $("#loc3").rules("add", { 
      required: true, 
      messages: { 
       required: "Please enter at least 3 addresses." 
      } 
     }); 
     $('#ViewResult [name^="loc"]').each(function() { 
      var currentValue = null; 
      currentValue = $(this); 
      $(this).rules("add", { 
       remote: { 
        url: "/Home/IsValidAddress", 
        timeout: 2000, 
        type: "post", 
        data: { address: function() { return currentValue.val(); } } 
       }, 
       messages: { 
        remote: "Please enter a valid address." 
       } 
      }); 
     }); 
    }); 

</script> 

Ich brauchte so viel Zeit, um das herauszufinden, und ich dachte, ich würde es teilen.

Answer 2

konnte ich den zweiten Teil des Problems, um herauszufinden, durch das Datenattribut des Remote-Aufrufs in der Regel Erklärung mit einem neuen Parameter namens ‚Adresse‘ zu definieren, die dann als Parameter in dem MVC-Controller referenziert Funktion.

Hier ist der aktualisierte Code für die Funktion MVC-Controller in der Heimsteuerung:

 

    // Function to check for a valid address 
    // Note: address variable parameter connects to data attribute in remote call 
    public JsonResult IsValidAddress(string address) 
    { 
     // If it is not blank 
     if (address != "") 
     { 
      // Attempt to get the waypoint 
      Waypoint waypoint = getWaypoint(address); 

      // If no waypoint returned, return false 
      if (waypoint.Location == null) 
      { 
       return new JsonResult { Data = false }; 
      } 
     } 
     return new JsonResult { Data = true }; 
    } 

Für die jQuery gibt es zwei Möglichkeiten, um es die beide Arbeit zu tun.

Verwendung Zum einen das Format, den ich zuvor verwendet:

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script> 
<script type="text/javascript"> 

 

    $(document).ready(function() { 
     $("#ViewResult").validate({ 
      onfocusout: false, 
      onkeyup: false, 
      rules: { 
       "loc1": { 
        required: true, 
        remote: { 
         url: "/Home/IsValidAddress", 
         timeout: 2000, 
         type: "post", 
         data: { address: function() { return $("#loc1").val(); } } 
        } 
       }, 
       "loc2": { 
        required: true, 
        remote: { 
         url: "/Home/IsValidAddress", 
         timeout: 2000, 
         type: "post", 
         data: { address: function() { return $("#loc2").val(); } } 
        } 
       }, 
       "loc3": { 
        required: true, 
        remote: { 
         url: "/Home/IsValidAddress", 
         timeout: 2000, 
         type: "post", 
         data: { address: function() { return $("#loc3").val(); } } 
        } 
       }, 
       "loc4": { 
        remote: { 
         url: "/Home/IsValidAddress", 
         timeout: 2000, 
         type: "post", 
         data: { address: function() { return $("#loc4").val(); } } 
        } 
       }, 
       "loc5": { 
        remote: { 
         url: "/Home/IsValidAddress", 
         timeout: 2000, 
         type: "post", 
         data: { address: function() { return $("#loc5").val(); } } 
        } 
       } 
      }, 
      messages: { 
       "loc1": { 
        required: "Start/End Location is a required field.", 
        remote: "Please enter a valid address." 
       }, 
       "loc2": { 
        required: "Please enter at least 3 addresses.", 
        remote: "Please enter a valid address." 
       }, 
       "loc3": { 
        required: "Please enter at least 3 addresses.", 
        remote: "Please enter a valid address." 
       }, 
       "loc4": { 
        remote: "Please enter a valid address." 
       }, 
       "loc5": { 
        remote: "Please enter a valid address." 
       } 
      } 
     }); 
    }); 

</script> 

oder mit den .rules ("add") Methode:

<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script> 
<script type="text/javascript"> 

 

    $(document).ready(function() { 
     $("#ViewResult").validate({ 
      onfocusout: false, 
      onkeyup: false 
     }); 
     $("#loc1").rules("add", { 
      required: true, 
      remote: { 
       url: "/Home/IsValidAddress", 
       timeout: 2000, 
       type: "post", 
       data: { address: function() { return $("#loc1").val(); } } 
      }, 
      messages: { 
       required: "Start/End Location is a required field.", 
       remote: "Please enter a valid address." 
      } 
     }); 
     $("#loc2").rules("add", { 
      required: true, 
      remote: { 
       url: "/Home/IsValidAddress", 
       timeout: 2000, 
       type: "post", 
       data: { address: function() { return $("#loc2").val(); } } 
      }, 
      messages: { 
       required: "Please enter at least 3 addresses.", 
       remote: "Please enter a valid address." 
      } 
     }); 
     $("#loc3").rules("add", { 
      required: true, 
      remote: { 
       url: "/Home/IsValidAddress", 
       timeout: 2000, 
       type: "post", 
       data: { address: function() { return $("#loc3").val(); } } 
      }, 
      messages: { 
       required: "Please enter at least 3 addresses.", 
       remote: "Please enter a valid address." 
      } 
     }); 
     $("#loc4").rules("add", { 
      remote: { 
       url: "/Home/IsValidAddress", 
       timeout: 2000, 
       type: "post", 
       data: { address: function() { return $("#loc4").val(); } } 
      }, 
      messages: { 
       remote: "Please enter a valid address." 
      } 
     }); 
     $("#loc5").rules("add", { 
      remote: { 
       url: "/Home/IsValidAddress", 
       timeout: 2000, 
       type: "post", 
       data: { address: function() { return $("#loc5").val(); } } 
      }, 
      messages: { 
       remote: "Please enter a valid address." 
      } 
     }); 
    }); 

</script>