We Keep Coding

Inconsistent error message DOM betweeen jQuery validation and Postback

My error message html structure from jQuery validation and from postbacks are different causing my validation errors to display differently. I need the nested span tag within the span.field-validation-error because I use CSS to add the (x) icon before the message like the one you see on the Description error message.
This is the error message from jQuery validation.
<span class="field-validation-error" data-valmsg-for="Code" data-valmsg-replace="true">
<span id="Code-error" class="">The Description field is required.</span>
</span>
notice that on the banner url validation message, there's no span tag within the span.field-validation-error.
<span class="field-validation-error" data-valmsg-for="BannerUrl" data-valmsg-replace="true">
The Banner Image field is required.
</span>
This is the view cshtml file markup I have.
<div class="form-group">
#Html.LabelFor(x => x.Description):
#Html.TextAreaFor(x => x.Description, new { rows = 5, cols = 5, #class = "form-control", placeholder = "Enter your team description" })
#Html.ValidationMessageFor(x => x.Description)
</div>
<div class="form-group">
#Html.LabelFor(x => x.BannerUrl):
<input id="BannerUrl" name="BannerUrl" type="file" class="file-styled">
#Html.ValidationMessageFor(x => x.BannerUrl)
</div>
Why does the error message html from jquery validation different from the error message html that's generated after postback?
EDIT:
Below is the CSS that adds the (X) icon before the error message. What I really want it to do is for the icon to show up in front of the error message that comes from a postback (no nested span) and also the error message from jquery validation (nested span).
.field-validation-error > span:before {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
min-width: 1em;
display: inline-block;
text-align: center;
font-size: 16px;
vertical-align: middle;
position: relative;
top: -1px;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\ed63";
margin-right: 5px;
}

The jquery.validate.js plugin and the MVC framework are developed by separate teams (jquery.validate is not associated with Microsoft). The MVC framework just uses jquery.validate.js for client side validation (and use jquery.validate.unobtrusive.js to add the rules to jquery.validate.js).
You could create you own HtmlHelper extension to generate the inner <span> element server side. For example, copy the ValidationExtensions.cs source code and modify the private static MvcHtmlString ValidationMessageHelper(...) method so that instead of builder.SetInnerText(validationMessage); you use builder.InnerHtml = xx; where xx is a TagBuilder that builds a <span> containing the error message.
However, it would be easier to just use some javascript to wrap the inner text inside a <span> element when the page is first loaded
// Get all the elements generated by ValidationMessageFor() that have an error
var errors = $('.field-validation-error');
$.each(errors, function (index, item) {
// Wrap the text in a span element
$(this).wrapInner('<span></span>');
})
Note that the jquery.validate plugin also adds an id attribute to the span based on the property name. It does not appear that you need that based on your css, however, if you do want to include that, then you can use
$.each(errors, function (index, item) {
var id = $(this).data('valmsg-for').replace(/[\.\[\]]/g, "_") + '-error';
var span = $('<span></span>').attr('id', id);
$(this).wrapInner(span);
})
Another option would be to wrap each ValidationMessageFor() inside an element, for example
<span class="error">
#Html.ValidationMessageFor(...)
</span>
and modify the css selector
.error > .field-validation-error:before {
font-family: 'icomoon';
....
}

how to apply css style for pager control after selection of page?

I am using paging to my table grid.
<div class="divpager"> <% for (int i = 0; i < Model.TotalPages; i++)
{%>
<a style="text-decoration:underline; color:Black" class="Pager"><%: i+1 %></a>
<% }%>
</div>
CSS:
.divpager {
display: inline-block;
float: left;
cursor: pointer;
}
I want whenevr user click on page need to apply css style as without underline. For that i tried a.hover, a.active as text-decoration:none. But i am not able to get. please tell me when click on page no need to show underline.

