MVC Razor编辑器将鼠标悬停在字段上也可用于显示字段帮助 [英] MVC Razor EditorFor Display Field help when hover over field aka tooltip
本文介绍了MVC Razor编辑器将鼠标悬停在字段上也可用于显示字段帮助的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
对于数据输入字段，当用户将鼠标悬停在该字段上时，我想为其显示提示.字段名称为INACT，表示记录是否已被停用.需要这样的东西-输入I以使记录失活.
For a data entry field I want to display a hint for the user when they hover over the field. The field name is INACT and indicates if the record has been inactivated. Something like this is what is needed - Enter an I to Inactivate a record.
我在ModelMetadata中有这个
I have this in the ModelMetadata
[Display(Name = "INACT")]
[DisplayFormat(ConvertEmptyStringToNull = true)]
[StringLength(1)]
public string A_INACT;
并在Inact视图中显示-此视图是可编辑此字段的唯一位置. :
And display in the Inact View - This view is the only place this field can be edited. :
<div class="editor-label">
@Html.LabelFor(model => model.A_INACT)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.A_INACT , new { htmlAttributes = new { tabindex = 1 } })
@Html.ValidationMessageFor(model =>Model.A_INACT)
</div>
无效"视图
@model MTSapp.Models.mts_rename
@{
ViewBag.Title = "Inact";
}
<style>
.container {
width: 50%;
float: left;
}
</style>
<h2>RE NAME </h2>
<h2>Inact Re Number</h2>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
<legend>mts_rename</legend>
<br />
<div class="editor-label">
@Html.LabelFor(model => model.A_ID)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.A_ID, new { @class = "form-control", @readonly = "readonly", @style = "background:#f2f3f3", tabindex = 4 })
</div>
<div class="editor-label">
@Html.LabelFor(model => model.A_RENO)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.A_RENO, new { @class = "form-control", @readonly = "readonly", @style = "background:#f2f3f3", tabindex = 5 })
</div>
<div class="editor-label">
@Html.LabelFor(model => model.A_INACT)
</div>
<div class="editor-field">
<span class="SpaceAvailableSearch">@Html.EditorFor(model => model.A_INACT, new { htmlAttributes = new { tabindex = 1, title = "Enter I to Inactivate Record" } }) </span>
@Html.ValidationMessageFor(model => model.A_INACT)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.A_NAME)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.A_NAME, new { @class = "form-control", @readonly = "readonly", @style = "background:#f2f3f3", tabindex = 6, @title = "This is the RE NAME." })
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
这是查看源:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Inact - MTS Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<link href="/Content/Myspec" rel="stylesheet" type="text/css" />
<link href="/Content/PagedList.css" rel="stylesheet"/>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><a href="/">MATERIAL TEST SYSTEM</a></p>
</div>
<div class="float-right">
<section id="login">
Hello how are you today, <span class="username">AHTD\mase347</span>!
</section>
<nav>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/Login">Login</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<style>
.container {
width: 50%;
float: left;
}
</style>
<h2>RE NAME </h2>
<h2>Inact Re Number</h2>
<form action="/MTS_RENAME/Inact/1" method="post"> <fieldset>
<legend>mts_rename</legend>
<br />
<div class="editor-label">
<label for="A_ID">ID</label>
</div>
<div class="editor-field">
<input class="form-control" data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="A_ID" name="A_ID" readonly="readonly" style="background:#f2f3f3" tabindex="4" type="text" value="1" />
</div>
<div class="editor-label">
<label for="A_RENO">RE NUMBER</label>
</div>
<div class="editor-field">
<input class="form-control" data-val="true" data-val-length="The field RE NUMBER must be a string with a maximum length of 3." data-val-length-max="3" id="A_RENO" name="A_RENO" readonly="readonly" style="background:#f2f3f3" tabindex="5" type="text" value="1" />
</div>
<div class="editor-label">
<label for="A_INACT">INACT</label>
</div>
<div class="editor-field">
<span class="SpaceAvailableSearch"> <input class="text-box single-line" data-val="true" data-val-length="The field INACT must be a string with a maximum length of 1." data-val-length-max="1" id="A_INACT" name="A_INACT" type="text" value="" /> </span>
<span class="field-validation-valid" data-valmsg-for="A_INACT" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="A_NAME">RE NAME</label>
</div>
<div class="editor-field">
<input class="form-control" data-val="true" data-val-length="The field RE NAME must be a string with a maximum length of 39." data-val-length-max="39" data-val-required="The RE NAME field is required." id="A_NAME" name="A_NAME" readonly="readonly" style="background:#f2f3f3" tabindex="6" title="This is the RE NAME." type="text" value="ZZ_TESTXDO THIS ZZXXXX" />
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
</form>
<div>
<a href="/MTS_RENAME">Back to List</a>
</div>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2017 - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/jquery-migrate-1.2.1.js"></script>
<script src="/bundles/bootstrap"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
</body>
</html>
推荐答案
HTML对于这样的工具提示具有title属性. (对于除基本工具提示之外的任何复杂操作，您都将研究一些自定义样式以及可能的JavaScript功能，以模仿工具提示，具体取决于所采用的方法.为此，Google提供了多种现成的解决方案.)
HTML has a title attribute for a tooltip like this. (For anything more complex than a basic tooltip, you'd be looking at some custom styling and possibly JavaScript functionality to mimic a tooltip, depending on the approach taken. There are a variety of ready-made solutions available via Google for this.)
因此，您可以在此处设置自定义HTML属性:
So where you set your custom HTML attributes:
htmlAttributes = new { tabindex = 1 }
您只需为title添加一个:
htmlAttributes = new { tabindex = 1, title = "Enter an I to Inactivate a record" }
这篇关于MVC Razor编辑器将鼠标悬停在字段上也可用于显示字段帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
