public IFormFile UploadedImage { get; set; }
<div class="form-group row">
<label asp-for="UploadedImage" class="ml-2">Image</label>
<input asp-for="UploadedImage" class="form-control" type="file"/>
<span asp-validation-for="UploadedImage" class="text-danger"></span>
</div>
Currently user can upload anything, which will lead to awful things in backend.
Is there any easy straightforward way to allow uploading only images? Looking online some solutions look absolutely terrifying, but they are 5+ years old, so maybe .NET got better way to do it.
Like [Image] attribute or something.
You can try to use accept attribute.
Here is a demo:
View:
<div class="form-group row">
<label asp-for="UploadedImage" class="ml-2">Image</label>
<input asp-for="UploadedImage" class="form-control" type="file" accept="image/png, image/jpeg, image/gif"/>
<span asp-validation-for="UploadedImage" class="text-danger"></span>
</div>
When you click choose file,you can only see and select with .png,.jpeg,.gif type file.
Here is my files:
And when I click choose files:
Related
I am building this FormControls widget and have added some controls like sf-html-field and sf-image-field. I am at the point where I want to add the Choices and not sure how best to do that. I want to it work the same way the built-in MultipleChoiceField control work.
DesignerView.Simple
<form>
<div class="form-group">
<label for="heading-text">Label (Question)</label>
<sf-html-field class="kendo-content-block"
sf-model="properties.Question.PropertyValue">
</sf-html-field>
</div>
<div class="form-group">
<label for="image-field" class="m-top-sm">#Html.Resource("Image")</label>
<sf-image-field class="sf-Media--info modal-settings modal-settings-space"
sf-model="properties.ImageId.PropertyValue"
sf-image="selectedImage"
sf-provider="properties.ImageProviderName.PropertyValue"
sf-media-settings="#SettingsHelpers.GetMediaSettings("Image")"
id="image-field">
</sf-image-field>
</div>
<div class="form-group">
<label for="heading-text">Choices</label>
</div>
</form>
You can see the implementation of the default designer view here:
https://github.com/Sitefinity/feather-widgets/blob/master/Telerik.Sitefinity.Frontend.Forms/Mvc/Views/MultipleChoiceField/DesignerView.Simple.cshtml#L20-L64
I have a form control "ConnectorType" which I turned into a dropdown list with pre-defined values (just 3qty currently)
When the user selects and item from this dropdown list, depending on the value selected I then want to populate another text box form control underneath.
To better explain, please see image below:
Example, if TCP Server IN is selected then the form control underneath (textbox)should automatically say "Inbound"
Ideally this text box should also have an attribute/configuration that prevents the user from entering their own text, grayed out perhaps. Once the create form is submitted, the textbox that contains this value "Inbound" will then be added to the SQL Table using Enitity Framework.
The solution requires that this field dynamically changes each time a new item is selected from the list.
Current code for the drop down list:
Page Model Class:
public IEnumerable<SelectListItem> ConnectorTypeList { get; private set; } // temp
public IActionResult OnGet()
{
// prepare the list in here
ConnectorTypeList = new SelectListItem[]
{
new SelectListItem ("TCP Server IN", "TCP Server IN"),
new SelectListItem ("TCP Server OUT", "TCP Server OUT"),
new SelectListItem ("SMTP Server IN", "SMTP Server IN")
};
return Page();
}
Page View:
<div class="form-group">
<label asp-for="ConnectorModel.ConnectorType" class="control-label"></label>
<select asp-for="ConnectorModel.ConnectorType" class="form-control" asp-items="#Model.ConnectorTypeList"></select>
<span asp-validation-for="ConnectorModel.ConnectorType" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ConnectorModel.DataFlow" class="control-label"></label>
<input asp-for="ConnectorModel.DataFlow" class="form-control" />
<span asp-validation-for="ConnectorModel.DataFlow" class="text-danger"></span>
</div>
Note the current form-control I'm wanting to modify is the "ConnectorModel.DataFlow" in the above page view code. At the moment it's just a simple textbox that the user can enter their own choice of text.
I'm going round in circles having read up on page handlers etc. It seems there is a onchange event but unsure how to implement this and somehow link it back to the page model class, run a method then postback the result. I'm not looking for a JQuery script as it seems this should not be required in the newer framework, not sure I just don't want a complicated long solution given I will be using a lot of these throughout the app. Thanks in advance...
The easiest way is to use onchange() on your <select> tag and assign data to input using js.(Add id attribute for <select> and <input> before)
If you would like to prevent the user from entering their own text, just use readonly attribute for you input.
<input asp-for="DataFlow" id="dataFlow" class="form-control" readonly/>
The Sample Page View:
<div class="row">
<div class="col-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="ConnectorModel.ConnectorType" class="control-label"></label>
<select asp-for="ConnectorModel.ConnectorType" id="connectorTypeList" class="form-control" asp-items="#Model.ConnectorTypeList" onchange="assignData()">
<option>Select ConnectorType</option>
</select>
<span asp-validation-for="ConnectorModel.ConnectorType" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ConnectorModel.DataFlow" class="control-label"></label>
<input asp-for="ConnectorModel.DataFlow" id="dataFlow" class="form-control" readonly />
<span asp-validation-for="ConnectorModel.DataFlow" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
#section Scripts{
<script>
function assignData() {
var contentType = $("#connectorTypeList").val();
if (contentType == "TCP Server IN") {
$("#dataFlow").val("Inbound");
}
}
</script>
}
I'm trying to add an input-addon to a form input using Bootstrap 3 but it doesn't display the errros correctly. This is my html code:
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="input-group">
<input type="text" id="addTax_rate" class="form-control">
<span class="input-group-addon">%</span>
</div>
The input group displays correctly without errors, but when I add the has-errors class to it, it comes to this:
What am I doing wrong? Thanks
I am working on an ASP.NET MVC 4 Project. I want to style data validation errors on my login page with Bootstrap 3.0. When I debug the page and it gives data validation errors, this codes are disappeared in source of my login form:
<form action="/Account/Login" class="col-md-4 col-md-offset-4 form-horizontal well" method="post"><input name="__RequestVerificationToken" type="hidden" value="Zbg4kEVwyQf87IWj_L4alhiHBIpoWRCJ9mRWXF6syGH4ehg9idjJCqRrQTMGjONnywMGJhMFmGCQWWvBbMdmGFSUPqXpx6XaS4YfpnbFm8U1" /><div class="validation-summary-errors"><ul><li>The user name or password provided is incorrect.</li>
</ul></div> <div class="form-group control-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="User name alanı gereklidir." id="UserName" name="UserName" placeholder="Kullanıcı Adı" type="text" value="" />
<span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">User name alanı gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="Password alanı gereklidir." id="Password" name="Password" placeholder="Şifre" type="password" />
<span class="field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true">Password alanı gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-4">
<button class="btn btn-default" type="submit">Giriş Yap</button>
</div>
</div>
</form>
How can I style these errors like "for=inputError" property of label with Bootstrap 3?
As it's shown in Bootstrap's docs, you need to apply class has-error to the div that contains the input and has class form-group:
<div class="form-group has-error">
...
</div>
It's a quite ugly to write a condition for each property you want to check and apply class has-error depending on the results of that condition, though you can do it like so:
<div class="form-group #(Html.ViewData.ModelState.IsValidField(Html.IdFor(x => x.UserName)) ? null : "has-error" )">
This takes care of the server side validation. However, there is also client side validation you need to think about. For that you'd need to write some jQuery that would check for existence of class field-validation-error and apply class has-error depending on the result.
You may do it all your self, though I suggest checking out TwitterBootstrapMVC which does all of that automatically for you. All you'd have to write is:
#Html.Bootstrap().FormGroup().TextBoxFor(m => m.UserName)
Disclaimer: I'm the author of TwitterBootstrapMVC. Using it in Bootstrap 2 is free. For Bootstrap 3 it requires a paid license.
I'm using MVC4 but I imagine this is an issue for anyone using the new Bootstrap 3 version. Since form-control is now width:100% by default, what is the best practice for placing validation messages?
In version 2.x, placing the validation messages in the help-inline span just after the input control worked best to ensure that the message was placed to the right of the control.
But in version 3, they always get pushed to the bottom making all the controls shift down because the validation messages are forced under the control.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
<span class="help-inline"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></span>
</div>
</div>
I've considered manually setting them on a new column like this (below) but wondering if there was a more acceptable way or a less manual way of dealing with this.
<div class="form-group has-error">
<label for="Label" class="col-lg-2 control-label">Label</label>
<div class="col-lg-5">
<input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
</div>
<div class="col-lg-5">
<p class="form-control-static"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></p>
</div>
</div>
I wouldn't say there are "best practices" for presenting form validation errors. It's more of a personal design choice.
Depending on how much JS you want to write, you could get a little slick and insert an input group addon which holds an error message in a tooltip icon, like so...
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">
<i data-toggle="tooltip" title="Error msg here" data-container="body" class="glyphicon glyphicon-question-sign"></i>
</span>
</div>
Honestly though, I think messages appearing below input fields are fine, as long as they don't disturb page layout and push content down when they appear. (Which is just a matter of having a container that displays block and has a a hard-coded height.)