您好，谢谢您的帮助。我有一个超过15个字段的注册表。
现在，我正在使用数据注释进行验证，并且运行良好。我需要的是找到一种方法，当用户在表单上慕斯时可以真正显示编辑后的弹出框，以便他们知道所有字段都是必需的。现在，表单必须完成，如果他们没有填写必填字段，则用户会在提交时得到提示。事实证明，这既没有功能，又有不良的设计策略。
我有一个正在测试的弹窗。您可能会想像，这将是我所有字段显示这样的消息的大量代码。我想在“输入”表单上有一个更大的弹出窗口，如果用户将鼠标悬停在该字段上，它将显示类似的内容。
地址第2行是必填字段。同样，这非常重要，我需要使弹出框变大为其他颜色，并在所有字段的输入框右侧显示。这是我的样式CSS代码
<style>
/* Tooltip */
.tooltip > .tooltip-inner {
background-color: #73AD21;
color: #FFFFFF;
border: 1px solid green;
padding: 15px;
font-size: 20px;
}
/* Tooltip on top */
.tooltip.top > .tooltip-arrow {
border-top: 5px solid green;
}
/* Tooltip on bottom */
.tooltip.bottom > .tooltip-arrow {
border-bottom: 5px solid blue;
}
/* Tooltip on left */
.tooltip.left > .tooltip-arrow {
border-left: 5px solid red;
}
/* Tooltip on right */
.tooltip.right > .tooltip-arrow {
border-right: 5px solid black;
}
@Html.LabelFor(model => model.Address2, htmlAttributes: new
{
@class = "control-label col-md-2",
data_toogle = "popover",
data_trigger = "hover",
data_container = "body",
data_placement = "right",
title = "Address2 is not mandatory"
})`
最佳答案
此解决方案的优点在于，它将适用于所有必填字段，并且使用扩展方法，您不必为每个字段指定其他工具提示。确保添加jquery和jquery-ui。
添加此扩展方法。使用指定的名称空间：
namespace System.Web.Mvc.Html
{
public static class Helpers
{
public static MvcHtmlString LabelWithTooltip<TModel,
TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression)
{
var metaData = ModelMetadata.FromLambdaExpression(expression, helper.ViewData);
string htmlFieldName = ExpressionHelper.GetExpressionText(expression);
string labelText = metaData.DisplayName ?? metaData.PropertyName ?? htmlFieldName.Split('.').Last();
if (String.IsNullOrEmpty(labelText))
return MvcHtmlString.Empty;
var label = new TagBuilder("label");
label.Attributes.Add("for", helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(htmlFieldName));
//Credit for this method goes to https://silverhair2010.wordpress.com/2012/10/10/creating-tooltips-using-data-annotations-in-asp-net-mvc/
//I modified the next line
//if (!string.IsNullOrEmpty(metaData.Description))
if (metaData.IsRequired)
label.Attributes.Add("title", htmlFieldName + " is required.");
label.SetInnerText(labelText);
return MvcHtmlString.Create(label.ToString());
}
}
}
使用此控制器和模型：
public class SOModel
{
[Required]
public string Name { get; set; }
[Required]
public string Address1 { get; set; }
}
public class HomeController : Controller
{
public ActionResult PPIndex()
{
return View(new SOModel());
}
这是您的看法：
@{
Layout = null;
}
@model Testy2.Controllers.SOModel
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(function () {
$(document).tooltip();
});
</script>
<style>
label
{
display: inline-block;
width: 5em;
}
/*I got styling ideas from http://stackoverflow.com/questions/4780759/overriding-css-styles-of-the-jquery-ui-tooltip-widget*/
.ui-tooltip {
display: none;
background: black;
font-size: 12px;
height: 10px;
padding: 10px;
color: #fff;
z-index: 99;
bottom: 10px;
border: 2px solid white;
/* for IE */
filter: alpha(opacity=80);
/* CSS3 standard */
opacity: 0.8;
}
</style>
</head>
<body>
@Html.LabelWithTooltip(model => model.Address1)
</body>
</html>