I want to display text/label "Case sensitive" right next to my Captcha textbox.
Like this image
Currently, it is displaying below the textbox. How to align text next to textbox?
Here is my code :
<div class="form-group col-md-3">
#Html.TextBox("CaptchaCode", null, new { #class = "form-control" }) (Case sensitive)
</div>
You could just define it as text and add " " like so:
<div class="form-group col-md-3">
#Html.TextBox("CaptchaCode", "", new { #class = "form-control" }) <text>(Case Sensitive)</text>
</div>
This should work fine. Alternatively you can add a placeholder:
<div class="form-group col-md-3">
#Html.TextBox("CaptchaCode", "", new { #class = "form-control" }, new { placeholder = "Case Sensitive"})
</div>
Related
In my ASP.NET MVC application, There are two combo boxes.
1st combo box contains the companies and with the selection, the second combo box loads the values.
Here when the user selects a value from the second combo box I need to get that value Id to the jQuery.
So far in my code, the selected value comes after the next selection. As an example, If I clicked a value, and again click another value then I get the ID of my previous selected value.
Can I get help to fix that, I need to get the selected value from the second combo box.
This is the HTML code
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group"> #Html.LabelFor(model => model.CompanyID, htmlAttributes: new { #class = "control-label col-md-6" }) <div class="col-sm-8"> #Html.DropDownListFor(model => model.CompanyID, Model.CompanyLists, "Select Company List", new { #id = "ddlComTypes" + Model.TempID, #class = "js-dropdown js-Com", #data_map = Model.TempID }) #Html.ValidationMessageFor(model => model.CompanyID, "", new { #class = "text-danger" }) </div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group"> #Html.LabelFor(model => model.EmpId, htmlAttributes: new { #class = "control-label col-md-6" }) <div class="col-md-8"> #Html.DropDownListFor(model => model.EmpId, new List <SelectListItem>(), new { #id = "ddlEmpId" + Model.TempID, #class = "js-dropdown js-emp" , onchange = "OnSelectedIndexChange();" }) #Html.ValidationMessageFor(model => model.EmpId, "", new { #class = "text-danger" }) </div>
</div>
</div>
</div>
This is what I tried
< script type = "text/javascript" >
function OnSelectedIndexChange() {
var b = $('.js-Com').val();
var a = $('.js-emp').val();
alert(b);
alert(a);
}
<
/script>
You can just write an event handler for the second combo box:
$("#secondComboBox).on("change", function () {
const selectedId = $(this).val();
// You might want to int.parse($(this).val()) if you need an integer type.
});
I have few textbox that validates when its empty, but they dont work well. Below is my logic from the model to view, what could i be missing? Currently these textbox dont seem to work and no error when i inspect from the browser. The application is on asp.net mvc using bootstrap.
[DataType(DataType.EmailAddress)]
[Required(ErrorMessage = "This field is required")]
[RegularExpression(#"^\w + ([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*$")]
public string Email { get; set; }
// View
<div class="row">
<label for"Email">Email:</label>
<div class="input-group col-md-4 col-md-offset-2 col-sm-2 col-xs-2">
<div class="input-group pull-right">
#Html.TextBoxFor(m => m.Email, new { #class = "form-control", type = "text", id = "email", autofocus = "autofocus", placeholder = "example#example.com", required = "required" })
#Html.ValidationMessageFor(m => m.Email, " ", new { #class = "text-danger" })
<div class="input-group-append">
<div class="input-group-text">
</div>
</div>
</div>
</div>
</div>
NB: even if i use #html.EditorBoxFor(m=>m.Email, new {Form...}) still nothing and no error.
I have a Bootstrap Modal in ASP.Net with MVC 5 which I use to edit an entry on a FullCalendar javascript plugin.
_Edit.cshtml:
#model Models.CalendarEntry
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Edit Calendar Entry</h4>
</div>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="modal-body">
<div class="form-horizontal">
<h4>#Model.Title</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.CalendarEntryId)
#Html.HiddenFor(model => model.PostId)
<div class="form-group">
#Html.LabelFor(model => model.Title, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.EntryDateTime, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group" id="datetimepicker">
#Html.EditorFor(model => model.EntryDateTime, new { htmlAttributes = new { #class = "form-control" } })
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
#Html.ValidationMessageFor(model => model.EntryDateTime, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Length, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Length, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Length, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.EntryStatus, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EnumDropDownListFor(model => model.EntryStatus, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.EntryStatus, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" type="button">Cancel</button>
<input class="btn btn-primary" type="submit" value="Save" />
</div>
<script>
$(document).ready(function ()
{
$("#datetimepicker").datetimepicker();
});
</script>
}
For some reason two things are happening that I cannot figure out why.
Firstly, the glyphicon-calendar does not sit next to the input:
Secondly, when the Modal Form load, all the other fields except for the datetime field gets populated with data, until I click the calendar glyphicon, then the datetime field gets populated with the current date and time. The value from the model never gets displayed.
Web interfaces are not my forté and would appreciate any assistance.
When you create a new MVC project, it comes with a default css file(Site.css) which has some predefined css styles in it. By default, it has input field's max-width defined as 280px. That is the reason, your input groups are not working as expected.
If you remove/make adjustments to this css class in your ~/Content/Site.css, You css problem will be resolved.
turns out, that I needed to set options for the datetimepicker, more specifically, a default value it would seem like:
<script>
$(document).ready(function ()
{
$("#datetimepicker").datetimepicker(
{
defaultDate: '#Model.EntryDateTime',
showTodayButton: true,
format: 'YYYY-MM-DD HH:mm',
showClose: true,
showClear: true,
toolbarPlacement: 'top',
stepping: 15
});
});
</script>
Would you try to put an attribute:
[DataType(DataType.DateTime)]
public DateTime EntryDateTime {get; set;}
and comment the JS script?
Example
Another quick solution is to also format the date like this in your javascript:
defaultDate: '#Model.EntryDateTime.ToString("yyyy-MM-dd HH:mm")'
The solution of using the [DisplayFormat] as an attribute is just as valid if not a better solution.
<div class="container">
<div class="row">
<div class='col-md-12'>
<div class="form-group">
<span col-sm-6> #Html.Label("Date of Birth", htmlAttributes: new { #class = "control-label col-md-2" })</span>
<div class='input-group date col-sm-3' id='datetimepicker1'>
#Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { #class = "form-control" } })
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
#Html.ValidationMessageFor(model => model.DateOfBirth, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
I want to call model in layout for use a validation in empty text field for return a error to gust user if any fields are empty. i have a code layout
#using (Html.BeginForm("Sending", "Home"))
{
<form method="post" id="contactfrm" role="form">
<div class="col-sm-4">
<div class="form-group">
<label for="name">Name</label>
#Html.TextBoxFor("Name", null, new { id = "name", #class = "form-control", placeholder = "Enter name", title = "Please enter your name (at least 2 characters)" })
#Html.ValidationMessageFor(model => model.Name)
</div>
<div class="form-group">
<label for="email">Email</label>
#Html.TextBoxFor("Email", null, new { id = "email", #class = "form-control", placeholder = "Enter email", title = "Please enter a valid email address)" })
#Html.ValidationMessageFor(model => model.Email)
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="comments">Comments</label>
#Html.TextArea("Comment", null, new { id = "comments", #class = "form-control", TextMode = "MultiLine", Columns = "3", Rows = "5", placeholder = "Write you message here...", title = "Please enter your message (at least 10 characters)", Style = "resize:none" })
#Html.ValidationMessageFor(model => model.Comment)
</div>
<button name="submit" type="submit" class="btn btn-lg btn-primary" id="submit">Send Your Message</button>
<div class="result"></div>
</div>
</form>
}
i want to call sending.cs model for use in #Html.ValidationMessageFor(model => model.Name)
How can i call Model in layout?
Thank you
add your model to your View page like this
#model nameOfModel
and use it like this
#Html.ValidationMessageFor(model => model.Name)
and if you want to use only a porperty of it do it like this
#Model.nameOfproperty
I want to display a DropDownList and a Link next to it, using MCV5 and Bootwatch (CSS)
View:
<div class="form-group">
<label class="control-label col-md-2" for="productoID">Producto</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-6">
#Html.DropDownListFor(model => model.productoID, null, "-- Seleccione un Producto --", new { #id = "producto", #Selected = false, #class = "form-control" })
#Html.ValidationMessageFor(model => model.productoID)
</div>
<div class="col-md-2">
#Html.ActionLink("+", "../Producto/Create")
</div>
</div>
</div>
</div>`
Actually they are displayed on same line, but not next to each other, there is an space I cannot remove.
You cannot get rid of the space because you are putting the dropdown list and the anchor in separate columns.
You want to put them in the same column using an inline form.