带有 Javascript 的 CheckBox MVC 块编辑器答案

【问题标题】：Block Editor for CheckBox MVC with Javascript带有 Javascript 的 CheckBox MVC 块编辑器
【发布时间】：2018-08-23 17:31:24
【问题描述】：

您有一个调用模态窗口的按钮...

 <a href="@Url.Action("AgregarProducto", "Entradas")" id="agregarproducto" class="dialog-window btn btn-success">Agregar Producto <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> </a>

这是执行它的javascript

  <script type="text/javascript">
$(document).ready(function () {
    $('#agregarproducto').click(function (e) {
        e.preventDefault();
        var $link = $(this);
        var title = $link.text();
        $('#AgregarProducto.modal-title').html(title);
        var url = $(this).attr('href');
        $.get(url, function (data) {
            $('#AgregarProducto .te').html(data);
            $('#AgregarProducto').modal();
            $('#editorfocus').focus() // set focus
        });
    });
});
</script>

局部视图看起来像这样......

它希望在执行模式时将 EditorFor “禁用”并且未选中复选框（假），并且在用户选中复选框以取消阻止有问题的文本框的情况下......它还试图验证当他们按下表单的“提交”按钮时，验证复选框被标记或未标记......如果它被标记，将在......中验证一个值，否则它将发送消息 "您必须输入数量或取消选中该框"

我有以下模态视图“AgregarProducto.cshtml”...

<h2>Agregar Producto</h2>
<!DOCTYPE html>
<html>
<head>    
    <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.12.1.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>    
    </head>    
<body>
            <div class="form-group">
                <div class="col-md-10">
                    <label>Agregar Cantidad</label>
                    <input type="checkbox" name="checkcantidad" id="idcheckcantidad" value="false" />
                    @Html.EditorFor(model => model.d_Cantidad, new { htmlAttributes = new { @class = "form-control", id = "editorprecio" } })
                  </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Kn_CodigoProducto, "Producto", htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
               @Html.EditorFor(model => model.Kn_CodigoProducto, new { htmlAttributes = new { @class = "form-control", @autofocus = "true" , id = "editorfocus" } })

                <div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <button class="btn btn-success" id="mybtn" type="submit">
                        Agregar Producto
                        <i class="glyphicon glyphicon-ok"></i>
                    </button>
                </div>
            </div>
        </div>
    }

</body>
</html>

我在主视图中有以下脚本...

<script type="text/javascript">
        $(function () {
            var st = $("#idcheckcantidad").attr('checked');
            $("#idcheckproveedor").change(function () {
                st = this.checked;
                if (st) {
                    $("#txtSearch").prop("disabled", false);
                }
                else {
                    $("#txtSearch").prop("disabled", true);
                }
            });
            $("#mybtn").click(function () {
                if (st && ($("#txtSearch").val() == "" || $("#txtSearch").val() == null)) {
                    alert("Debe Ingresar una cantidad o desmarcar la casilla");
                    return false;
                }
            });
        });
</script>

我的代码没有做任何事情......打开模式时，只执行打开模式的按钮中定义的焦点，但我无法从模式视图中阻止 EditorFor，显然我的验证没有工作，我正确设置代码？，这是怎么回事？对我有什么帮助吗？

PS：将脚本更改为我的模式窗口“AddProduct.cshtml”时，也没有任何反应

【问题讨论】：

您应该使用条件验证属性来执行此操作，例如 foolproof [RequiredIf] 属性，以便您获得客户端和服务器端验证（任何人都可以覆盖您的脚本并回发任何内容他们希望因此服务器端验证至关重要）
我只想轻松动态地阻止文本框，然后我可以使用数据符号进行验证......有什么帮助吗？ @StephenMuecke
使用[RequiredIf] 属性！您需要处理复选框的.click() 事件以切换文本框状态的唯一脚本（实际上您甚至不需要）

标签： javascript c# jquery asp.net-mvc checkbox

【解决方案1】：

您可以使用开始表单并将表单内容保留在其中，并在提交时调用 javascript 函数来验证它。如果验证成功，则从该方法返回 true，否则阻止表单提交

    @using (Html.BeginForm("method", "controller", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "validateForm(event)" }))
    {
// HTML form COntent goes here
}

用于验证的javascript代码

<script>


    function validateForm(event)
    {
          //default is validation fail
          var isValid = false;

          // validation rules goes here  - update isValid value to true if pass else fail

           // your code here 

           // check whether form valid
           if(!isValid) {
           //if validation fails then prevent submit
                event.preventDefault();
            }

            return isValid;


}

【讨论】：