在 mvc3 中 @Html.TextboxFor 的 onchange 事件上更改标签文本答案

【问题标题】：change text of label on onchange event of @Html.TextboxFor in mvc3在 mvc3 中 @Html.TextboxFor 的 onchange 事件上更改标签文本
【发布时间】：2013-07-26 06:57:38
【问题描述】：

我正在使用 MVC3 Razor。我想在@Html.TextboxFor 的 onchange 事件上更改标签的文本。

这是我正在尝试的代码：

在视图中：

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

JavaScript：

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

但它不起作用。

【问题讨论】：

标签： javascript asp.net-mvc asp.net-mvc-3

【解决方案1】：

使用这个 jquery 语法可以正常工作。

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

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

【讨论】：

【解决方案2】：

这可以通过 JavaScript 完成，但我更喜欢使用 jQuery。我喜欢将我的 HTML 和 JavaScript 分开，而是在所有控件都加载到 DOM 后监听 on change 事件。

文本框的 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();
     });
});

我希望这会有所帮助。

【讨论】：

【解决方案3】：

问题在于事件名称尝试使用不同的事件名称。

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

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

问候

【讨论】：

问题是更改文本框内容时修改标签文本。

【解决方案4】：

你可以试试这个

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

【讨论】：