将文本框值复制到另一个 - ASP.NET MVC Razor答案

【问题标题】：Copy textbox value to another - ASP.NET MVC Razor将文本框值复制到另一个 - ASP.NET MVC Razor
【发布时间】：2014-10-09 12:57:19
【问题描述】：

我在 ASP.NET MVC 5 应用程序中有以下表单

@model ProjectOasis.Models.RegisterViewModel
@{
    ViewBag.Title = "Register";
}

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm("Admin", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Create a new account.</h4>
    <hr />
    @Html.ValidationSummary("", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label"})
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label"})
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
        </div>
    </div>
    //more form stuff
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Create" />
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

如何使每当一个值输入到 m.Email 文本框中时，该值立即复制到 m.UserName 文本框中？（完成此操作后，我将使 UserName 文本框不可编辑）。

谢谢。

【问题讨论】：

您将不得不通过 Javascript 来执行此操作。
正如 Dimitar 所说，您需要使用 javascript/jquery 来执行此操作，但重点是什么 - 只需在发布表单时复制值服务器端
因为我特别希望用户看到他们的登录名 = 电子邮件地址。

标签： c# asp.net asp.net-mvc razor

【解决方案1】：

所以如果你只想显示用户名，这里有一个例子（vanilla js），类似于：

document.getElementById("txt2").onkeyup = function() {
  document.getElementById("txt1").value = this.value;
};

<input type="text" id="txt1" disabled />
<input type="text" id="txt2" />

或者这里是jquery版本：

$("#txt2").on("keyup", function() { 
  $("#txt1").val($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt1" disabled />
<input type="text" id="txt2" />

我希望这会有所帮助。

【讨论】：

如何将其放入如上所示的 Razor 视图引擎示例中？
@mansonitefirefox 好吧，您可以将它包含在您的脚本包中（可能在单独的.js 文件中）。如果您不知道如何在您的视图中包含 javascript，恐怕这可能会变得有点宽泛……我也许可以写一下（当我有空闲时间时）。

【解决方案2】：

使用 JavaScript。可能您已经在站点脚本中包含了 jQuery。因此，您所要做的就是添加以下脚本：

$(function(){
    $("#Email").change(function(){
        $("#UserName").val($(this).val());
    });
})

请确保字母大小写，因为我不确定 Razor 是否会骆驼化名称 - 只需在浏览器中预览 HTML 源代码并检查字段名称的拼写即可。

这里是some working sample 给你

【讨论】：

【解决方案3】：

选项 1

 $("#Email").change(function(){
        $("#UserName").val($(this).val());
 });

选项 2

 $("#Email").focusout(function(){
        $("#UserName").val($(this).val());
 });

要强制使用电子邮件作为用户名，请在您的用户名文本框中输入：

@Html.TextBoxFor(m => m.UserName, new { @class = "form-control", @disabled = "disabled" }

【讨论】：