目录

介绍

背景

开发代码

辅助功能问题

兴趣点

介绍

按照说明将jQuery自动完成小部件实现到ASP.NET页面并不困难。但是&＃xff0c;如果使用partial将多个自动完成小部件添加到页面中&＃xff0c;则需要执行一些额外的工作。当必须使用Web可访问性时也是如此。

背景

它是一个ASP.NET Core MVC Razor视图页面。

最初&＃xff0c;Selectize将四个文本输入框转换为选择列表框。其中两个是经理用的&＃xff0c;因为项目的数量不多&＃xff0c;所以选择框是可以的。另外两个是针对成百上千的员工&＃xff0c;而选择框并不是一个好的参与者。

开发代码

以下是作为MVC部分页面的自动完成小部件的第一个版本。

_AutoComplete.cshtml&＃xff1a;

&＃64;using System.Web
&＃64;{Layout &＃61; null;
}&＃64;* The reason to change the jquery built-in autocomplete styles is that the page is Bootstrapped *&＃64;


在主机页面中&＃xff0c;可以像这样调用partial&＃xff1a;


asp-for&＃61;"ManagerEmail" placeholder&＃61;"Start typing an email...">

&＃64;await Html.PartialAsync("~/Views/Partials/_AutoCompletion.cshtml", new ViewDataDictionary(ViewData) {{ "TargetId", "ManagerEmail" },{ "TargetHiddenValueElementId", "ManagerContactId" },{ "Source", JsonConvert.SerializeObject(Model.Contacts.Select(x &＃61;> new { value &＃61; x.Id, label &＃61; x.Name })) },// Or replace "Source" with // { "AjaxUrl", Url.Action("GetByEmail", "Contact") }, // for ajax call when data is bigger.{ "ValueType", "String" }
})

如果源数据是通过 ViewData被传递给partial的&＃xff0c;则partial将使用浏览器本地数据。如果没有&＃xff0c;但是使用 AjaxUrl&＃xff0c;将触发Ajax调用以从控制器操作或Web服务中提取数据。因此它适用于本地和远程数据。

但是如果z-index值不够大&＃xff0c;菜单选项就会出现问题。在我的例子中&＃xff0c;其中一个小部件在bootstrap modal 对话框中使用。这是截图&＃xff1a;

要解决此问题&＃xff0c;我们应该为其z-index设置一个大数字。它应该大于对话框的z-index。稍后会对此进行另一次讨论。这是我们应该通过jQuery UI复制此窗口小部件所需的样式的一个原因。

另一个原因是&＃xff0c;由于我们使用其他库&＃xff0c;如Bootstrap和jqGrid&＃xff0c;因此可能会覆盖所需的CSS&＃xff0c;因此窗口小部件可能没有预期的外观。

如果只有一个自动完成小部件&＃xff0c;则此部分工作。如上所述&＃xff0c;总共有4个。令我惊讶的是&＃xff0c;一旦我应用了所有小部件&＃xff0c;当我输入一个小部件时&＃xff0c;菜单出现在另一个小部件下方。经过调查&＃xff0c;我发现了一个问题。下面是第二个版本&＃xff0c;它看起来像一个封装的部分&＃xff0c;因此多个实例不会引起冲突。

_AutoComplete.cshtml 版本。2&＃xff1a;

&＃64;using System.Web
&＃64;{Layout &＃61; null;
}&＃64;{&＃64;* The reason to change the jquery built-in autocomplete styles is that the page is Bootstrapped *&＃64;var styles &＃61; &＃64;"
";
}


此版本适用于同一页面上的任意数量的小部件。此外&＃xff0c;有两点值得一提&＃xff1a;

1. 窗口小部件所需的样式只添加一次而不重复。
2. z-index值可以用非常大的数字进行硬编码999999。但是&＃xff0c;我喜欢使用所列的计算方法。

辅助功能问题

我使用WAVE插件来评估Web可访问性。令人惊讶的是&＃xff0c;有多种表格标签错误&＃xff0c;乍一看似乎令人难以置信。

为什么&＃xff1f;这是因为使用相同模型呈现的分部&＃xff08;不是自动完成窗口小部件&＃xff0c;但是接触部分&＃xff09;的多个实例。例如&＃xff0c;要添加和更新经理联系人&＃xff0c;两个呈现的部分使用相同的管理器联系模型。员工联系人部分也是如此。

为了解决这个问题&＃xff0c;我们需要在页面上绑定/呈现的相同模型之间区分表单标签的属性和字段id值。

