I made a "Availability" option in my database, this is set as a "bit". When I made a controller on my generated model, it came out as a dropdownlist with 2 values: true and false. I don't want this to be a dropdown list but a checkbox. I've googled all around and couldnt find an easy fix for this. Any of you have an idea how to do this? My code looks like this:
<div class="form-group">
#Html.LabelFor(model => model.Beschikbaar, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.Beschikbaar)
#Html.ValidationMessageFor(model => model.Beschikbaar, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Beschikbaar, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.CheckBoxFor(model => model.Beschikbaar)
#Html.ValidationMessageFor(model => model.Beschikbaar, "", new { #class = "text-danger" })
</div>
</div>
</div>
Use this
<input type="checkbox" name="Beschikbaar" value="true" data-val="true" data-val-required="The Beschikbaarfield is required."/>
in place of the line
#Html.EditorFor(model => model.Beschikbaar)
Related
I am changing the style of my MVC project, for that I resorted to Bootswach and its different templates, the problem is that the visual changes in the views are not effective, for example ...
It has a very extensive form vertically, as follows
and you want to align objects to the right and to the left in the following way
to make this change use the tag <div class = "col-md-6">
but I'm not getting the expected result, why does this happen?
now I will tell you how to implement this template ....
1.- download the bootstrap watch bootstrap.css file and add it to my project
2.- in my BundleConfig.cs change the boostrap.css file that you download
3.- And modify my view finally
My View:
<h2>Crear Producto</h2>
#using (Html.BeginForm("Create", "Productoes", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="col-md-6">
<div class="form-group">
#Html.LabelFor(model => model.v_Nombre, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.v_Nombre, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.v_Nombre, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.FotoFile, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="file-input-new">
<div class="input-group" style="width:280px">
<div tabindex="500" class="form-control file-caption">
<div class="file-caption-name" id="NombreArchivo">
</div>
</div>
<div class="input-group-btn" style="height:auto">
<div tabindex="500" class="btn btn-primary btn-file">
<i class="glyphicon glyphicon-folder-open"></i>
Buscar Foto...
#Html.TextBoxFor(modelo => modelo.FotoFile, new { type = "file", id = "files" })
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Precio_Minimo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Precio_Minimo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Precio_Minimo, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Precio_Maximo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Precio_Maximo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Precio_Maximo, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
#Html.LabelFor(model => model.Activo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.Activo)
#Html.ValidationMessageFor(model => model.Activo, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Stock, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Stock, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Stock, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.f_Compra, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.f_Compra, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.f_Compra, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Comentarios, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Comentarios, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Comentarios, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Kn_CodigoCategoria, "Categoria", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("Kn_CodigoCategoria", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Kn_CodigoCategoria, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Crear" class="btn btn-outline-success" />
</div>
</div>
</div>
</div>
}
with these two steps I can already visualize the changes of the template, but I said previously I can not move my objects as far as I want,
what am I doing wrong? Do I have to add other references to my BundleConfig? do I have to install something in the project?
any help for me?
You need to put the col-x-y divs inside a div with class .row and inside a container or it will not work. Similar to this (you do not need the col class but I just put it here so it is easier to see the columns in the fiddle):
<div class="container">
<!--This will not work -->
<div class="col col-sm-3">.col-sm-3</div>
<div class="col col-sm-6">.col-sm-6</div>
<div class="col col-sm-3">.col-sm-3</div>
<!-- This will work -->
<div class="row">
<div class="col col-sm-3">.col-sm-3</div>
<div class="col col-sm-6">.col-sm-6</div>
<div class="col col-sm-3">.col-sm-3</div>
</div>
</div>
Here is the Fiddle so you can see this yourself.
I want pass some Id's values from my Edit form.
Let say I want pass value of ProductId, CountryId and ModelId and I tried like this:
<input type="submit" value="Save" class="btn btn-default" onclick="return Update(#(model.ProductId),#(model.CountryId),#(model.ModelId) )/>
But not working.
I'am in my Edit form and this is my form.
#model Products.Models.Product
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Product</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.ProductId)
#Html.HiddenFor(model => model.CountryId)
#Html.HiddenFor(model => model.ModelId)
<div class="form-group">
#Html.LabelFor(model => model.ProductName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ProductName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Model, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Model, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Model, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Model, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Status, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Status, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Status, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" onclick="return Update(#(model.ProductId),#(model.CountryId),#(model.ModelId) )/>
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
Thank you!
<input type="submit" value="Save" class="btn btn-default" onclick="return Update(#Model.ProductId,#Model.CountryId,#Model.ModelId)/> And you will get all three Values. Happy coding!
I know similar questions have been asked in the past but I can't find one matching and providing a solution to my problem, so please bear with me.
I'm trying to build a form with one textbox and various checkboxes display below it. In front of the textbox and each checkbox, but I can't figure out why the textbox label is not aligned with the label from the checkboxes and the checkboxes are not aligned with the textbox.
Here's the code I have so far. Note that I'm using (bootstrap-lumen.css)
#using (Html.BeginForm("Save", "Staffs"))
{
#Html.AntiForgeryToken()
<fieldset>
<legend>Staff Member</legend>
<div class="form-vertical">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Email, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="checkbox">
#Html.LabelFor(model => model.IsAdmin, htmlAttributes: new { #class = "control-label col-md-2" })
<label>
#Html.CheckBoxFor(model => model.IsAdmin)
</label>
</div>
<div class="checkbox">
#Html.LabelFor(model => model.CanDownloadCsv, htmlAttributes: new { #class = "control-label col-md-2" })
<label>
#Html.CheckBoxFor(model => model.CanDownloadCsv)
</label>
</div>
</div>
</fieldset>
}
Here's what it look like when rendered:
I've tried removing all classes to see if it would help, but everything seems to be getting messed up where the label is display much lower than the checkbox and so on.
I'd like all my labels to be aligned with one another and my textbox and all checkboxes to be aligned with one another as well.
Can you tell me what I'm doing wrong and how can I resolve this?
Can you please try this?
#using (Html.BeginForm("Save", "Staffs"))
{
#Html.AntiForgeryToken()
<fieldset>
<legend>Staff Member</legend>
<div class="form-vertical">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Email, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group checkbox">
#Html.LabelFor(model => model.IsAdmin, htmlAttributes: new {#class = "control-label col-md-2"})
<div class="col-md-10">
#Html.CheckBoxFor(model => model.IsAdmin)
</div>
</div>
<div class="form-group checkbox">
#Html.LabelFor(model => model.CanDownloadCsv, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.CheckBoxFor(model => model.CanDownloadCsv)
</div>
</div>
</div>
</fieldset>
}
I want to add dynamicly new partial form on page. I used this code:
Guid index = Guid.NewGuid();
<input type="hidden" name="People.index" value="#index" />
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.surname, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.surname, new { name = "Author[index].surname", htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.surname, "", new { #class = "text-danger" })
</div>
</div>
But in source code after page loading i see this:
<div class="form-group">
<label class="control-label col-md-2" for="surname">Фамилия</label>
<div class="col-md-10">
<input htmlAttributes="{ class = form-control }" id="surname" name="surname" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="surname" data-valmsg-replace="true"></span>
</div>
</div>
How i can enabled Guid in name field? And how change fields in TextBoxFor?
I have two form controls in one line and other controls properly aligned using Bootstrap v3.3.4
Could you please help me in aligning the top two controls (drop-down and textbox) with the bottom text boxes.
Thank you in advance
I tried to replicate alignment issue using JSFiddle here: https://jsfiddle.net/bswn9o8g/
Also posting the Image here: http://postimg.org/image/4iawvs0zn/
Here is the HTML code
<div class="form-horizontal">
<h4>SearchVM</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group form-inline">
#Html.LabelFor(model => model.searchBy, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EnumDropDownListFor(model => model.searchBy, "Search By", htmlAttributes: new { #class = "form-control" })
#Html.TextBox("searchByVal", null, htmlAttributes: new { #placeholder = "SID / PID ", #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.FirstName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #placeholder = "First Name", #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.MiddleName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { #placeholder = "Middle Name", #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.LastName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #placeholder = "Last Name", #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DOB, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DOB, new { htmlAttributes = new { #placeholder = "Birth Date", #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CauseNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CauseNumber, new { htmlAttributes = new { #placeholder = "Cause#", #class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
It's not very clear from your question what do you want to achieve, but i think you want to have your dropdown menu and textbox inline and aligned with the other controls of your form.
Here's what you are looking for :
<div class=" form-group form-inline">
<div class="input-group">
<span class="input-group-addon">Search by</span>
<select class="form-control" data-val="true" data-val-required="The Search By field i1 required." id="searchBy" name="searchBy">
<option selected="selected" value="0">SID</option>
<option value="1">PID</option>
</select>
</div>
</div>
and here's the Fiddle link
UPDATE:
Here's what's you'r looking for :
<form class="form-horizontal">
<h4>SearchVM</h4>
<div class="form-group">
<label class="control-label col-md-2" for="email">Email:</label>
<div class="col-md-5">
<select class="form-control" data-val="true" data-val-required="The Search By field is required." id="searchBy" name="searchBy"><option selected="selected" value="0">Search By</option>
<option value="1">SID</option>
<option value="2">PID</option>
</select>
</div>
<div class="col-md-5">
<input class="form-control" id="searchByVal" name="searchByVal" placeholder="SID / PID " type="text" value="" />
</div>
...
And here's the Fiddle