You need to add some jquery for this.. only CSS cant do this.
CSS:
.active { text-decoration: none !important;}
jquery:
$(document).ready(function(){
$('.divpager a').click(function(){
$('.divpager a').removeClass('active');
$(this).addClass('active');
});
});
Don't forget to include jquery library in your page.

Have you try a:active?. Doing that you can style the link differently when you click on that element.
Something like
.Pager:active{
text-decoration:none;
}

First, its a:hover, a:active, not a.hover, a.active;
Second, inline style has priority over the internal and external stylesheet.

How can i add css to a dynamically created div in c#?

i am using css to configure this div's properties using it's id, but it aint working, maybe because i created it in c# in the code behind, how can i fix that?
c#
StringBuilder sb = new StringBuilder();
sb.Append(#"<div id=""img1"" runat=""server"">Vidal</div>");
Label1.Text = sb.ToString();
Css
#img1{
position: absolute;
top: 20px;
left: 20px;
width: 253px;height: 190px;
}

I would use a class instead of an ID. Also, you don't need to make it a div, as your Label will render as a span. You simply need to set the CssClass and Text properties.
C#
Label1.CssClass = "someClass";
Label1.Text = "Vidal";
CSS
.someClass
{
position: absolute;
top: 20px;
left: 20px;
width: 253px;
height: 190px;
}

you can't use label control to display html content , use literal control or panel like below
Panel div = new Panel();
div.ID = "img1";
div.Controls.Add(new Literal{Text = "Vidal"});
this.Controls.Add(div);

