web-dev-qa-db-ja.com

mvc3の@ Html.TextboxForのonchangeイベントでラベルのテキストを変更する

MVC3 Razorを使用しています。 @ Html.TextboxForのonchangeイベントでラベルのテキストを変更したい。

これが私が試しているコードです：

見本：

@Html.TextBoxFor(x => x.ItnScanCaseCode, new { @onchange = "event();" })

JavaScript：

function event() {
    document.getElementById('lblSelectedProductName').value ="sam";
}

しかし、それは機能していません。

javascriptasp.net-mvcasp.net-mvc-3
7
user2450398

このjquery構文を使用すると、問題なく機能します。

@Html.TextBoxFor(x => x.ItnScanCaseCode, new { @id="txtid",@onchange = "onchangeevent();" })

function onchangeevent(){
        $('#txtid').val('sam');
    }
21
Janki

これはJavaScriptで実現できますが、jQueryを使用する方が快適です。私はHTMLとJavaScriptを分離し、すべてのコントロールがDOMにロードされた後、変更イベントをリッスンするのが好きです。

テキストボックスのHTMLマークアップは次のようになります。テスト用に自分のラベル要素を追加しました。

<input id="ItnScanCaseCode" name="ItnScanCaseCode" type="text" value="" />
<label id="lblSelectedProductName">Test Label Text</label>

そして、jQueryスクリプトでon changeイベントリスナーを追加します。

$(document).ready(function () {
     $('#ItnScanCaseCode').change(function () {
          $('#lblSelectedProductName').text('sam');
     });
});

別の関数メソッドに変更するこのラベルテキストを追加する必要がある場合は、このようにしますが、上記の方法で十分です。

$(document).ready(function () {
     function yourEventMethod() {
          $('#lblSelectedProductName').text('sam');
     };

     $('#ItnScanCaseCode').change(function () {
          yourEventMethod();
     });
});

これがお役に立てば幸いです。

4
Brendan Vogt

これを試すことができます

  @Html.TextBoxFor(model => model.Image, new { type = "file",
                       @onchange = "show(this);" })

私のJavaScriptはここにあります

<script type="text/javascript">

   function show(input) {
      if (input.files && input.files[0]) {
      var filerdr = new FileReader();
      filerdr.onload = function (e) {
         $('#user_img').attr('src', e.target.result);
      }
      filerdr.readAsDataURL(input.files[0]);
   }
}
</script>
0
Debendra Dash

問題は、イベント名が機能する別のイベント名で試してみることです。

@Html.TextBoxFor(x => x.ItnScanCaseCode, new { @onchange = "onchangeevent();" })

function onchangeevent(){
        document.getElementById('lblSelectedProductName').value ="sam";
    }

よろしく

0
Sridhar Narasimhan