I am using a form like this, how can I change the textboxforinto a select, because I can't find any option to do it in the #Html
#using (Html.BeginForm("LeggTilUtdannelse", "Utdannelse", FormMethod.Post, new { #class = "form-horizontal", id = "legg-til-form" }))
{
#Html.AntiForgeryToken()
<div class="form-group">
#Html.LabelFor(m => m.Til, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.Til, new { #class = "form-control", autocomplete = "off" })
</div>
</div>
}
I think you're looking for an #Html.DropDownList or #Html.DropDownListFor.
Related
I get some issues in the grid system.
I design this label and text box but I want all this together. How can I do that ? I tried but it is not come with me
enter image description here
This is my code:
<div class="form-group">
#Html.LabelFor(m => m.Name, htmlAttributes: new { #class = "control-label col-md-12" })
<div class="col-md-10" >
#Html.EditorFor(m => m.Name, new { htmlAttributes = new { #class = "form-control " } })
#Html.ValidationMessageFor(m => m.Name, "", new { #class = "text-danger" })
</div>
</div>
I believe col-md-12 should be replaced by col-md-2 is order to not exceed 12 columns.
Also, adding a row class with your form-group, and col-form-label in place of control-label if you are using bootstrap 4.
<div class="form-group row">
#Html.LabelFor(m => m.Name, htmlAttributes: new { #class = "col-md-2 col-form-label" })
<div class="col-md-10" >
#Html.EditorFor(m => m.Name, new { htmlAttributes = new { #class = "form-control " } })
#Html.ValidationMessageFor(m => m.Name, "", new { #class = "text-danger" })
</div>
</div>
Please consult the documentation for more details.
I'm trying to write a Bank Application. In the Transaction Page, I want to take the value of CheckingAccountId from the User Accounts Database (User.Identity.GetUserId()). But, how should I assign the value of User.Identity.GetUserId() to CheckingAccountId. This is the relevant Razor View Page Code:
using (Html.BeginForm("Deposit", "Transaction", FormMethod.Post, new {
#class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken();
<h4>Deposit Section</h4>
<hr />
#Html.ValidationSummary("", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(m => m.Id, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.Id, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.TransactionAmount, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.TransactionAmount, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.CheckingAccountId, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#{
var userName = User.Identity.GetUserName();
}
#*THIS IS THE BEST I COULD DO. I NEED HELP HERE*#
#*#m.CheckingAccountId = userName*#
#Html.DisplayName(userName)**
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Deposit" />
</div>
</div>
UPDATE:
I just found out that we can achieve this by adding the same in the ConnectionString when writing the SQL Query for pushing the transaction into the database. The solution would look something like this:
INSERT INTO table ( checkingaccountid, model_data ) VALUES ( $id, $data );
But I would still like to know if it's possible to send this id from the form when submitted along with the other data.
I'm not seeing why the following code is putting the labels to the right of the textbox instead of the to the left? Should I be using <div class="row"> around the <div class="form-group">?
Anyone know what I'm missing?
<div class="form-horizontal">
#using (Html.BeginForm("EditClockGroup", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.ValidationSummary(false, "", new { #class = "alert alert-danger" })
#Html.HiddenFor(model => model.GroupId, null)
<div class="form-group">
#Html.LabelFor(m => m.GroupId, new { #class = "col-md-2 control-label" })
#Html.TextBoxFor(m => m.GroupId, new { #class = "col-md-7 form-control" })
</div>
<div class="form-group">
#Html.LabelFor(m => m.GroupName, new { #class = "col-md-2 control-label" })
#Html.TextBoxFor(m => m.GroupName, new { #class = "col-md-7 form-control" })
</div>
<div class="form-group">
<div class="col-md-7 col-md-offset-2">
<input type="submit" value="Update" class="btn btn-primary" />
</div>
</div>
}
</div>
You cannot apply col-md-7 to input tag. Instead, you need to place input inside div.
<div class="form-group">
#Html.LabelFor(m => m.GroupId, new { #class = "col-md-2 control-label" })
<div class="col-md-7">
#Html.TextBoxFor(m => m.GroupId, new { #class = "form-control" })
</div>
</div>
Using scaffolded items in an MVC5 application, I see things like text fields given the CSS class "form-control". The fields all have consistent rounded corners, same font color/size etc.
Now I've added a dropdown list using "#Html.DropdownListFor" and it's square, with a different font colour.
I know I can specify which CSS class to use in the Razor e.g.
#Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { #class = "###########" } })
But I don't know what to replace ########### with. If I specify "form-control" just gives me the square box I described above. "form-control select" doesn't seem to do much either.
Here's a bigger snippet showing a well-styled text field directly above it
<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.OrderItemTypeId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.OrderItemType, "", new { #class = "text-danger" })
</div>
</div>
Is there a value I can use that will give my dropdown the same appearance as all the other text fields I already have?
Thanks
The third parameter already is the htmlAttributes field, so your syntax is wrong. This is what you're after:
#Html.DropDownListFor(model => model.OrderItemTypeId,
(SelectList)ViewBag.OrderItemTypes,
new { #class = "form-control etc" })
See Microsoft Docs.
You need to make sure it sits within proper hierarchy of outer tags with their corresponding classes.
See the code below that I took from this article - How to use Bootstrap 3 validation states with ASP.NET MVC Forms
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="panel panel-default">
<div class="panel-body">
#using (Html.BeginForm("UserProfile", "Profile", FormMethod.Post, new { role = "form", id="userForm" })) {
#* State selection dropdown *#
<div class="form-group">
#Html.LabelFor(m => m.State)
#Html.DropDownListFor(m => m.State, // Store selected value in Model.State
// This argument needs some explanation - here we take a Distionary<string, string>
// and turn it into an instance of SelectList, see blog post for more details
new SelectList(Model.States, "Key", "Value"),
// Text for the first 'default' option
"- Please select your state -",
// A class name to put on the "<select>"
new { #class = "form-control" }
)
#Html.ValidationMessageFor(m => m.State)
</div>
<button type="submit" class="btn btn-primary">Update</button>
}
</div>
</div>
</div>
</div>
I am having trouble to keep the input group in only one piece:
Based on the MVC 5 template view build using scaffolding I have build:
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Formatos e Planos</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.SizeOpenedWidth, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="input-group">
#Html.EditorFor(model => model.SizeOpenedWidth, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SizeOpenedWidth, "", new { #class = "text-danger" })
<div class="input-group-addon">x</div>
#Html.EditorFor(model => model.SizeOpenedHeight, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SizeOpenedHeight, "", new { #class = "text-danger" })
<div class="input-group-addon">mm</div>
</div>
</div>
</div>
</div>
}
The default css comes when you create a new MVC project has max-width set to 280px for all the inputs. That is the reason it messed up your input groups.
If you remove/make adjustments to this in your ~/Content/Site.css, You should be good.