直观地&＃xff0c;人们可能倾向于编写Javascript代码来更改属性的标签和相应的表单控件ID。它应该可以工作&＃xff0c;但我没有尝试这种方法&＃xff0c;因为我们可以利用ASP.NET Core MVC强大的标记帮助程序来编写更清晰&＃xff0c;更高效的代码。

我就是这样做的。

标记助手&＃xff1a;标签标记助手和输入标记助手。

[HtmlTargetElement("label", Attributes &＃61; "asp-for")]
public class ResolveMultipleAriaLabelsLabelTagHelper : LabelTagHelper
{public ResolveMultipleAriaLabelsLabelTagHelper(IHtmlGenerator generator) : base(generator){}public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output){var viewData &＃61; ViewContext.ViewData;if (viewData["IdPrefixForMultipleAriaLabels"] !&＃61; null){var forAttribute &＃61; output.Attributes.FirstOrDefault(attribute &＃61;> attribute.Name.ToLower() &＃61;&＃61; "for");if (forAttribute !&＃61; null){CreateOrMergeAttribute(string.Format("{0}_{1}", viewData["IdPrefixForMultipleAriaLabels"], forAttribute.Value), output);}}var hiddenAriaAttr &＃61; output.Attributes.FirstOrDefault(attribute &＃61;> attribute.Name.ToLower() &＃61;&＃61; "aria-hidden");if (hiddenAriaAttr !&＃61; null && hiddenAriaAttr.Value.ToString() &＃61;&＃61; "true"){output.TagName &＃61; "div";#region keep the look and feel by design as much as possibleoutput.Attributes.Add("class", "label-p");output.Attributes.Add("style", "cursor:pointer");#endregion}return base.ProcessAsync(context, output);}private void CreateOrMergeAttribute(string forName, TagHelperOutput output){if (string.IsNullOrEmpty(forName)) return;var attribute &＃61; new TagHelperAttribute("for", forName);output.Attributes.SetAttribute(attribute);}
}

[HtmlTargetElement("input", Attributes &＃61; "asp-for")]
public class ResolveMultipleAriaLabelsInputTagHelper : InputTagHelper
{public ResolveMultipleAriaLabelsInputTagHelper(IHtmlGenerator generator) : base(generator){}public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output){var viewData &＃61; ViewContext.ViewData;if (viewData["IdPrefixForMultipleAriaLabels"] !&＃61; null){var nameAttribute &＃61; output.Attributes.FirstOrDefault(attribute &＃61;> attribute.Name.ToLower() &＃61;&＃61; "name");CreateOrMergeAttribute(string.Format("{0}_{1}", viewData["IdPrefixForMultipleAriaLabels"], nameAttribute.Value), output);}return base.ProcessAsync(context, output);}private void CreateOrMergeAttribute(string id, TagHelperOutput output){if (string.IsNullOrEmpty(id)) return;var attribute &＃61; new TagHelperAttribute("Id", id);output.Attributes.SetAttribute(attribute);}
}

背后的想法是在必要时更改标签的属性和输入ID&＃xff0c;以便它们可以一对一匹配。

如果我们希望它以可分辨的label-for和input-id呈现&＃xff0c;请按以下方式调用分部&＃xff1a;

&＃64;await Html.PartialAsync("~/Views/Partials/_AddContact.cshtml", new Contact { CanAssociateAccount &＃61; false }, new ViewDataDictionary(ViewData) { { "IdPrefixForMultipleAriaLabels", "Manager" } })

IdPrefixForMultipleAriaLabels 变量由ViewContext中携带的ViewData传递到标记助手中。然后可以将Contact字段呈现为以下内容&＃xff1a;

First Name



然后&＃xff0c;标签的for属性仅与前缀为“ Manager_” 的输入id匹配。应用此功能后&＃xff0c;WAVE将永远不会抱怨Contact部分中单个输入的多个标签。虽然辅助工具可能没有多个标签的问题&＃xff0c;但项目所有者会对修复感到满意。

兴趣点

1. 使用Javascript函数在一个页面上隔离相同的部分
2. jQuery自动完成小部件&＃xff0c;用于使用本地或远程数据&＃xff0c;具体取决于数据大小
3. 使用ASP.NET Core MVC标记帮助程序来解决可访问性问题
4. 用户数据从视图页面传递到标记助手以执行有条件的工作

原文地址&＃xff1a;https://www.codeproject.com/Articles/1368309/What-Did-I-Do-with-this-Page