Razor Pages局部视图链接点击自动填充文本框需求改造
解决方案
要实现点击车主链接后自动格式化出生日期并填充到页面底部输入框的需求,只需对两个局部视图文件进行修改即可,具体步骤如下:
1. 修改DMV信息局部视图(_DisplayDMVPartial.cshtml)
这里要完成两个目标:一是把出生日期格式化为MMddyyyy样式显示,二是给数据行添加自定义属性,方便后续提取数据填充输入框。
替换原文件内容为:
@model IEnumerable<Models.ExemptionApplicationDmvinformation> @if (Model.Count() != 0) { <div id="DmvNav"> <table style=" border: 1px solid black;"> <thead> <tr> <th colspan="2" style="border: 1px solid black; text-align: center;">DMV信息</th> </tr> </thead> <tbody> <tr> <td style="border: 1px solid black; font-weight: bold; text-align: center;">@Html.DisplayNameFor(m => m.DmvDob)</td> <td style="border: 1px solid black; font-weight: bold; text-align: center;">@Html.DisplayNameFor(m => m.DriverLicense)</td> </tr> @foreach (Models.ExemptionApplicationDmvinformation item in Model) { <!-- 添加自定义属性存储格式化后的数据,方便后续提取 --> <tr data-dob="@(item.DmvDob?.ToString("MMddyyyy") ?? "")" data-license="@item.DriverLicense"> <!-- 格式化显示出生日期为MMddyyyy格式,处理空值情况 --> <td style="border: 1px solid black; text-align: center;">@(item.DmvDob?.ToString("MMddyyyy") ?? "")</td> <td style="border: 1px solid black; text-align: center;">@item.DriverLicense</td> </tr> } </tbody> </table> </div> } else { <p>无可用车主数据</p> }
2. 修改车主信息局部视图(_DisplayOwnerPartial.cshtml)
在加载DMV信息完成的回调中,添加提取数据并填充输入框的逻辑,同时触发验证逻辑启用提交按钮。
替换原文件中的脚本部分:
<script> $('#OwnerNav a').click(function (e) { $('#ApplicationDmvResult').hide().load($(this).attr('href'), function () { $('#ApplicationDmvResult').show(); // 提取DMV数据并填充到页面底部的输入框 var dmvRow = $('#ApplicationDmvResult tr[data-dob]'); if(dmvRow.length > 0){ // 填充出生日期输入框 $('input[name="DateOfBirth"]').val(dmvRow.data('dob')); // 填充驾照号码输入框 $('input[name="DriversLicenseNumber"]').val(dmvRow.data('license')); // 触发输入验证事件,自动启用提交按钮 $('input[name="DateOfBirth"]').trigger('input'); $('input[name="DriversLicenseNumber"]').trigger('input'); } }) return false; }) </script>
修改完成后,点击左侧车主信息中的链接加载DMV数据时,系统会自动将格式化后的出生日期和驾照号码填充到页面底部的对应输入框,无需手动输入。
内容的提问来源于stack exchange,提问作者TheGame1083
相关产品推荐
相关产品推荐

