使用 Javascript and/or Razor 更改 HTML 表单文本

Question

我正在处理创建帐户信息和重置密码的视图中工作。 我被困在哪里：取决于密码请求是发送、批准还是拒绝，这将反过来改变登录 screen/password 请求的显示方式。 我希望它更改表单中的当前文本并用消息更新它，用户可以提交确定等，这样浏览器将自动关闭（或者隐藏当前表单，以便我可以使用该信息创建一个新表单，以更容易的为准).

之前我有一个发送消息的警报，但现在我需要它作为 HTML 来设置它的样式。

//All of this is in a Javascript script tag

var reset = getParameterByName('reset');

if (reset == "sent") {
//alert("Done! Please check your email to confirm.")

//How can I change the current text on the form?
document.getElementsByClassName('panel-login').innerHTML = "<div class='panel-login' style='color: white; background-color: blue;'><p>Done! Please check your email to confirm.</p></div>";

    //Here so I know something is updating on the site...
    var message = "<div style='color: white; background-color: blue;'><p>Done! Please check your email to confirm.</p></div>";
    document.write(message);  
}

if (reset == "fail") {
    alert("Password reset request failed.")
}

if (reset == "approved") {
    alert("Confirmed! A password reset email has been issued.")
    @*var url = '@Url.Action("Login", "Account")';
    window.location = url;*@
}

（无论第一个 if (sent) 是否有效，我都会将其复制并粘贴到最后两个中。）

这是上面的HTML：

<div class="panel_login" style="opacity: 0.9;">
<div class="">
    @using (Html.BeginForm("ResetPassword2", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-signin mg-btm" }))
    {
        <div class="" style="padding-left: 20px; padding-right: 20px; padding-bottom: 20px; padding-top: 10px; ">
            <div class="">
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true, "Password reset was unsuccessful. Please check email and try again.")
                <label>Email</label>
                <div class="input-group">
                    <span id="emailinput" ng-model="user.EMAIL" class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    @Html.TextBoxFor(m => m.Email, new { @class = "form-control", placeholder = "" })
                    @Html.ValidationMessageFor(m => m.Email)
                </div>

            </div>

        </div><div class="panel-footer">
            <div class="row centered">
                <div class="col-xs-12">
                    <button id="singlebutton" name="singlebutton" class="btn btn-primary" onclick="Back(); return false;">Cancel</button>
                    <button class="btn btn-large btn-danger" type="submit" ng-click="resetpassword(user)">Request Password Reset</button>
                </div>
            </div>
        </div>
    }
</div>

我试过隐藏 panel-login，这样我就可以创建一个新的 div/element 来显示 message/form。它没有用（做错了什么）：

document.getElementsbyClassName('panel-login').style.display = 'none';

了解到，由于它是一个数组，我将需要其他东西，因为上面会产生空值和错误。尝试使用变量获取 class，然后使用 for 语句将其定位到样式。再次，无济于事。

我不熟悉 Razor（仍在学习）并且在 JavaScript 中复制我需要的东西似乎只是复制东西而不是改变已经存在的东西。提前致谢。

Answer 1

如果我跟着你，getElementsByClassName就是罪魁祸首。尝试：

var loginPanel = document.getElementsbyClassName('panel-login')[0];

这将找到数组中的第一个匹配项。

Answer 2

我终于弄明白了。

基本上，我创建了其他 divs，其样式与登录屏幕相似且位置相同，但将它们隐藏起来，直到它们被函数调用以根据用户输入和URL。登录屏幕最初是可见的，但后来当另一个 div 变得可见以显示定制消息时隐藏。

我最初是通过Javascript创建的（使用函数创建HTML），后来改成了HTML和CSS但还是用JS调用职能。我不得不切换的主要原因是因为一些消息在被确认后提交了一些东西或者应该关闭选项卡或返回并且我在这样做时遇到了麻烦因为显然脚本无法关闭最初未打开的当前页面它。 ChromeTBH 中仍然存在该问题。

使用 Javascript and/or Razor 更改 HTML 表单文本

Changing HTML Form Text Using Javascript and/or Razor

html

javascript

css

asp.net

razor