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>
を押したときにこのJSメソッド(runSearch)を実行するにはどうすればよいですか?私の知る限り、これはフォームイベントである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キーを押すと、ページのソースを取得し、localhost /?onsubmit = productDefinition.runSearch()URLに到達します。
問題の原因は何であり、onsubmitでもonclickと同じ動作を得るにはどうすればよいですか?
@using (Html.BeginForm(new { onsubmit = "return runSearch();" }))
<script type="text/javascript">
function runSearch() {
// your logic to perform the search.
return true;
}
</script>
Html属性を指定するには、 BeginFormメソッドの次のバージョン を使用する必要があります。
ただし、インラインjavascriptを使用することは悪い習慣と見なされているため、フォームに属性とid属性を割り当て、代わりに外部javascriptファイルでその送信イベントを処理することをお勧めします。プロジェクトにjQueryを使用している場合は、ドキュメントの良い例を次に示します http://api.jquery.com/submit/ 。計画JavaSCriptでは、少し注意が必要ですが、それでも簡単に実行できます。
@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>
}
Form.Id
は、onsubmit
ハンドラーが複数のフォームに適用可能な汎用機能を実装する場合に必要です。 (例:すべての入力フィールドを無効にする)
フォーム
@using (Html.BeginForm(new {
id = "form24",
onsubmit = "return onSubmitHandler(id);"
}))
ハンドラー
<script type="text/javascript">
function onSubmitHandler(formId) { /*formId is form24 */ }
</script>