I wanna display error message with success image(green tick mark) and failure image(Red warning) in validation summary. how to do this.
and i validation summary i will have to display some text in bold, italics etc. for that i tried to pass string like this.
inValid <b>username</b> or <b>password</b>
But in the page its rendering as it is. it is not showing username and password in bold. is there any way to do that. I am getting this validation error messages in controller and adding this to ModelState.add(error);
The ValidationSummary helper HTML encodes by default all messages. You could write a custom helper which doesn't HTML encode:
public static class HtmlExtensions
{
public static MvcHtmlString MyValidationSummary(this HtmlHelper htmlHelper, bool excludePropertyErrors, string message)
{
var formContext = htmlHelper.ViewContext.ClientValidationEnabled ? htmlHelper.ViewContext.FormContext : null;
if (formContext == null && htmlHelper.ViewData.ModelState.IsValid)
{
return null;
}
string messageSpan;
if (!string.IsNullOrEmpty(message))
{
TagBuilder spanTag = new TagBuilder("span");
spanTag.InnerHtml = message;
messageSpan = spanTag.ToString(TagRenderMode.Normal) + Environment.NewLine;
}
else
{
messageSpan = null;
}
var htmlSummary = new StringBuilder();
var unorderedList = new TagBuilder("ul");
IEnumerable<ModelState> modelStates = null;
if (excludePropertyErrors)
{
ModelState ms;
htmlHelper.ViewData.ModelState.TryGetValue(htmlHelper.ViewData.TemplateInfo.HtmlFieldPrefix, out ms);
if (ms != null)
{
modelStates = new ModelState[] { ms };
}
}
else
{
modelStates = htmlHelper.ViewData.ModelState.Values;
}
if (modelStates != null)
{
foreach (ModelState modelState in modelStates)
{
foreach (ModelError modelError in modelState.Errors)
{
var errorText = modelError.ErrorMessage;
if (!String.IsNullOrEmpty(errorText))
{
var listItem = new TagBuilder("li");
listItem.InnerHtml = errorText;
htmlSummary.AppendLine(listItem.ToString(TagRenderMode.Normal));
}
}
}
}
if (htmlSummary.Length == 0)
{
htmlSummary.AppendLine(#"<li style=""display:none""></li>");
}
unorderedList.InnerHtml = htmlSummary.ToString();
var divBuilder = new TagBuilder("div");
divBuilder.AddCssClass((htmlHelper.ViewData.ModelState.IsValid) ? HtmlHelper.ValidationSummaryValidCssClassName : HtmlHelper.ValidationSummaryCssClassName);
divBuilder.InnerHtml = messageSpan + unorderedList.ToString(TagRenderMode.Normal);
if (formContext != null)
{
// client val summaries need an ID
divBuilder.GenerateId("validationSummary");
formContext.ValidationSummaryId = divBuilder.Attributes["id"];
formContext.ReplaceValidationSummary = !excludePropertyErrors;
}
return MvcHtmlString.Create(divBuilder.ToString(TagRenderMode.Normal));
}
}
Now you have the possibility to use HTML tags in your validation messages:
ModelState.AddModelError("user", "invalid <b>username</b> or <b>password</b>");
and then:
<%= Html.MyValidationSummary(true, null) %>
Obviously by doing this you should ensure that your error messages contain valid HTML structure.
There is no doubt that #Darin Dimitrov answer is the best practice. but as a newbie i am gaining that functionaliy by using ViewBag
Inside Controller
if(true) //All is well and success msg is to be sent
{
ViewBag.Errors = null;
ViewBag.Success = "<b>Login</b> is Successful";
//Redirect
}
else
{
ViewBag.Errors = "<b>Some Error messages</b>";
ViewBag.Success = null;
}
Inside View()
#if(ViewBag.Errors != null)
{
<div class="error">#Html.Raw(#ViewBag.Errors)</div>
}
#if(ViewBag.Success != null)
{
<div class="success">#Html.Raw(#ViewBag.Success)</div>
}
Now the Css
.error { color: red; background-image:error_image.png; }
.success { color:green; background-image : success_image.png; }
Related
This is my update, i added a debugging point at the ImageUrl null check and even tho there is already an ImageUrl it says its null
ublic IActionResult Upsert(ProductVM obj,IFormFile file)
{
if (ModelState.IsValid)
{
string wwwRootPath = _hostEnvironment.WebRootPath;
if (file != null)
{
string fileName = Guid.NewGuid().ToString();
var uploads = Path.Combine(wwwRootPath, #"Images\products");
var extention = Path.GetExtension(file.FileName);
if (obj.Product.ImageUrl != null)
{
var oldImagePath = Path.Combine(wwwRootPath,obj.Product.ImageUrl.TrimStart('\\'));
if (System.IO.File.Exists(oldImagePath))
{
System.IO.File.Delete(oldImagePath);
}
}
using (var fileStreams = new FileStream(Path.Combine(uploads, fileName + extention), FileMode.Create))
{
file.CopyTo(fileStreams);
}
obj.Product.ImageUrl = #"\Images\products\" + fileName + extention;
}
if (obj.Product.Id == 0)
{
_unitOfWork.Product.Add(obj.Product);
}
else
{
_unitOfWork.Product.Update(obj.Product);
}
_unitOfWork.Save();
TempData["success"] = "Produs adaugat cu succes!";
return RedirectToAction("Index");
}
return View(obj);
}
enter image description here
Go to your upsert view:
Insert hidden field on your view:
<input asp-for="Product.ImageUrl" hidden />
Insert this on the upsert view
I have a web application utilizing master pages. For some reason, when I add a buttonclick event, the method is never hit. The page goes through the normal page_load events. How do I get my button click event to fire? Previously, This worked just fine, now this is happening in my whole application where the !page.IsPostBack always evaluates false from a button_Click
I have tried adding script Handlers and that doesnt seem to help
in the UI page:
<asp:Button ID="Button1" CssClass="btn btn-primary"
OnClick="putAccoutDetail" runat="server" Text="Save Changes" />
in the CodeBehind
protected void Page_Load(object sender, EventArgs e)
{
if (Session["Authenticated"] == null ||
Session["Authenticated"].ToString() != "true")
{
Response.Redirect("~/Login.aspx");
}
if (!Page.IsPostBack)
{
if (Session["UserID"] != null)
{
UserID = Convert.ToInt32(Session["UserID"]);
getUserData(UserID);
}
}
}
public void putAccoutDetail(object sender, EventArgs e)
{
string statusMsg = string.Empty;
var userInfo = db.UserMasts.FirstOrDefault(s => s.ID == UserID);
if (userInfo != null)
{
userInfo.UserName = txtUserName.Text;
userInfo.MilEmail = txtEmail.Text;
string base64 = Request.Form["imgCropped"];
if (base64.Length > 0)
{
byte[] bytes = Convert.FromBase64String(base64.Split(',')[1]);
String fileName = Guid.NewGuid().ToString() + ".png";
userInfo.PhotoPath = fileName;
ImagePhoto.ImageUrl = "/Images/Users/" + userInfo.PhotoPath;
using (FileStream stream = new FileStream(Server.MapPath("~/Images/Users/" + fileName), FileMode.Create))
{
stream.Write(bytes, 0, bytes.Length);
stream.Flush();
}
}
}
try
{
dHelper.LogAction("Update User Detail : " + userInfo.UserName);
db.SubmitChanges();
statusMsg = "Successfully Updated";
lblstatusMsg.Text = statusMsg;
lblstatusMsg.Visible = true;
}
catch(Exception ex)
{
statusMsg = "Update Failed";
lblstatusMsg.Text = statusMsg;
lblstatusMsg.Visible = true;
}
}
The issue was that the form had unhandled ASP validators on certain fields. I added a validation group to those and then handled them in the button_Click and all is working
I got an MVC 5 application that i'm porting to asp.net Core.
In the MVC application call to controller we're made using AngularJS $resource (sending JSON) and we we're POSTing data doing :
ressource.save({ entries: vm.entries, projectId: vm.project.id }).$promise...
that will send a JSON body like:
{
entries:
[
{
// lots of fields
}
],
projectId:12
}
the MVC controller looked like this :
[HttpPost]
public JsonResult Save(List<EntryViewModel> entries, int projectId) {
// code here
}
How can I replicate the same behaviour with .NET Core since we can't have multiple [FromBody]
you cannot have multiple parameter with the FromBody attibute in an action method. If that is need, use a complex type such as a class with properties equivalent to the parameter or dynamic type like that
[HttpPost("save/{projectId}")]
public JsonResult Save(int projectId, [FromBody] dynamic entries) {
// code here
}
As pointed out in the comment, one possible solution is to unify the properties you're posting onto a single model class.
Something like the following should do the trick:
public class SaveModel
{
public List<EntryViewModel> Entries{get;set;}
public int ProjectId {get;set;}
}
Don't forget to decorate the model with the [FromBody] attribute:
[HttpPost]
public JsonResult Save([FromBody]SaveViewModel model)
{
// code here
}
Hope this helps!
It's still rough but I made a Filter to mimic the feature.
public class OldMVCFilter : IActionFilter
{
public void OnActionExecuted(ActionExecutedContext context)
{
}
public void OnActionExecuting(ActionExecutingContext context)
{
if (context.HttpContext.Request.Method != "GET")
{
var body = context.HttpContext.Request.Body;
JToken token = null;
var param = context.ActionDescriptor.Parameters;
using (var reader = new StreamReader(body))
using (var jsonReader = new JsonTextReader(reader))
{
jsonReader.CloseInput = false;
token = JToken.Load(jsonReader);
}
if (token != null)
{
var serializer = new JsonSerializer();
serializer.DefaultValueHandling = DefaultValueHandling.Populate;
serializer.FloatFormatHandling = FloatFormatHandling.DefaultValue;
foreach (var item in param)
{
JToken model = token[item.Name];
if (model == null)
{
// try to cast the full body as the current object
model = token.Root;
}
if (model != null)
{
model = this.RemoveEmptyChildren(model, item.ParameterType);
var res = model.ToObject(item.ParameterType, serializer);
context.ActionArguments[item.Name] = res;
}
}
}
}
}
private JToken RemoveEmptyChildren(JToken token, Type type)
{
var HasBaseType = type.GenericTypeArguments.Count() > 0;
List<PropertyInfo> PIList = new List<PropertyInfo>();
if (HasBaseType)
{
PIList.AddRange(type.GenericTypeArguments.FirstOrDefault().GetProperties().ToList());
}
else
{
PIList.AddRange(type.GetTypeInfo().GetProperties().ToList());
}
if (token != null)
{
if (token.Type == JTokenType.Object)
{
JObject copy = new JObject();
foreach (JProperty jProp in token.Children<JProperty>())
{
var pi = PIList.FirstOrDefault(p => p.Name == jProp.Name);
if (pi != null) // If destination type dont have this property we ignore it
{
JToken child = jProp.Value;
if (child.HasValues)
{
child = RemoveEmptyChildren(child, pi.PropertyType);
}
if (!IsEmpty(child))
{
if (child.Type == JTokenType.Object || child.Type == JTokenType.Array)
{
// nested value has been checked, we add the object
copy.Add(jProp.Name, child);
}
else
{
if (!pi.Name.ToLowerInvariant().Contains("string"))
{
// ignore empty value when type is not string
var Val = (string)child;
if (!string.IsNullOrWhiteSpace(Val))
{
// we add the property only if it contain meningfull data
copy.Add(jProp.Name, child);
}
}
}
}
}
}
return copy;
}
else if (token.Type == JTokenType.Array)
{
JArray copy = new JArray();
foreach (JToken item in token.Children())
{
JToken child = item;
if (child.HasValues)
{
child = RemoveEmptyChildren(child, type);
}
if (!IsEmpty(child))
{
copy.Add(child);
}
}
return copy;
}
return token;
}
return null;
}
private bool IsEmpty(JToken token)
{
return (token.Type == JTokenType.Null || token.Type == JTokenType.Undefined);
}
}
I'm testing a list of things for null. Every time I find one, I save it in an array to implement it in a validationmessage.
Output I want looks like this:
Field 1 is required
Field 4 is required
etc...
But I can't seem to be able to start a new line.
Now, it looks like this:
Field 1 is required Field 4 is required
Does anybody know how to achieve this?
EDIT:
controller:
IDictionary<int, String> emptyFields = new Dictionary<int, String>();
foreach (Something thing in AnotherThing.Collection)
{
if (thing.Property == null)
emptyFields.add(thing.Index, thing.Name);
}
if (emptyFields.Any())
throw new CustomException() { EmptyFields = emptyFields };
This exception is handled here:
catch (CustomException ex)
{
ModelState.AddModelError("file", ex.GetExceptionString());
return View("theView");
}
CustomException:
public class CustomException: Exception
{
public IDictionary<int,String> EmptyFields { get; set; }
public override String Label { get { return "someLabel"; } }
public override String GetExceptionString()
{
String msg = "";
foreach (KeyValuePair<int,String> elem in EmptyFields)
{
msg += "row: " + (elem.Key + 1).ToString() + " column: " + elem.Value + "<br/>";
}
return msg;
}
}
view:
<span style="color: #FF0000">#Html.Raw(Html.ValidationMessage("file").ToString())</span>
You can do it with this one liner:
#Html.Raw(HttpUtility.HtmlDecode(Html.ValidationMessageFor(m => m.Property).ToHtmlString()))
You will need to write a custom helper to achieve that. The built-in ValidationMessageFor helper automatically HTML encodes the value. Here's an example:
public static class ValidationMessageExtensions
{
public static IHtmlString MyValidationMessageFor<TModel, TProperty>(
this HtmlHelper<TModel> htmlHelper,
Expression<Func<TModel, TProperty>> ex
)
{
var htmlAttributes = new RouteValueDictionary();
string validationMessage = null;
var expression = ExpressionHelper.GetExpressionText(ex);
var modelName = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(expression);
var formContext = htmlHelper.ViewContext.ClientValidationEnabled ? htmlHelper.ViewContext.FormContext : null;
if (!htmlHelper.ViewData.ModelState.ContainsKey(modelName) && formContext == null)
{
return null;
}
var modelState = htmlHelper.ViewData.ModelState[modelName];
var modelErrors = (modelState == null) ? null : modelState.Errors;
var modelError = (((modelErrors == null) || (modelErrors.Count == 0))
? null
: modelErrors.FirstOrDefault(m => !String.IsNullOrEmpty(m.ErrorMessage)) ?? modelErrors[0]);
if (modelError == null && formContext == null)
{
return null;
}
var builder = new TagBuilder("span");
builder.MergeAttributes(htmlAttributes);
builder.AddCssClass((modelError != null) ? HtmlHelper.ValidationMessageCssClassName : HtmlHelper.ValidationMessageValidCssClassName);
if (!String.IsNullOrEmpty(validationMessage))
{
builder.InnerHtml = validationMessage;
}
else if (modelError != null)
{
builder.InnerHtml = GetUserErrorMessageOrDefault(htmlHelper.ViewContext.HttpContext, modelError, modelState);
}
if (formContext != null)
{
bool replaceValidationMessageContents = String.IsNullOrEmpty(validationMessage);
builder.MergeAttribute("data-valmsg-for", modelName);
builder.MergeAttribute("data-valmsg-replace", replaceValidationMessageContents.ToString().ToLowerInvariant());
}
return new HtmlString(builder.ToString(TagRenderMode.Normal));
}
private static string GetUserErrorMessageOrDefault(HttpContextBase httpContext, ModelError error, ModelState modelState)
{
if (!String.IsNullOrEmpty(error.ErrorMessage))
{
return error.ErrorMessage;
}
if (modelState == null)
{
return null;
}
var attemptedValue = (modelState.Value != null) ? modelState.Value.AttemptedValue : null;
return string.Format(CultureInfo.CurrentCulture, "Value '{0}' not valid for property", attemptedValue);
}
}
and then:
public class MyViewModel
{
[Required(ErrorMessage = "Error Line1<br/>Error Line2")]
public string SomeProperty { get; set; }
}
and in the view:
#model MyViewModel
#using (Html.BeginForm())
{
#Html.EditorFor(x => x.SomeProperty)
#Html.MyValidationMessageFor(x => x.SomeProperty)
<button type="submit">OK</button>
}
And if you want to display the error message in a ValidationSummary you could also write a custom helper that will not HTML encode the error message as I have shown in this post.
try this one
append tag after each error message and use Html.Raw() method to display your content Html.Raw will decode HtmlContent.
you message like
Field 1 is required <br/>Field 4 is required<br/>
In View
Html.Raw("Yore Error Message")
In case anyone is looking for it, here is how to do this for a validation summary:
#Html.Raw(HttpUtility.HtmlDecode(Html.ValidationSummary(true).ToHtmlString()))
Appreciated I am a bit late to this party, but just had this issue and using plain old css also works well:
<style>
.field-validation-error::after {
content: "\a";
white-space: pre;
}
</style>
Are you displaying them in a validation summary? I don’t think it supports html for line breaks etc. I'd create a custom html helper based on validation summary that displays html.
The same applies to validationmessage so probably need to make a custom helper for that
what I do is bunch them in a div
<div class="Errors">
#Html.ValidationMessageFor(m => m.Name)<br/>
#Html.ValidationMessageFor(m => m.LName)<br />
</div>
then create a class
.Errors {
color: red;
font-size: 10px;
font-weight: bold;
}
but if you wanna do a multiline error then what Leinel mentioned is the best way.the reason I bunch them is some users will not see the error with long forms and they'll just start calling us.. ^^,
How can I display ModelState errors returned by JSON?
I want to do something like this:
if (!ValidateLogOn(Name, currentPassword))
{
ModelState.AddModelError("_FORM", "Username or password is incorrect.");
//Return a json object to the javascript
return Json(new { ModelState });
}
What must be my code in the view to read the ModelState errors and display them?
My actual code in the view to read the JSON values is as follows:
function createCategoryComplete(e) {
var obj = e.get_object();
alert(obj.Values);
}
This is draft code but the same idea works for me in production.
The main idea here is that Json errors have predefined tag names, that no normal objects will have. For errors validation errors HTML is re-created using JavaScript (both top summary and form elements highlighting).
Server side:
public static JsonResult JsonValidation(this ModelStateDictionary state)
{
return new JsonResult
{
Data = new
{
Tag = "ValidationError",
State = from e in state
where e.Value.Errors.Count > 0
select new
{
Name = e.Key,
Errors = e.Value.Errors.Select(x => x.ErrorMessage)
.Concat(e.Value.Errors.Where(x => x.Exception != null).Select(x => x.Exception.Message))
}
}
};
}
in action:
if (!ModelState.IsValid && Request.IsAjaxRequest())
return ModelState.JsonValidation();
Client side:
function getValidationSummary() {
var el = $(".validation-summary-errors");
if (el.length == 0) {
$(".title-separator").after("<div><ul class='validation-summary-errors ui-state-error'></ul></div>");
el = $(".validation-summary-errors");
}
return el;
}
function getResponseValidationObject(response) {
if (response && response.Tag && response.Tag == "ValidationError")
return response;
return null;
}
function CheckValidationErrorResponse(response, form, summaryElement) {
var data = getResponseValidationObject(response);
if (!data) return;
var list = summaryElement || getValidationSummary();
list.html('');
$.each(data.State, function(i, item) {
list.append("<li>" + item.Errors.join("</li><li>") + "</li>");
if (form && item.Name.length > 0)
$(form).find("*[name='" + item.Name + "']").addClass("ui-state-error");
});
}
$.ajax(... function(response) {
CheckValidationErrorResponse(xhr.responseText); } );
Why not return the original ModelState object to the client, and then use jQuery to read the values. To me it looks much simpler, and uses the common data structure (.net's ModelState)
C#:
return Json(ModelState);
js:
var message = "";
if (e.response.length > 0) {
$.each(e.response, function(i, fieldItem) {
$.each(fieldItem.Value.Errors, function(j, errItem) {
message += errItem.ErrorMessage;
});
message += "\n";
});
alert(message);
}
this is a tiny tweak to queen3's client side code which handles specific validation messages, and creates a similar document to that created by MVC3:
function getValidationSummary() {
var $el = $(".validation-summary-errors > ul");
if ($el.length == 0) {
$el = $("<div class='validation-summary-errors'><ul></ul></div>")
.hide()
.insertBefore('fieldset:first')
.find('ul');
}
return $el;
}
function getResponseValidationObject(response) {
if (response && response.Tag && response.Tag == "ValidationError")
return response;
return null;
}
function isValidationErrorResponse(response, form, summaryElement) {
var $list,
data = getResponseValidationObject(response);
if (!data) return false;
$list = summaryElement || getValidationSummary();
$list.html('');
$.each(data.State, function (i, item) {
var $val, lblTxt, errorList ="";
if (item.Name) {
$val = $(".field-validation-valid,.field-validation-error")
.first("[data-valmsg-for=" + item.Name + "]")
.removeClass("field-validation-valid")
.addClass("field-validation-error");
$("input[name=" + item.Name + "]").addClass("input-validation-error")
lblTxt = $("label[for=" + item.Name + "]").text();
if (lblTxt) { lblTxt += ": "; }
}
if ($val.length) {
$val.text(item.Errors.shift());
if (!item.Errors.length) { return; }
}
$.each(item.Errors, function (c,val) {
errorList += "<li>" + lblTxt + val + "</li>";
});
$list.append(errorList);
});
if ($list.find("li:first").length) {$list.closest("div").show(); }
return true;
}
See below for code with a few amendments to Brent's answer. CheckValidationErrorResponse looks for the Validation Summary regardless of whether it's in the valid or invalid state, and inserts it if not found. If validation errors are found in the response, it applies the validation-summary-errors class to the Summary, else it applies validation-summary-valid. It assumes CSS is present to control the visibility of the Summary.
The code clears existing instances of field-validation-error, and reapplies them for errors found in the response.
function getValidationSummary(form) {
var $summ = $(form).find('*[data-valmsg-summary="true"]');
if ($summ.length == 0)
{
$summ = $('<div class="validation-summary-valid" data-valmsg-summary="true"><ul></ul></div>');
$summ.appendTo(form);
}
return $summ;
}
function getValidationList(summary) {
var $list = $(summary).children('ul');
if ($list.length == 0) {
$list = $('<ul></ul>');
$list.appendTo(summary);
}
return $list;
}
function getResponseValidationErrors(data) {
if (data && data.ModelErrors && data.ModelErrors.length > 0)
return data.ModelErrors;
return null;
}
function CheckValidationErrorResponse(data, form, summaryElement) {
var errors = getResponseValidationErrors(data);
var $summ = summaryElement || getValidationSummary(form);
var $list = getValidationList($summ);
$list.html('');
$(form).find(".field-validation-error")
.removeClass("field-validation-error")
.addClass("field-validation-valid");
if (!errors)
{
$summ.removeClass('validation-summary-errors').addClass('validation-summary-valid');
return false;
}
$.each(errors, function (i, item) {
var $val, $input, errorList = "";
if (item.Name) {
$val = $(form).find(".field-validation-valid, .field-validation-error")
.filter("[data-valmsg-for=" + item.Name + "]")
.removeClass("field-validation-valid")
.addClass("field-validation-error");
$input = $(form).find("*[name='" + item.Name + "']");
if (!$input.is(":hidden") && !$val.length)
{
$input.parent().append("<span class='field-validation-error' data-valmsg-for='" + item.Name + "' data-valmsg-replace='false'>*</span>");
}
$input.addClass("input-validation-error");
}
$.each(item.Errors, function (c, err) {
errorList += "<li>" + err + "</li>";
});
$list.append(errorList);
});
$summ.removeClass('validation-summary-valid').addClass('validation-summary-errors');
return true;
}
C#
public class ValidateModelAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(HttpActionContext actionContext)
{
if (actionContext.ModelState.IsValid == false)
{
actionContext.Response = actionContext.Request.CreateErrorResponse(
HttpStatusCode.BadRequest, actionContext.ModelState);
}
}
}
JavaScript
$.ajax({
type: "GET",
url: "/api/xxxxx",
async: 'false',
error: function (xhr, status, err) {
if (xhr.status == 400) {
DisplayModelStateErrors(xhr.responseJSON.ModelState);
}
},
....
function DisplayModelStateErrors(modelState) {
var message = "";
var propStrings = Object.keys(modelState);
$.each(propStrings, function (i, propString) {
var propErrors = modelState[propString];
$.each(propErrors, function (j, propError) {
message += propError;
});
message += "\n";
});
alert(message);
};
If you are returning JSON, you cannot use ModelState. Everything that the view needs should be contained inside the JSON string. So instead of adding the error to the ModelState you could add it to the model you are serializing:
public ActionResult Index()
{
return Json(new
{
errorControl = "_FORM",
errorMessage = "Username or password is incorrect.",
someOtherProperty = "some other value"
});
}