使用Razor或Jquery更改ASP.NET MVC 4中的默認彈出窗口引導

嗨感謝您的幫助提前。我有一個超過15個字段的註冊表。現在我正在使用數據註釋進行驗證，並且它運行良好。我需要的是找到一種方法來實際顯示編輯後的彈出窗口，當用戶對窗體進行迷惑時，他們知道所有的字段都是必需的。現在，表單必須完成，如果他們沒有填寫必填字段，用戶會在提交時得到提示。這是沒有功能和不好的設計策略。我有一個測試在一個領域的popover。這裏是你可能想象的，這將是我所有領域的很多代碼來顯示這樣的消息。我想要一個更大的彈出窗口，如果用戶將鼠標懸停在字段上，就會顯示類似這樣的內容。地址線2是必填字段。此外，這是非常重要的，我需要讓彈出窗口變大一個不同的顏色，並顯示在所有字段的輸入框右側。這裏是我的風格使用Razor或Jquery更改ASP.NET MVC 4中的默認彈出窗口引導

<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" 
    })`

來源

2016-07-25 RickZler

只是要清楚，我想每個輸入表單中的所有popovers看起來相同，但它們不會是默認的CSS樣式，但更像是在文章中指定的樣式。所以當你將鼠標放在它上面時，每個輸入字段都會有一個彈出窗口，說明你的輸入字段是必填字段。因此，在提交註冊表之前，用戶知道該字段是必需的 – RickZler

這種解決方案的優點在於它會爲你的所有必填字段工作，並與擴展方法，你不必指定CSS代碼一個不同的工具提示foreach領域。確保你添加了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>

來源

2016-07-26 23:33:30 kblau

嘿，非常感謝。我等不及要明天再試。所以我只是使用lambda表達式Html.LabelWithTooltip（model => model.Address1並將model.addrees1更改爲我在視圖中檢查的字段，因此它將在標記爲工具提示的所有字段上運行。 – RickZler

Kblau：謝謝，但這是是不是改變默認的工具提示或彈出窗口的樣子。我是否必須將.ui-tooltip放在Site.css文件中，這也可以在Html.TextBox輔助方法中使用。請告知謝謝 – RickZler

使用Razor或Jquery更改ASP.NET MVC 4中的默認彈出窗口引導

回答

相關問題