I am trying to position these text fields next to each other and have them in the following format:
(______) _____ - _____
My main problem is getting them to be next to each other. Does anybody have any suggestions on what I should do?
Here is the code I have so far:
<label style="margin: 5px" id="lblPhoneNumber">Phone Number (optional)</label>
<p>
#Html.ValidationMessageFor(model => model.Pharmacy.PhoneNumber)
#Html.TextBoxFor(model => model.Pharmacy.AreaCode, new { style="width:3em", maxlength=3})
#Html.TextBoxFor(model => model.Pharmacy.PhoneNumberFirstThree, new { style="width:3em", maxlength = 3 })
#Html.TextBoxFor(model => model.Pharmacy.PhoneNumberLastFour, new { style="width:4em", maxlength = 4 })
</p>
It will be something like. You need to do it for all three textboxes:
#Html.TextBox("Something", #Model.text, new {style = "display: inline-block;float:left"})
Related
I am working on a asp.net mvc project and I need to filter dropdownlist according to what user has selected first dropdownlist
This is my first dropdownlist in view:
<div class="form-group">
#Html.LabelFor(m => m.BuildDefinitionName, "Build Definition name", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.DropDownListFor(m => m.BuildDefinitionName, new SelectList(Model.BuildData.Select(x => x.Key), "BuildInfo"), "select", new { #class = "form-control" })
</div>
</div>
and this is my second dropdownlist:
<div class="form-group">
#Html.LabelFor(m => m.CurrentBuildNumber, "Current Build", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.DropDownListFor(m => m.CurrentBuildNumber, new SelectList(Model.BuildData
.Where(x=>x.Key == "#BuildDefinitionName")
.Select(y => y.Value), "BuildInfo"), "select", new { #class = "form-control" })
</div>
</div>
I have a dictionary that key is string (what the user should chose first dropdown ) and value is IEnumerable ( what it should be filtered by the first dropdown selection).
I am so thanksful for solving my problem.
after applying the answer :
You need to use jquery to modify the second dropdown list.
In your 2nd dropdown list, you need to put all the data of Model.BuildData. So, in your controller, be sure to provide all the records because we will be filtering on client-side.
public ActionResult ControllerName(){
var yourModel = new yourModel();
// Add all the entries to Build Data, we're going to filter it with jquery
yourModel.BuildData = db.BuildData.ToList();
return View(yourModel);
}
In your 2nd dropdown list, we need to put a data attribute on the html. For this example, we're rendering it manually, replace your 2nd dropdown list with the HTML below.
<div class="form-group">
#Html.LabelFor(m => m.CurrentBuildNumber, "Current Build", new { #class = "col-md-2 control-label" })
<div class="col-md-10">
<select id="CurrentBuildNumber" name="CurrentBuildNumber" class="form-control">
#foreach(var selectItem in Model.BuildData){
<option data-filter="#selectItem.Key" value="#selectItem.Value">
#selectITEM.Value
</option>
}
</select>
</div>
</div>
Lastly, we need to add an onchange script to the 1st dropdown list that would filter the 2nd dropdownlist.
The code below will loop through all the options in the 2nd dropdown list, and if its data-attribute doesn't match with the selected value, it will hide it.
<script>
$(document).ready(function(){
$(document).on("change","#BuildDefinitionName",function(){
var selected = $(this).val();
$("#CurrentBuildNumber").find("options").each(function(){
if($(this).data("filter")==selected){
// if data-filter is the same as the selected value, show it
$(this).show();
}else{
// if it doesn't match, hide
$(this).hide();
}
});
});
});
</script>
I'm having some issues with Bootstrap/CSS in my ASP.NET MVC app. I've got a ´form-group´ with a label to the left and a vertical stack of dropdowns to the right.
I've now set it up the way I want it except for the margins. Currently there are none. It seems like the margins that I'm giving are not effective. I've pretty much took this from a video tutorial on YouTube. I don't understand why this doesn't work.
I've tried all kind of things, mb-4, mt-4, my-4, ...
What am I doing wrong here? I've checked I use bootstrap v3.3.7.
This is my code:
<div class="form-group">
#Html.LabelFor(model => model.SelectedTags, htmlAttributes: new { #class = "control-label col-md-2", id = "lblSelectedTags" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.Tag1, Model.AvailableTags, htmlAttributes: new { #class = "form-control mb-4", id = "ddlTag1" })
#Html.DropDownListFor(model => model.Tag2, Model.AvailableTags, htmlAttributes: new { #class = "form-control mb-4", id = "ddlTag2" })
#Html.DropDownListFor(model => model.Tag3, Model.AvailableTags, htmlAttributes: new { #class = "form-control mb-4", id = "ddlTag3" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.FriendlyName, htmlAttributes: new { #class = "control-label col-md-2", id = "lblFriendlyName" })
<div class="col-md-10">
#Html.EditorFor(model => model.FriendlyName, new { htmlAttributes = new { #class = "form-control", id = "edrFriendlyName" } })
#Html.ValidationMessageFor(model => model.FriendlyName, "", new { #class = "text-danger" })
</div>
</div>
And this is the result:
After continued iterations of an endless loop of trial and error I figuered that the way ASP.NET assembles html and styles is not straightforward enough that it can be easily understood for someone who's new to the technology. Hopefully this might change after some time.
So I've stumpled upon this other post (Cant set proper margin with bootstrap css in MVC) where somebody else had issues with margins in ASP.NET. This probably isn't the right way of doing things, but for me and for now it works. I've basically avoided adding to my CSS file something like this
.mb-4 {
margin-bottom: 1.5em !important;
}
and instead added it to the htmlAttributes collection of the Html helper class for each of my controls, like this:
#Html.DropDownListFor(model => model.Tag1, Model.AvailableTags, htmlAttributes: new { #class = "form-control", style = "margin-bottom: 1.5em !important;", id = "ddlTag1" })
bootstrap 4 allows for padding and margin tags:
mt-1 (margin-top) , mb-1 (margin-bottom) , mr-1 (margin-right) , ml-1 ( margin-left) can change the number from 1-5 depending on your needs or replace M for p ( padding)
as for bootstrap 3 you will need to use css
.form-group{
margin-bottom:10px;
}
for example
You use bootstrap 3 and in this version sapcing is not available
So you can imitate the behavior of bootstrap version 4 by creating those class in css
For example I initated the behavior of mb-4 by add to css .mb-4 { margin-bottom: 1.5em; }:
NOTE!
In Razor: use the same code in HTML as you posted but add the css rule
I use em in css only to initate bootstrap but you can use px as you want
.mb-4 { margin-bottom: 1.5em; }
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group">
<label class = "control-label col-md-2" id ="lblSelectedTags">drop down</label>
<div class="col-md-10">
<div class = "form-control mb-4" id = "ddlTag1">
ddlTag1
</div>
<div class = "form-control mb-4" id = "ddlTag2">
ddlTag2
</div>
<div class = "form-control mb-4" id = "ddlTag3">
ddlTag3
</div>
</div>
</div>
This question already has answers here:
Hyphenated html attributes with asp.net mvc
(2 answers)
Closed 6 years ago.
I have a basic password strength indicator.
<input type="password" id="myElement1" size="40" class="left" data-display="myDisplayElement1" />
<div class="left" id="myDisplayElement1"></div>
I have the JS Script which takes care of all the logic. And the data-display div shows the message whether the password is weak or strong. But I want to convert the above code into Razor. Below is what I have till now.
<div class="form-group">
#Html.LabelFor(model => model.NewPassword, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NewPassword, new { htmlAttributes = new { #class = "form-control", id = "myElement1" } })
<div class="left" id="myDisplayElement1"></div>
#Html.ValidationMessageFor(model => model.NewPassword, "", new { #class = "text-danger" })
</div>
</div>
Question: Everything is working fine but I am not able to put data-display attribute in razor. Where do I need to place it. But as the data-display is not set, I am not able to display the user its password strength as the div.
I want to be able to do something like below
#Html.EditorFor(model => model.NewPassword, new { htmlAttributes = new { #class = "form-control", id = "myElement1" , data-display = "myDisplayElement1"} })
But data-display gives me error.
Error
Cannot resolve symbol data the error comes at the place where I have added data-display.
Hyphenation is not valid within an anonymous object. However, knowing that it would be necessary at times to add attributes with hyphenation, the Razor helpers will auto replace underscores with hyphens in attribute names. As a result, you can accomplish what you need by using data_display rather than data-display.
I created an Edit page in MVC and decided I did not want the ID to be editable, but I do want it to look like the rest, just greyed out preferably.
Here is my property:
<div class="form-group">
#Html.LabelFor(model => model.EvpId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.EvpId, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.EvpId, "", new { #class = "text-danger" })
</div>
</div>
After doing some reading everyone seems to suggest using the #Html.DisplayFor which makes sense, even though it does not look like the rest.
However when swapping the EditorFor for the DisplayFor I notice that the label is not on the same line:
What is the simple way of having this on the same line as the corresponding label, I am using the standard out of the box bootstrap CSS.
View Source on page:
<div class="form-group">
<label class="control-label col-md-2" for="EvpId">Id</label>
<div class="col-md-10">
2
<span class="field-validation-valid text-danger" data-valmsg-for="EvpId" data-valmsg-replace="true"></span>
</div>
</div>
I have had the same issue.
Jasen answer did not help, because span does not put an element into the same horizontal line with label, but his later comment with the link to bootstrap doc solved the problem, we should use p tag instead of span.
So my final solution was:
<p class="form-control-static">#Html.DisplayFor(model => model.Contractor.Name) </p>
Thanks to Jasen!
When you use #Html.DisplayFor() the helper is selecting markup based on the type. Here it chose to output a bare string and this breaks the Bootstrap form-horizontal styling.
<div class="col-md-10">
2 <!-- no surrounding tags for EvpId value -->
...
</div>
The easiest thing to do is just use plain html to insert your own tags
<div class="col-md-10">
<span class="form-control-static">#Model.EvpId</span>
...
</div>
If you do this a lot or you have much more markup you can create a custom helper extension. This is a very simple example:
public static class HtmlHelperExtensions
{
public static HtmlString IdSpan(this HtmlHelper helper, string id)
{
return new HtmlString(String.Format("<span class=\"form-control\">{0}</span>", id));
}
}
Usage:
<div class="col-md-10">
#Html.Idspan(Model.EvpId)
#Html.ValidationMessageFor(model => model.EvpId, "", new { #class = "text-danger" })
</div>
Using Jasen's answer I was able to achieve what I wanted by altering the width of the <span> however this seemed abit messy:
<span class="form-control" style="width:280px;">#Model.EvpId</span>
The ultimate answer to my question was this as it is what I originally was looking for:
#Html.EditorFor(model => model.EvpId, new { htmlAttributes = new { #class = "form-control", #readonly = "readonly" } })
Hope this helps someone.
Instead of wrapping in a P tag or SPAN I just put the class directly into the exiting DIV, and that worked too.
<div class="col-md-10 form-control-static">
...
</div>
Problem Statement:
In one of my edit view I want make textbox as disabled, so for this i'm using DisplayFor instead of TextboxFor. But when I use Displayfor, alignment is not coming properly. You can see images attached for your reference. I'm using Bootstrap CSS 3.0
Any help would be appreciated. What inline CSS I should use to align properly??
Image1: In this image you can see that Acquire Status ID label and Textboxfor properly aligned.
Image2: When I use DisplayFor instead of Textboxfor, Acquire Status ID label and Displayfor are not aligned properly.
View:
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
#Html.LabelFor(model => model.AcquirestatusID, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DisplayFor(model => model.AcquirestatusID,new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.AcquirestatusID)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Name, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Name, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
I solved my problem using readonly attribute to my Textboxfor.
#Html.TextBoxFor(model => model.AccessoriesID,new { #class = "form-control",#readonly="readonly" })
After applying above line of code my edit view looks:
It might be happening due to the style.css which is by default in your project.
Remove style.css from the project
Note: you might only need some of the validation classes inside it
I agree with csoueidi , check with developer tools on IE or inspect element on chrome to see which css is loading the styles for that textbox.
If you want to line up the text and not use a textbox, use the class "form-control-static"
<div class="col-md-10 form-control-static">#Html.DisplayTextFor(model => model.AcquirestatusID)</div>