MVC Placeholder in Dropdownlist - html

How can I put a placeholder in a dropdownlist? I already had to search, but I still could not find the solution.
HTML
<div class="wrap-input100 rs1-wrap-input100 validate-input">
<span class="label-input100">Room</span>
#Html.DropDownList("ID_Room", null, htmlAttributes: new { #class = "focus-input100" })
<span class="focus-input100"></span>
</div>

#Html.DropDownList("ID_Room", null, "placeholder" , new { #class = "focus-input100" })
Also. you don't need to htmlAttributes. Just having new {} is fine

Related

The auto generated error message shows the date format as 'yyyyy/mm/dd' instead of 'mm/dd/yyyyy in ASP.Net MVC application

I am working on ASP.Net MVC 4.7.2 app. It has a date field where user can select or type the date. If user enter the date with year yyyyy (the length of year is greater than 4 here)then the error shows up which show the date in 'yyyy/mm/dd' format instead of 'mm/dd/yyyy' format. See the screen shot below.
I want to show the same format in the error message as mm/dd/yyyy'. To fix the issue I did search and it seemed this is generated from kendu whereas I am not using the kendu control for date field. As a work around, I thought I can limit the max length but that did not work as well.
View html:
<div class="form-group">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-xs-2" })
<div class="col-xs-8">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control", #readonly = "readonly" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
I try some research and seem like it's hard to change the error message with the right format. You can update the error message to "Please enter a valid date" or "Please enter a valid date with format mm/dd/yyyy"
#Html.EditorFor(model => model.Name, new
{
htmlAttributes = new { #class = "form-control" },
data_val_date = String.Format("Please enter a valid date",
Html.DisplayNameFor(model => model.Name))
})

Passing parameter to #Url.Action

I am trying to pass two parameters through a #Url.Action for a submit button. However, the values are not being passed.
I have index view with a dropdown field and a Save button. What I would like for the user to be able to do is select a dropdown value and Save the value. However, no matter how I access my function the values are null. I have tried passing in parameters and binding the data.
Currently my view looks like -
<h3>Burn Conditions</h3>
<div class="form-group">
#Html.LabelFor(model => model.ConditionsReasonsID, "Condition", new { #class = "control-label col-md-2"})
<div class="col-md-10">
#Html.DropDownList("ConditionsReasonsID", String.Empty)
#ViewBag.conditionsReasons
#Html.ValidationMessageFor(model => model.ConditionsReasonsID)
<a href= "#Html.Raw(#Url.Action("CreateCondition", "RequestedBurns", new { requestedBurnsID = ViewBag.RequestedBurnsID, conditionsReasonsID = Model.ConditionsReasonsID }))">
<input type="submit" value="Save Condition" />
</a>
</div>
</div>
in my controller I have
public ActionResult CreateCondition(int requestedBurnsID, int conditionsReasonsID)
{
BurnDecision burnDecision = new BurnDecision();
burnDecision.RequestedBurnsID = requestedBurnsID;
burnDecision.ConditionsReasonsID = conditionsReasonsID;
//Find BurnSiteID
RequestedBurn requestedBurn = db.RequestedBurns.Find(burnDecision.RequestedBurnsID);
ViewBag.burnSitesID = requestedBurn.BurnSitesID;
db.BurnDecisions.Add(burnDecision);
db.SaveChanges();
return RedirectToAction("Index", "RequestedBurns", new { burnSitesID = ViewBag.burnSitesID, requestedBurnsID = burnDecision.RequestedBurnsID });
}

HTML autocomplete username causing password field to be filled in, once user already logged in

