MVC Web 应用程序的 ToolTip

• 下载源码 - 2.01 MB

引言

本文帮助理解 - 如何

• 在 MVC 应用程序中使用工具提示
• 使用项目的资源获取工具提示信息
• 自定义 cluetip，jQuery 插件，以显示动态标题

此示例 Web 应用程序在 MVC 视图 (MainPage.cshtml) 中集成了工具提示。该应用程序使用 - VS2010 MVC3、C#、JQuery 和 cluetip 插件编写。可以从 http://plugins.learningjquery.com/cluetip 下载 cluetip。

它是如何显示工具提示的

当用户点击视图时，具有工具提示的 HTML 元素对 controller 类中的 action 方法进行 ajax 调用。action 方法返回工具提示信息。model 类从资源中读取信息并将其传递给 Ajax post 调用。要在工具提示中显示的信息是项目资源的一部分。

cluetip 适用于体面的工具提示。它易于使用。但您可能需要进行一些自定义，例如项目中的“动态标题更新”。

Using the Code

它是如何工作的

在一个典型的 MVC 应用程序中，代码功能被分成模型、控制器和视图 (HTML)。在此示例中，模型的 GetToolTip() 将工具提示作为 ToolTipMvcModel 对象返回。ToolTipMvcModel 有 2 个字段 - Field 和 Description。Field 是工具提示标题，Description 是实际的工具提示。控制器的 ToolTip() 操作方法调用 model 的 GetToolTip() 方法。ToolTip() 方法使用 [HttpPost] 属性，因此只有“post”请求才能调用此方法。最后，在视图 (cshtml 文件) 中，工具提示在 HTML 元素的点击事件上被调用。此 click 事件执行一个 ajax 调用，该调用执行控制器的 ToolTip() 方法。

模型代码

要在工具提示中显示的信息存储在项目资源 (resx 文件) 中，并通过 model 类进行访问。model 类的 static 方法 GetToolTip() 返回工具提示信息。工具提示信息作为名称、值对存储在资源中。名称存储年份，值存储将填充到 ToolTipMvcModel 对象的 Field 和 Description。Field 和 Description 使用 $_$_$ 分隔。

public static ToolTipMvcModel GetToolTip(string toolTipId)
{
ToolTipMvcModel item = new ToolTipMvcModel(toolTipId);
System.Resources.ResourceSet set = ToolTipMvc.TooTipMvcResource.ResourceManager.
GetResourceSet(System.Globalization.CultureInfo.CurrentCulture, true, true);
string strRes = set.GetString(toolTipId);
bool bfound = false;
if(!string.IsNullOrEmpty(strRes))
{
string[] strData = strRes.Split(splitParam,StringSplitOptions.None);
if(strData.Length >= 2)
{
try
{
item.Field = strData[0].Split(new string[] { "==" }, StringSplitOptions.None).Where(
x => string.Compare("field", x.Trim(), true) != 0).First();
item.Description = strData[1].Split(new string[] { "==" }, StringSplitOptions.None).Where(
x => string.Compare("description", x.Trim(), true) != 0).First();
bfound = true;
}
catch (Exception) { }
}
}
if (!bfound)
{
item.Field = "Error";
item.Description = "Sorry Tool Tip for the selected year not found!";         
}
return item;
}

Controller 代码

控制器中的操作方法 ToolTip() 调用 Model 类方法 GetToolTip()。 TooTip() 方法仅由视图的 post 请求调用。这就是它使用 [HttpPost] 属性的原因。因为我们的目的是只服务于 Ajax 调用，对于非 Ajax 调用，该方法返回一个空的 string。

[HttpPost]
public ActionResult ToolTip(string id)
{
if (!Request.IsAjaxRequest())
return Json("");
ToolTipMvc.Models.ToolTipMvcModel model = 
        ToolTipMvc.Models.ToolTipMvcModel.GetToolTip(id);
return Json(model);
}

视图代码

视图 (示例中的 MainPage.cshml) 执行两件事 - 定义 HTML 元素，并通过调用 RegisterToolTip() JavaScript 方法将元素注册到工具提示控件。

<a href="#" id="ctrl2011" title="tooltip">2011 Spellingbee winning word: Cymotrichous</a>
$(document).ready(function () {
RegisterToolTip(<a href="mailto:'@Url.Action("ToolTip")'">
    '@Url.Action("ToolTip")'</a>, 'ctrl2011', 2011);
});

以下是 RegisterToolTip() JavaScript 方法。这在 cluetip 基本行为的基础上进行了扩展。在 Ajax 调用返回时，clutip() 调用 ajaxProcess 回调。ajaxProcess 回调使用 jquery data() 函数将标题存储在元素的 DOM 中。Cluetip 期望（至少是当前版本）一个静态标题，即您在 HTML 页面设计期间硬编码的标题。但是我们有一个来自项目资源的动态标题，所以唯一的选择是使用 'onshow' 回调并设置标题。

function RegisterToolTip(action, ctrlId, dispInfoId) {
$("#" + ctrlId).attr("rel", action).cluetip({
closePosition: "top",
activation: 'click',
width: 350,
sticky: true,
debug: true,
showTitle: true,
dropShadow: true,
cluetipClass: 'default',
closeText: '<div class="ui-state-error-icon ui-icon-closethick" 
    id="close" title="Close"/>',
mouseOutClose: true,
ajaxSettings: {
type: "post",
dataType: "json",
data: { "id": dispInfoId }
},
ajaxProcess: function (dataOut) {
$("#" + ctrlId).data("title", dataOut["Field"]);
return dataOut["Description"];
},
onShow: function (ct, c) {
var t = $("#" + ctrlId).data("title");
$("#cluetip-title").text(t);
}
});
}

关注点

我使用 cluetip 遇到的主要问题是它默认不允许动态标题。这是因为 cluetip() 调用已经构造了标题。我通过调试其代码了解到了这一点。但是我们通过 Ajax 调用获取了动态标题，Ajax 调用返回的标题在 onShow 回调中设置。