时间戳

首页 > 解决方案 > 重置表单模型值

javascript - 重置表单模型值

问题描述

我有一个带有许多文本框的 asp.net 核心表单。我想添加一个取消按钮，以便用户可以将表单恢复为其原始模型值。

我需要避免回发。

我正在使用 jquery 来隐藏显示编辑保存取消按钮。

$('.edit').click(function() {
    $(this).hide();
    $(this).siblings('.save, .cancel').show();
});
$('.cancel').click(function() {
    $(this).siblings('.edit').show();
    $(this).siblings('.save').hide();
    $(this).hide();
});
$('.save').click(function() {
    $(this).siblings('.edit').show();
    $(this).siblings('.cancel').hide();
    $(this).hide();
});

如何安装取消按钮以将表单重置为模型值：

就像是：

$('.save').click(function() {
    $(this).siblings('.edit').show();
    $(this).siblings('.cancel').hide();
    $(this).hide();
    var $form = this.closest('form'); 
    $form.resetForm();
});

标签： javascriptjquery

解决方案

您可以Javascript通过执行以下操作将整个服务器端模型转换为对象：

<script>
    function resetToDefault(){
        var model = @Html.Raw(Json.Encode(Model));
        for (var prop in model) {
            var controlId = prop;
            var value = model[prop];
            $('.' + controlid).val(value);
        }
    }
</script>

但是，如果您想清除表单，请尝试这样：

$("#idForm").reset();

推荐阅读