Render custom content on validation error - asp.net

I wish to bring attention to fields which have not passed model validation. In the case of a textbox, for example, could a red asterisk be printed?
Such as: #Html.EditorFor(m => m.UserName)<span title="The User Name is required.">*</span>

Have you tried something simple like this:
#Html.ValidationMessageFor(model => model.UserName, "*")
You need the following scripts:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.7.2.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Related

How to output type=javascript from Scripts.Render using bundles

In My Master page I have the following lines :
<%: Scripts.Render("~/bundles/SiteJS") %>
It correctly outputs the bundles as :
<script src="/Scripts/jquery-2.1.0.min.js"></script>
<script src="/Scripts/ie10-viewport-bug-workaround.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/Main.js"></script>
But I want it like this with type="text/javascript"
<script src="/Scripts/jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="/Scripts/ie10-viewport-bug-workaround.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="/Scripts/Main.js" type="text/javascript"></script>
What needs to be done for this ?
This post How do I add type="text/javascript" to a script tag when using System.Web.Optimization
focuses on a single javascript file but I have many files in that bundle.

Jquery autocomplete not working in asp.net

I have a content page in ASP.Net web app.
In that I am trying to use Jquery UI Autocomplete. But it does not work. What is wrong in this page? Here is my code:
<asp:Content ID="Content3" ContentPlaceHolderID="contentMainBody" runat="server" >
<link href="Atlas_Css/menu.css" rel="stylesheet" type="text/css" />
<link href="Atlas_Css/jquery.simplyscroll.css" rel="stylesheet" type="text/css" media="all" />
<link href="Atlas_Css/Jquery%20UI.css" rel="stylesheet" type="text/css" />
<script src="JS_AtlasFly/jquery.js" type="text/javascript"></script>
<script src="Scripts/Validations.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery.simplyscroll.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery.simplyscroll.min.js" type="text/javascript"></script>
<script src="JS_AtlasFly/js-image-slider.js" type="text/javascript"></script>
<script src="JS_AtlasFly/accordian.pack.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery-1.9.1.js" type="text/javascript"></script>
<script src="JS_AtlasFly/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function ()
{
var availableTags = [ <%= PassFname %> ];
$("#txtFname" ).autocomplete({
source: availableTags
});
}
</script>
<div id="testDiv" runat="server">
<asp:Label ID="lblName" runat="server" Text="F Name"></asp:Label> <asp:TextBox ID="txtFname" runat="server"></asp:TextBox>
</div>
NOTE: the server side variable, PassFname, I am populating in code behind .
In a normal asp.Net page , without using master page (within the same project), Autocomplete works fine.
What is wrong in this page? is it because of master page?
What is the solution for this?
Since the same code behind code works in another page, I am not including it here. I have checked it here also, the string variable is populated on page load. Only autocomplete is not binding.
Any help will be appreciated.
I found the solution to this. I used the clientId of the TextBox directly in
Javascript.
like this:
$("#ctl00_contentMainBody_txtFname").autocomplete({
source: availableTags
});
that solved the binding of autocomplete with the textbox's id.
BTW, using <%=txtFname.ClientID%> doesnot solve the issue. Instead the page stops rendering.
So I used the client Id from page source, and it works.
Thanks to all

jquery datepicker work in dynamic data

I follow this instruction: http://weblogs.asp.net/dotnetstories/archive/2011/07/01/a-simple-tutorial-on-asp-net-dynamic-data.aspx?CommentPosted=true#commentmessage
I have added the links to my ASP.NET Dynamic Data master page as follow:
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<link href="NewStyles/ui-lightness/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
I add this code on the top of my DateTime_Edit.ascx.
<script type="text/javascript">
$(document).ready(function () {
$('#<%=TextBox1.ClientID %>').datepicker();
});
But it doesn't work. Any idea?
I used Page.ResolveURL() in src attribiute. Like this one:
<script src='<%=Page.ResolveURL("~/Scripts/jquery-1.7.2.min.js")%>' type="text/javascript"></script>
Check your Site.master file that the EnablePartialRendering value is false and not true
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false"/>