I think for your purposes, you might be better with asp:literal control:
StringBuilder sb = new StringBuilder();
sb.Append("<div class=\"image-css-selector">Vidal</div>");
Literal1.Text = sb.ToString();
A label control will have it's own markup and that might affect your html code

If you are using a single webform, then please make sure that you do not have multiple ids. If you are using a master page, and you really need a runat="server attribute to the div then you need to change the css like this:
#ContentPlaceHolder_img1{
position: absolute;
top: 20px;
left: 20px;
width: 253px;height: 190px;
Where ContentPlaceHolder is the name of the ID that you have gave for your content placeholder. for ex:
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
In your master page.

javascript scrollTop not working in div

I have two divs on my page. The first one (optionSelect) is not scrollable and stays at the very top of the page. The other one (dataView) is scrollable and is right under the first one.
I'm trying to retain the second div's scrollbar position on postbacks using scrollTop, but it's not working. I verified that the scrollTop() value is being set by displaying it in a TextBox.
On a page update, I change the text in that TextBox to the value of div2's scrollTop(). (working)
On page load, I want to set div2's scrollTop() to the previous value. (not working)
Can someone tell me what I'm doing wrong?
CSS:
.optionSelect {
font-family: Consolas;
overflow: hidden;
position: absolute;
width: 100%;
height: 245px;
}
.dataView {
overflow: auto;
position: absolute;
width: 100%;
top: 245px;
bottom: 0;
}
body {
overflow: auto;
width: 100%;
height: 100%;
}
Javascript:
var currentScroll = "<%=GetScrollPosition()%>"; // C# function to get scroll position value
$("div.dataStyle").scrollTop(currentScroll);
function beforePagePostback() {
$("#loadingImage").show();
var position = $("div.dataStyle").scrollTop();
$("#ScrollPositionTextBox").prop("value", position); // sets scroll position to text box
"<%=SetScrollPosition()%>"; // C# func that gets the scroll position from the text box
}

Not really an answer but your javascript says div.dataStyle and your css class is dataView. Are these supposed to be one and the same or is there something else we're not seeing?
Without C# but scrolltop is working: http://jsfiddle.net/ecarlsonweb/ys3LA/
var currentScroll = "40";
$(function(){
$("div.dataView").scrollTop(currentScroll);
});

The order my C# functions were being called was wrong.
I had to SetScrollPosition() before GetScrollPosition(). I thought that SetScrollPosition() would be called before the page load since beforePagePostback() is called before the page is updated.. but apparently not.

Adding Parameters to URL.Action in Razor

Hi all Currently I have a website that has a button and some javascript that creates a loading look and then runs this actionresult. I want to add parameters to actionresult but not sure how to do it. Thanks! Here is my code
Controller:
[HttpPost]
public ActionResult PostMethod(string MyText)
{
System.Threading.Thread.Sleep(5000);
return Json("And were done");
}
View:
<input type="text" name="MyTextBlock"/>
<p id="PID">
Default message from declarative syntax.
</p>
<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
opacity: .8; filter: alpha(opacity=70);display:none" >
<p style="position: absolute; top: 30%; left: 45%; color: White;" align="center">
<img src="../../Content/themes/base/images/ajax-loading.gif"><br />
Loading, please wait...
</p>
</div>
<button onclick="JavascriptFunction();">HTTPPost Button</button>
<script type="text/javascript" language="javascript">
function JavascriptFunction() {
var url = '#Url.Action("PostMethod", "MyTextBlock", new { MyText = "john" })';
$("#divLoading").show();
$.post(url, null,
function (data) {
$("#PID")[0].innerHTML = data;
$("#divLoading").hide();
});
}
</script>
What I want to do is pass MyTextBox into PostMethod to use it as MyText. Some of the other examples I have seen hardcode in values where I want it to be from the textbox. Any help is greatly appreciated. Thanks!

Razor is generated before page load, so if you want a textbox after the page is loaded you need to use javascript (that is to say if the end-user will be changing the value of MyTextBox and you want to pass this new value using AJAX).
Instead of passing null as your data argument in $.post, this is where you would grab the value of MyTextBox and pass it to the action. For example:
var url = '#Url.Action("PostMethod")';
var data = $('input[name="MyTextBox"]').serialize();
$.post(url, data, function(data){
});

It seems like you're trying to hand code a lot of what MVC already handles for you. Try this out...
First out, create a model for your view. You can call this whatever you want. Put the properties that you want as your parameters to your action method in here.
YourModel.cs
public class YourModel
{
public string MyText { get;set; }
}
For your controller, you'll have to change two things. The GET action for the page will need a model passed to it, like shown below.
For the POST action, change your string MyText parameter to YourModel model. This will allow MVC to bind your inputs on your view to the model.
Action Method
public class YourController
{
[HttpGet]
public ActionResult PostMethod()
{
YourModel model = new YourModel();
return View(model);
}
[HttpPost]
public ActionResult PostMethod(YourModel model)
{
//Do something with model.MyText;
System.Threading.Thread.Sleep(5000);
return Json("And We're Done");
}
}
PostMethod.cshtml
//THIS LINE HERE IS THE MOST IMPORTANT
#model YourNamespace.YourModel
//Ajax will handle most of the calling and showing of your elements if you tell it what to do!
#using(Ajax.BeginForm(new AjaxOptions(){ LoadingElementId="divloading", OnSuccess="OnSuccessFunction" }))
{
<input type="text" name="MyText"/>
//Quick note: If you decide to hand code your html, make sure your <input/> name attributes match the property names on your model object.
//Or here you could do #Html.TextBoxFor(m => m.MyText)
<p id="PID">
Default message from declarative syntax.
</p>
<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px;
top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001;
opacity: .8; filter: alpha(opacity=70);display:none" >
<p style="position: absolute; top: 30%; left: 45%; color: White;" align="center">
<img src="../../Content/themes/base/images/ajax-loading.gif"><br />
Loading, please wait...
</p>
</div>
<input type="submit" name="Submit" value="HTTPPost Button"/>
<script type="text/javascript" language="javascript">
function OnSuccessFunction(data, textStatus, jqXHR){
$("#PID")[0].innerHtml = data;
}
</script>
}
Some benefits of doing it this way is now your JS doesn't have to change if you add more properties to your model. You just add another input to your view using either the HtmlHelper or hand code the input name with the name attribute equal to the name of the property on your model. MVC will handle the rest.