ASP.NET MVC数据注释工具提示

I have been asked to display tooltips instead of plain text when form validation fails. We are currently using asp.net MVC 3 data annotation validators to display validation error messages. I am still fairly new to MVC and I have spent hours online looking for a clean solution. If someone could point me in the right direction I would surely appreciate it.

当表单验证失败时,我被要求显示工具提示而不是纯文本。我们目前正在使用asp.net MVC 3数据注释验证器来显示验证错误消息。我仍然是MVC的新手,我花了几个小时在线寻找一个干净的解决方案。如果有人能指出我正确的方向,我一定会很感激。

Thx

2 个解决方案

#1

You can specify the html attributes that you want to apply to your control. This is done using the second parameter of your HtmlHelper method that creates the control. For example in MVC 3 if you wanted a textbox with a tooltip that appears when you hover over it, use the html title attribute like this.

您可以指定要应用于控件的html属性。这是使用创建控件的HtmlHelper方法的第二个参数完成的。例如,在MVC 3中,如果你想要一个带有工具提示的文本框,当你将鼠标悬停在它上面时,请使用像这样的html title属性。

@Html.TextBoxFor(model => model.Name, new { @class = "form", @title= "Your name as you would like it to appear in the notification email" })

To use a value from your controller in the server side code you can use the ViewBag (or ViewData in MVC2). So the code would look something like this:

要在服务器端代码中使用控制器中的值,可以使用ViewBag(或MVC2中的ViewData)。所以代码看起来像这样:

[HttpPost]
public void Form(Model m)
{
    if(m.Name.Length==0)
        ViewBag.NameError = "Please enter your name";
}

and the view code would look like this

并且视图代码看起来像这样

@Html.TextBoxFor(model => model.Name, new { @class = "form", @title= (ViewBag.NameError==null?string.empty:(string)ViewBag.NameError)})

#2

You are most of the way there as you already have the validation errors shown on the page. What you need to be looking at is how to use some client-side scripts (javascript) to be able to render these as a tooltip in the browser.

由于您已经在页面上显示了验证错误,因此您大部分都在那里。您需要关注的是如何使用一些客户端脚本(javascript)来将这些脚本渲染为浏览器中的工具提示。

Take a look at the following JQuery plugins which may be what you are after: http://jquery.bassistance.de/tooltip/demo/

看看下面的JQuery插件,它们可能就是你所追求的:http://jquery.bassistance.de/tooltip/demo/

#1

@Html.TextBoxFor(model => model.Name, new { @class = "form", @title= "Your name as you would like it to appear in the notification email" })