onsubmitイベントを追加してMVC3のJS関数を呼び出す

Question

MVC3プロジェクトのフォームからJSメソッドを呼び出す際に問題があります。検索とキャンセルの2つのボタンを持つフォームのない「検索」ページがあります。検索をクリックすると、ProductDefinitionのJS関数runSearchが実行されます。

<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> 

どのように私は私が押したときに、これはメソッド（runSearch）をJS実行できますか？私が理解する限り、これはフォームイベントであるonsubmitイベントであるため、onsubmitプロパティを持つフォーム要素を追加する必要があります。私は、BeginFormヘルパーメソッドで、周囲の入力フィールドを試してみました：

@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" /> 
} 

それが動作していないようです - 私はいくつかの理由で私のEnterキーを押すとページのソースを取得し、ローカルホスト/のonSubmit = productDefinition.runSearchに到着します？ （）URL。
問題の原因は何か、onclickの場合と同じようにonsubmitの動作を得るにはどうすればよいですか？

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

html属性を指定するには、following version of BeginForm methodを使用する必要があります。

しかし、私はあなたのフォームにid属性を割り当て、外部のjavascriptファイルのサブミットイベントを処理することをお勧めします。あなたのプロジェクトにjQueryを使用している場合は、ここにdoc-http://api.jquery.com/submit/の良い例があります。プランJavaScriptでは、もう少し面倒ですが、まだ簡単です。

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.Idonsubmitハンドラは、複数のフォームに適用可能な汎用的な機能を実装した場合に必要とされます。 （例：無効にすべての入力フィールド）

フォームあなたが検索ボタンをクリックしたときに使用する習慣機能をJS

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

ハンドラ

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