部分页面上的 ASP.NET Core 3.0 Razor JQuery 验证规则

Posted 2023-04-13

【中文标题】部分页面上的 ASP.NET Core 3.0 Razor JQuery 验证规则

【英文标题】：ASP.NET Core 3.0 Razor JQuery validation rules on partial page

【发布时间】：2020-03-30 12:32:46

【问题描述】：

我在 ASP.NET Core 3.0 中有一个带有 RAZOR（无 MVC）的页面，部分页面加载了 AJAX；加载效果很好，但验证规则没有。在其他输入字段上使用“必需”表示法进行验证也很有效。

这是我的主页：

    <a class="nav-link showposition text-dark text-center p-0 collapsed" id="ShowPosition" href='ShowPosition'>@item.Sale_Order_Position</a>

    <div class="card shadow mb-4 collapse" aria-labelledby="ShowPosition">
        <div id="DetailContents">
        </div>
    </div>

    <script> 
    jQuery(function($) 
    $('.showposition').on('click', function (e) 
        e.preventDefault(); 
        $.ajax(
            url: $(this).attr('href'),
            type: 'GET',
            cache: false,
            headers: 
                RequestVerificationToken:  $('input:hidden[name="__RequestVerificationToken"]').val()
            
        ).done(function(result) 
            $('#DetailContents').html(result);

            //Setup Position details
            $('#SavePositionForm').SetupPositionDetails();
        );
    );

   (function( $ )
    $.fn.SetupPositionDetails = function () 

        $("#SavePositionForm").removeData("validator");
        $("#SavePositionForm").removeData("unobtrusiveValidator");
        $.validator.unobtrusive.parse("#SavePositionForm");

        $("#SavePositionForm").validate(
            debug: true,
            rules: 
                inp_NetPrice: 
                    required: true
                
            
        );

           ; 
    )(jQuery);

    );
    </script>

这是我的部分观点：

<form id="SavePositionForm" class="needs-validation" novalidate>
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
        <div class="row">
            <div class="col div_image pl-0">
                <label class="bg-white"><i class="fr fa-newspaper mr-2"></i><localize>Net price</localize></label>
            </div>
            <div class="col-sm-6 col-md-6">
                <input class="form-control form-control-sm" type="number" step="any" name="inp_NetPrice" id="inp_NetPrice" asp-for="@Model.Item1.Net_Price" value="@Model.Item1.Net_Price"/>
            </div>
        </div>
    </div>
    </form>

问题是“inp_NetPrice”验证不起作用。

我也在主要部分页面中尝试过这个脚本（我知道，将脚本放在部分页面中不是一个好主意，但我想尝试）但没有成功：

$(document).ready(function () 

    $("#SavePositionForm").validate(
            debug: true,
            rules: 
                inp_NetPrice: 
                    required: true
                
            
    );

    $("#SavePositionForm").removeData("validator");
    $("#SavePositionForm").removeData("unobtrusiveValidator");
    $.validator.unobtrusive.parse("#SavePositionForm");

);

有什么建议吗？ 谢谢。

编辑：

生成的 HTML：

<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
   <div class="row">
       <div class="col div_image pl-0">
           <label class="bg-white"><i class="fa fa-newspaper mr-2"></i>Net price</label>
       </div>
       <div class="col-sm-6 col-md-6">
           <input class="form-control form-control-sm" id="inp_NetPrice" name="inp_NetPrice" value="" type="number" step="any">
       </div>
   </div>
 </div>

【问题讨论】：

你能检查生成的 HTML 输出中的输入元素吗？对 name 和 id 属性特别感兴趣

添加生成的 HTML。

【参考方案1】：

修复了删除问题

name="inp_NetPrice"

因为我有

name="inp_NetPrice" id="inp_NetPrice" asp-for="@Model.Item1.Net_Price"