回发后 Javascript 操作发生变化答案

【问题标题】：Javascript action changes after postback回发后 Javascript 操作发生变化
【发布时间】：2015-10-13 03:20:04
【问题描述】：

我有一个JavaScript，该JavaScript在选中训练重电框时触发以显示两个提交按钮。取消选中时，会显示一个提交按钮。问题是当我选中复选框并尝试在一个必填字段中提交没有数据的表单时，通过回发返回一条错误消息。复选框保持选中状态，两个按钮不再显示。如何在回发错误消息后保持这两个按钮可见？

HTML 标记：

<tr>
    <td>
        <label for="trainingRequired">
            Training Required?*</label>
    </td>
    <td>
            @Html.CheckBox("trainingRequired", Page.TrainingRequired, new { id = "chkImmediate" })
    </td>
</tr>
<tr id="allowSelfTrainingBlock">
    <td>
        <label for="allowSelfTraining">
            Allow Self Training?</label>
    </td>
    <td>
                @Html.CheckBox("allowSelfTraining", Page.AllowSelfTraining)
    </td>
</tr>

RegularButton 和 RequiredButton 块：

<div id="RegularButton">
<input name="btn" type="submit" id="notrequired" value="Save" />
<a href="@Page.ReturnUrl" id="notrequiredurl">Cancel</a>
</div>

<div id="RequiredButton">Create New Training Document?<br />
<input name="yesbtn" type ="submit" id="required" value="Yes" />
<input name="nobtn" type="submit" id="required2" value="No & Save" />
<a href="@Page.ReturnUrl" id="requiredurl">Cancel</a>
</div>

同一页面上的Javascript：

<script type="text/javascript">

function prepareButtons() {
    document.getElementById("RequiredButton").style.display = "none";
    document.getElementById("RegularButton").style.display = "block";
}

//**********PostBack*************
function postBack(val) {
    $('#xtravar').val(val);
    $('form').submit();
}
$("#chkImmediate").change(function() {
    if(this.checked) {
        document.getElementById('allowSelfTrainingBlock').style.visibility = 'visible';
        document.getElementById("RequiredButton").style.display = "block";
        document.getElementById("RegularButton").style.display = "none";
    }
    else {
        document.getElementById('allowSelfTrainingBlock').style.visibility = 'hidden';
        document.getElementById("RequiredButton").style.display = "none";
        document.getElementById("RegularButton").style.display = "block";
    }
});
window.onload = function () {
    prepareButtons();
}

回发错误消息后，如果我取消选中并选中 TrainingRequired 复选框，我可以获得两个按钮。但我真的希望这两个按钮在回发后显示错误消息。谢谢。

【问题讨论】：

标签： javascript jquery asp.net checkbox

【解决方案1】：

由于页面会在回发后重新绘制，window.onload 将再次被调用。因此，您需要设置一个条件来检查是否发生错误。由于您使用 MVC，您可以在控制器中创建一个 ViewBag 道具，并在发生错误时设置它。类似于以下内容。

在控制器中，

public ActionResult Validate()
{
  if(Error)
  ViewBag.isError = true;
  return View();
}

在Js中，

window.onload = function () {
    var error = '@ ViewBag.isError';
    if(error != 'true')
     prepareButtons();
}

【讨论】：