Add onsubmit-Ereignis zum Aufruf der JS-Funktion in MVC3

Question

Ich habe ein Problem mit dem Aufruf von JS-Methode aus Formular in MVC3-Projekt: Ich habe eine "Such" -Seite ohne Formulare mit zwei Schaltflächen - Suchen und Abbrechen. Klicken Sie auf Suche läuft JS Funktion runSearch in ProductDefinition.

<div id="productSearch-dialog" class="modal fade" style="width: 1000px; display: none"> 
<div class="modal-header"> 
    <button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button> 
    <h3>Search Results</h3> 
</div> 
<div class="modal-body" style="height: 650px;"> 
    <div> 
     <input id="inputname" type="text" /><font class="red-font" id="lblrequired" style="display: none">*</font> 
    </div> 
    <div id="searchresultcontain" class="grid"> 
    </div> 
    <div id="Pagination" class="pagination"> 
    </div> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" onclick="productDefinition.runSearch();">Search</button> 
    <button class="btn btn-primary" data-dismiss="modal">Cancel</button> 
</div> 

Wie kann ich laufen diese JS-Methode (runSearch), wenn ich drücken? So weit ich verstehe, wird dies ein onsubmit-Ereignis sein, das ein Formularereignis ist, also muss ich ein Formularelement mit der Eigenschaft onsubmit hinzufügen. Ich habe versucht, Eingabefeld umgibt mit Beginhilfsmethode:

@using (Html.BeginForm(new { onsubmit = "productDefinition.runSearch();" })) 
{ 
    <input id="inputname" type="text" /><font class="red-font" id="lblrequired" style="display: none">*</font> 
    <input type="submit" value="Submit" style="visibility: hidden" /> 
} 

aber es nicht zu funktionieren scheint - wenn ich drücken trete ich aus irgendeinem Grund Quelle der Seite erhalten und kommen zu localhost/onsubmit = productDefinition.runSearch() URL.
Was kann die Ursache des Problems sein und wie bekomme ich das gleiche Verhalten für onsubmit wie für onclick?

Answer 1

@using (Html.BeginForm(new { onsubmit = "return runSearch();" })) 



<script type="text/javascript"> 
    function runSearch() { 
      // your logic to perform the search. 
      return true; 
    } 
</script> 

Answer 2

Sie müssen die following version of BeginForm method verwenden, um HTML-Attribute angeben.

Allerdings ist es eine schlechte Praxis, Inline-Javascript zu verwenden, so würde ich vorschlagen, zuweisen und ID-Attribut zu Ihrem Formular und Handle sein Senden Ereignis in der externen Javascript-Datei statt. Wenn Sie jQuery für Ihr Projekt verwenden, finden Sie hier ein gutes Beispiel aus ihren Dokumenten - http://api.jquery.com/submit/. Im Plan JavaScript ist es ein bisschen schwieriger, aber immer noch einfach zu tun.

Answer 3

@model Models.Person 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#registerInputId').click(function() { 
      alert('what do you do before send? For example encrypt the password'); 

      $('#Password').val(CryptoJS.MD5($('#Password').val())); 
     }) 
    }); 
</script> 

@using (Html.BeginForm()) 
    { 
    @Html.AntiForgeryToken() 
    <div class="form-horizontal" style="display: inline-block; margin: 5% auto;"> 
     <div style="font-size: 18px; margin-right:2px; margin-bottom:20px; text-align:right;">Add form</div> 
     @Html.ValidationSummary(true) 
     <div class="form-group"> 
      @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-5" }) 
      <div class="col-md-7"> 
       @Html.EditorFor(model => model.Name) 
       @Html.ValidationMessageFor(model => model.Name) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Password, htmlAttributes: new { @class = "control-label col-md-5" }) 
      <div class="col-md-7"> 
       @Html.EditorFor(model => model.Password) 
       @Html.ValidationMessageFor(model => model.Password) 
      </div> 
     </div> 

     <div class="form-group" style="margin-top: 30px;"> 
      <div class="col-md-offset-3 col-md-6"> 
       <input id="registerInputId" type="submit" value="Register" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
} 

Answer 4

Form.Id ist erforderlich, wenn onsubmit Handler implementiert generische Funktionen, anwendbar für mehrere Formulare. (Beispiel: Sperrung werden alle Eingabefelder)

Formular

@using (Html.BeginForm(new { 
    id = "form24", 
    onsubmit = "return onSubmitHandler(id);" 
})) 

Handler

<script type="text/javascript"> 
    function onSubmitHandler(formId) { /*formId is form24 */ } 
</script>