Maximum number of words plugin issue on ckeditor

I am trying to implement a word count feature on some of my text areas that have been converted to wswgs' using ckeditor tutorial found here: http://www.n7studios.co.uk/2010/03/01/ckeditor-word-count-plugin/. This tutorial uses a custom plugin to count words for ckeditor. I get the correct word count but I am not able to see the color change to red when I surpass the maximum number of words allowed. I have used firebug to see how my text area looks like after it has been transformed into a wswg using ckeditor but I don't see anything strange. Here is my code:
<asp:Content ID="Content3" ContentPlaceHolderID="JSContent" runat="server">
<script src="<%: Url.Content("~/Scripts/jquery-1.7.min.js") %>" type="text/javascript"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.combobox.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/ckeditor.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/adapters/jquery.js") %>"></script> <%-- Must be linked last --%>
<script type="text/javascript">
$(document).ready(function () {
$(".cke_editor").ckeditor({
toolbar: 'custom'
});
});
<div class="form-row form-row-inline">
<%: Html.TextAreaFor(model => model.AssignmentText, new { #name = "table", #class = "cke_editor", #style = "display:none", #onchange = "setDirty(true)" })%>
<input name="tableWordCount" type="hidden" value="10" />
</div>
Here is the screen:
Any help greatly appreciated.
I finally figured it out. Html.TextAreaFor() asp.net mvc helper method takes, as a parameter, an object of html attributes as shown on the question code above. I originally had used the "name" property for the textarea so that it matches the "name property" on the ckeditor word count plugin. I had to instead use the "id" property.
ckeditor sample:
<html>
<head>
<title>CKEditor Word Count Demonstration</title>
<script type="text/javascript" src="jquery/jquery.1.4.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
<form action="#" method="POST">
<p>
<label for="content">Content with 250 word limit</label>
<textarea name="content" class="ckeditor">Lorem Ipsum.</textarea>
<input type="hidden" name="contentWordCount" value="250" />
</p>
</form>
</body>
</html>
my new fixed code:
<asp:Content ID="Content3" ContentPlaceHolderID="JSContent" runat="server">
<script src="<%: Url.Content("~/Scripts/jquery-1.7.min.js") %>" type="text/javascript"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.combobox.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/ckeditor.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/adapters/jquery.js") %>"></script> <%-- Must be linked last --%>
<script type="text/javascript">
$(document).ready(function () {
$(".cke_editor").ckeditor({
toolbar: 'custom'
});
});
<div class="form-row form-row-inline">
<%: Html.TextAreaFor(model => model.AssignmentText, new { #id = "taxta", #class = "cke_editor", #style = "display:none", #onchange = "setDirty(true)" })%>
<input name="taxtaWordCount" type="hidden" value="10" />
</div>
So, the only thing I had to change is the "id" property. I hope this helps others. Again, Firebug was very helpful in delving through the html DOM and looking at how everything is rendered on the browser.

Cufon Asp.net in master page

I try to use Cufon fonts in my web page. I have master page and in head tag I have this:
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/GeosansLight_500.font.js" type="text/javascript"></script>
<script src="js/Impact_400.font.js" type="text/javascript"></script>
<link href="App_Themes/tDefault/style.css" rel="stylesheet" type="text/css" />
and in the end of MasterPage before end body:
<script type="text/javascript"> Cufon.now();</script>
but in page i have this error: Webpage error details
Message: 'Cufon' is undefined
URI: http://localhost:93/en/
how can I embed this font in asp.net, is this correct way.
In your header put
<head id="Head1" runat="server">
<asp:PlaceHolder runat="server" id="phHeader">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src='<%= ResolveUrl("~/js/cufon-yui.js") %>'></script>
<script type="text/javascript" src='<%= ResolveUrl("~/js/Myriad_Pro_400.font.js") %>'></script>
<script type="text/javascript" src='<%= ResolveUrl("~/js/cufon-replace.js") %>'></script>
</asp:PlaceHolder>
</head>
Is the path to the JavaScript correct?

Resources