I have a simple MVC form: First name, Email Address which are both required. If the user hits the submit button I would like to display a graphic next to the textboxes that failed validation.
I am using Data Annotations and Validation summary already.
Thank you!
I would try something like this:
//ViewModelClass
public class yourViewModel
{
//...
bool showPictureName {get;set;}
}
//controller
{
//...
var NameErrors = ModelState["yourViewModel.Name"].Errors;
if(!Modelstate.IsValid)
{
// put your code here
if(NameErrors.Count() != 0)
yourViewModelObject.showPictureName = true;
}
}
//View
#{ if(Model.showPictureName == true)
<img .../>
}
Related
<BitDatePicker #bind-Value="Model.Date"
AllowTextInput="true"
DateFormat="yyyy/M/d"
GoToToday="امروز" Placeholder="تاریخ را وارد کنید"
Culture="PersianCultureHelper.GetFaIrCultureByFarsiNames()"
Style="width:150px; display:inline-block;">
</BitDatePicker>
(https://i.stack.imgur.com/B45TB.png)
how to change(modify) the default validation message of this component?
I create a class that inherits from "ValidationAttribute" to override the error message by custom regex validation. but two messages show when the input is not valid.
I don't want to use "Require" attribute. it should show the message when the input is not valid.
Not that simple. It's hard coded into the component.
However there is a way.
BitDatePicker is a component that emulates a standard InputBase type component, though it doesn't implement InputBase. The validation message is generated in `TryParseValueFromString' which looks like this:
protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out DateTimeOffset? result, [NotNullWhen(false)] out string? validationErrorMessage)
{
if (value.HasNoValue())
{
result = null;
validationErrorMessage = null;
return true;
}
if (DateTime.TryParseExact(value, DateFormat ?? Culture.DateTimeFormat.ShortDatePattern, Culture, DateTimeStyles.None, out DateTime parsedValue))
{
result = new DateTimeOffset(parsedValue, DateTimeOffset.Now.Offset);
validationErrorMessage = null;
return true;
}
result = default;
validationErrorMessage = $"The {DisplayName ?? FieldIdentifier.FieldName} field is not valid.";
return false;
}
So we can create a child component and override TryParseValueFromString. Note that you have to "capture" the content generated in the parent and re-gurgitate it in the child.
MyBitDatePicker
#using System.Diagnostics.CodeAnalysis;
#inherits BitDatePicker
#this.ParentContent
#code {
public RenderFragment ParentContent;
public MyBitDatePicker()
{
ParentContent = (builder) => base.BuildRenderTree(builder);
}
/// <inheritdoc />
protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out DateTimeOffset? result, [NotNullWhen(false)] out string? validationErrorMessage)
{
var isValid = base.TryParseValueFromString(value, out result, out validationErrorMessage);
//Custom message defined here
validationErrorMessage = $"The {DisplayName ?? FieldIdentifier.FieldName} field ain't right!";
return false;
}
}
You could prevent the problem in the first place by disabling AllowTextInput. The user then can't select an invalid date.
We're currently using Umbraco version 7.1.4 assembly: 1.0.5261.28127 with Contour version 3.0.26
I'm trying to populate a contour form with information pulled from a database, but dependent on a user cookie (the cookie hold the primary key for the record in the database).
To implement this I'm looking at writing a custom field type (well a bunch of them, one for each data field) which examines the cookie makes the db request and then populates the textbox with the value (users name/address/etc).
I've managed to add custom setting to a control and have it display the value that's populated at design time, but I can't seem to amend that value at run time.
I'm happy to post the code if relevant, but my question is. Am I barking up the wrong tree? is this the best way to handle this or would it even work?
Any pointers would be most welcome
Thanks
EDIT
Thanks Tim,
I've now managed to break it in such a way it's not even rendering the controls (the debug message is saying the SVT value doesn't exist).
This just (or should) just populate the form with the current date/time just to get something working.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Umbraco.Forms.Core;
using System.Web.UI.WebControls;
namespace Custom.FieldType
{
public class CustomTextfield : Umbraco.Forms.Core.FieldType
{
public CustomTextfield()
{
//Provider
this.Id = new Guid("b994bc8b-2c65-461d-bfba-43c4b3bd2915");
this.Name = "Custom Textfield";
this.Description = "Renders a html input fieldKey"; //FieldType
this.Icon = "textfield.png";
this.SVT = DateTime.Now.ToLongTimeString();
}
public System.Web.UI.WebControls.TextBox tb;
public List<Object> _value;
[Umbraco.Forms.Core.Attributes.Setting("SVT", description = "the SVT")]
public string SVT { get; set; }
public override WebControl Editor
{
get
{
tb.TextMode = System.Web.UI.WebControls.TextBoxMode.SingleLine;
tb.CssClass = "text gaudete";
if (_value.Count > 0)
tb.Text = _value[0].ToString();
SVT = DateTime.Now.ToLongTimeString();
tb.Text = tb.Text + SVT;
return tb;
}
set { base.Editor = value; }
}
public override List<Object> Values
{
get
{
if (tb.Text != "")
{
_value.Clear();
_value.Add(tb.Text);
}
return _value;
}
set { _value = value; }
}
public override string RenderPreview()
{
return
"<input type=\"text\" id=\"text-content\" class=\"text\" maxlength=\"500\" value=\"" + this.SVT + "\" />";
}
public override string RenderPreviewWithPrevalues(List<object> prevalues)
{
return RenderPreview();
}
public override bool SupportsRegex
{
get { return true; }
}
}
}
And the view is
#model Umbraco.Forms.Mvc.Models.FieldViewModel
#{
var widthSetting = Model.AdditionalSettings.FirstOrDefault(s => s.Key.Equals("Width"));
string width = (widthSetting == null) ? null : widthSetting.Value;
var textSetting = Model.AdditionalSettings.FirstOrDefault(s => s.Key.Equals("SVT"));
string widthTXT = (textSetting == null) ? null : textSetting.Value;
}
<input type="text" name="#Model.Name" id="#Model.Id" class="text" maxlength="500"
value="#{if(!string.IsNullOrEmpty(widthTXT)){<text>#(SVT)</text>}}"
#{if(Model.Mandatory || Model.Validate){<text>data-val="true"</text>}}
#{if (Model.Mandatory) {<text> data-val-required="#Model.RequiredErrorMessage"</text>}}
#{if (Model.Validate) {<text> data-val-regex="#Model.InvalidErrorMessage" data-regex="#Model.Regex"</text>}}
/>
The code is mostly cobbled together from online tutorials which is why the naming is abysmal but if I can get something to populate the text box on the clients side then I can start the process of refactoring (well scrapping this demo version and writing a real version)
Thanks.
EDIT2
I was able to fix the error stopping the view loading thanks to the pointer from Tim, the new view looks as follows
#model Umbraco.Forms.Mvc.Models.FieldViewModel
#{
var textSetting = Model.AdditionalSettings.FirstOrDefault(s => s.Key.Equals("SVT"));
string widthTXT = (textSetting == null) ? null : textSetting.Value;
}
<input type="text" name="#Model.Name" id="#Model.Id" class="text" maxlength="500"
value="#{if(!string.IsNullOrEmpty(widthTXT)){<text>#(widthTXT)</text>}else{<text>Unknown</text>}}"
#{if(Model.Mandatory || Model.Validate){<text>data-val="true"</text>}}
#{if (Model.Mandatory) {<text> data-val-required="#Model.RequiredErrorMessage"</text>}}
#{if (Model.Validate) {<text> data-val-regex="#Model.InvalidErrorMessage" data-regex="#Model.Regex"</text>}}
/>
And just displays "Unknown" in the text box
thanks again.
Currently using the Kendo UI AutoCompleteFor() and ComboBoxFor() helper.
Noticing that they generate/render a bunch of <li>s.
How does one add additional custom data-* attributes to those <li>s?
Here's the current scenario:
The user starts typing stuff in the AutoCompleteFor
An ajax call is triggered to fetch some data related to what the
user has typed.
The obtained results are transformed into an
IEnumerable<SelectListItem>.
The result is then sent to Json. Json(result, JsonRequestBehavior.AllowGet)
My goal is to add one or more additional data-* attribute to each of these <li> generate lines so that I can fetch these data-* in the onChange() event.
How does one achieve this?
In addition, I'm aware that I could create my own .Template() and possibly achieve my task but I was curious if anyone knows of a different way to do this then having to create my own template.
Sincerely
Ok I've found a solution; I'll share it here in case anyone is interested.
Instead of transforming my obtained results into an IEnumerable<SelectListItem>, I simply transform this into an IEnumerable<CustomDTO>.
The CustomDTO class looks like this:
public class CustomDTO
{
public int Value { get; set; }
public string Text { get; set; }
public int Age { get; set; }
//Add whatever more properties you think you’ll need.
}
In my controller, I then do the following:
var result = _myService.GetData().ToList();
return Json(result, JsonRequestBehavior.AllowGet);
Where GetData() returns an IEnumerable<CustomDTO>.
Inside my View, I have an AutoCompleteFor() control to which I bind a client side
.Events(x => x.Select("onSelect") event handler.
The handler is defined like so:
function onSelect(e)
{
if (e.item == null) return;
var dataItem = this.dataItem(e.item.index());
var valueAttribute = dataItem.Value;
var textAttribute = dataItem.Text;
var ageAttribute = dataItem.Age; //This is how I get my additional value
//...code...
}
So that's it.
I've been following this guide on creating custom display attributes (specifically extra html attributes) to apply to the properties in my ViewModel. I have overridden both String and Boolean in the EditorTemplates folder. The editor template checks to see if a value has been set/the display attribute has been used - and adds the additional html attributes.
I'm getting stuck on the Boolean override when performing an edit action though. Regardless of whether or not I apply the attribute to a string, the ViewModel always maps with the correct existing data. This isn't true with any other form input type, due to the way the templates have been written by changing the type attribute inside a TextBoxFor.
I've been writing this primarily because I have been digging into knockout, and wanted an easy way to apply the data-bind attribute to strongly-typed views - if there's a better way please let me know!
Attribute Code:
public class Knockout : Attribute
{
public string DataBind { get; set; }
public string InputType { get; set; }
/*
Example:
Knockout("checked: showUploader", "checkbox")
Adds the HTML attributes data-bind="checked: showUploader" type="checkbox"
*/
public Knockout(string dataBind, string inputType)
{
this.DataBind = dataBind;
this.InputType = inputType;
}
public Dictionary<string, object> OptionalAttributes()
{
var options = new Dictionary<string, object>();
if(!string.IsNullOrWhiteSpace(DataBind))
{
options.Add("data-bind", DataBind);
}
if (!string.IsNullOrWhiteSpace(InputType))
{
options.Add("type", InputType);
}
return options;
}
}
Template Code
#using CumbriaMD.Infrastructure.ViewModels.DisplayAttributes
#{
var key = "Knockout";
}
#if (ViewData.ModelMetadata.AdditionalValues.ContainsKey(key))
{
var knockout = ViewData.ModelMetadata.AdditionalValues[key] as Knockout;
#Html.TextBoxFor(model => model, knockout.OptionalAttributes())
}
else
{
/*
When the attribute is not present, the default action is the following - which seems to
be overriding the data mapped from the database:
*/
#Html.TextBoxFor(model => model, new { type="checkbox" })
}
Found the answer nested in this beauty of a question!
My working template for boolean values now looks like:
#using CumbriaMD.Infrastructure.ViewModels.DisplayAttributes
#{
var key = "Knockout";
bool? value = null;
if(ViewData.Model != null)
{
value = Convert.ToBoolean(ViewData.Model, System.Globalization.CultureInfo.InvariantCulture);
}
}
#if (ViewData.ModelMetadata.AdditionalValues.ContainsKey(key))
{
var knockout = ViewData.ModelMetadata.AdditionalValues[key] as Knockout;
#Html.CheckBox("", value ?? false, knockout.OptionalAttributes())
}
else
{
#Html.CheckBox("", value ?? false, new { #class = "check-box" })
}
I have a partial view in which there is a form. I POST this form using the PRG pattern. I am using the AjaxHelper to create my form. I also need this form to work without javascript. The problem is that when model validation fails, it always changes the url to my partial view.
public ActionResult PostForm(PostFormModel postFormModel)
{
if (ModelState.IsValid)
{
return RedirectToAction("SomewhereElse");
}
else
{
if (Request.IsAjaxRequest())
{
return PartialView("_PostForm")
}
else
{
// What do I do here?
}
}
}
Here's what I have tried:
return PartialView("_PostForm", postFormModel);
This just renders the partial view and doesn't contain any of the parent stuff.
return View("Index", new ParentModel() { PostFormModel = postFormModel });
This actually produces the correct result. It displays the parent view, but the URL is that of the partial http://localhost:22485/Controller/PostForm! I feel like this is really close to the solution. What now?
If you want to change url, you should redirect to another action (using PRG pattern). Insert next code instead of '// What do I do here?':
postModelService.Save(postFormModel); //to Session or to DB
return RedirectToAction("Parent");
New action should look like this:
public ActionResult Parent()
{
var postFormModel = postModelService.Load();
return View("Index", new ParentModel() { PostFormModel = postFormModel });
}
Hope it helps.