Very strange issue is occurring and has to do with my browsers capability to remember passwords. So I have a few login details and have rememberd them upon login. I move to the area of the site where I manage users. There is a field for their initials, and after that is a password field. If I double click in the initials input field I get a list of a all usernames that I login to the site with. If I select one it will autocomplete the below password field with the relevant stored password.
My Question is how can I disable this once logged in? I set the form and both inputs autocomplete attribute to off, still no success. I know it has to do with the fact that the browser (FireFox) see's a password field and "Assumes" the prior field is the username field. This is a extremely huge assumption. If I change the input type to text the autocompleteing does not work. So its all based on the fact that its a password field and the prior text input must be the username. The changing of the fields ids don't change anything
Below Is the form and fields:
<div class="row">
#using (Html.BeginForm("UserCreate", "Account", FormMethod.Post, new { id = "UserCreateForm", autocomplete = "off" }))
{
<div class="col-md-6">
#Html.LabelFor(model => model.Initial, htmlAttributes: new { #class = "col-md-4" })
<div class="col-md-8 popovers" data-container="body" data-trigger="hover"
data-placement="top" data-content="Required">
#Html.EditorFor(model => model.Initial, new { htmlAttributes = new { #class = "form-control", autocomplete = "off" } })
#Html.ValidationMessageFor(model => model.Initial, "", new { #class = "text-danger" })
</div>
</div>
<!--/span-->
<div class="col-md-6">
#Html.LabelFor(model => model.Password, htmlAttributes: new { #class = "col-md-4" })
<div class="col-md-8 popovers" data-container="body" data-trigger="hover"
data-placement="top" data-content="Required">
#Html.EditorFor(model => model.Password, new { htmlAttributes = new { #class = "form-control", autocomplete = "off" } })
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
</div>
<!--/span-->
}
</div>
Thanx for any help!
Sorry I found a workaround. Still not ideal but does the job
<input type="text" style="display:none">
<input type="password" style="display:none">
Pretty much fools the browser.

How to change Razor CheckboxFor alignment

The standard ASP.NET MVC template in Visual Studio 2013 generates a page Register.cshtml that defines the UI for registering new user into the system. I extended it to add a checkbox for "I accept the terms." Here is the code snippet:
<div class="form-group">
#Html.LabelFor(m => m.ConfirmPassword, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
#Html.CheckBoxFor(m => m.AcceptTerms, new { #class = "form-control" })
#Html.Label("I accept", new { #class = "control-label" })
</div>
</div>
The idea is that a chexkbox gets displayed below the password editbox. The text must get displayed on the right side of the checkbox.
Here is the partial image of how the output looks:
As you can see, the checkbox is getting center-aligned and "I accept" is flowing to the next line.
How can I keep the checkbox and the label together and also ensure that the checkbox is left-aligned with the editbox above it? Regards.
Do this...
<label>
I accept
#Html.CheckBoxFor(m => m.AcceptTerms)
</label>
Try this ... hope this will help
<div class="checkbox">
#Html.CheckBoxFor(model => model.IsMobileView, new { htmlAttributes = new { #class = "form-control pull-left" } })
</div>
It seems that 'label' or/and input type="checkbox" have the display type block.
To fast check try add style="display: inline-block" to both Label and CheckBoxFor. If I'm right, then you can correct your .css-files.

Single select with chosen with razor

So i have implemented Chosen with my project and worked great with multi select but i want to add that for simple dropdown. I have total of 80 entry in dropdown so need the search function of chosen..this is my code.
<div class="editor-label">
<span style="color: red;">*</span> <strong>Select Therapist:</strong>
</div>
<div class="editor-field">
#Html.DropDownList("TherapistList", Model.TherapistList
, new
{
#class = "chzn-select",
data_placeholder = "Choose Therapist",
}
)
</div>
and
<script >
$(".chzn-select").chosen({
allow_single_deselect: false,
search_contains: false,
no_results_text: "Oops, nothing found!"
});
</script>
i have addded the CSS and .JS reference on top. Its working fine with multiselet when i add #Html.ListBox("TherapistList", Model.TherapistList
but i want single select with search option as they display on website.
thanks in advance.
If you don't call #Html.Listbox but #Html.DropDown you will get a single select chosen.
#Html.DropDownList("TherapistList", Model.TherapistList, new {
#class = "chzn-select",
data_placeholder = "Choose Therapist",
}
)