Question

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

 <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“禁用”并取消选中复选框（false），并且在用户选中复选框以取消阻止有问题的文本框的情况下......它还寻求验证当他们按下表单的“提交”按钮时，验证复选框是否已标记或未标记....如果已标记，则将在...中验证值...否则将发送消息 “您必须输入数量或取消选中框”

我有以下模态视图“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”没有任何反应

Answer 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;


}

使用Javascript进行CheckBox MVC的块编辑器

1 个答案: