I want to align 2 test box and drop-down in a same row and display labels below those text boxes. How I do that.
I want to display something like this
In my code text boxes are displaying one below the other.
<div class="form-horizontal ">
#Html.TextBoxFor(model => model.City, new{ placeholder = "City" })
#Html.ValidationMessageFor(model => model.City)
<div><small class="form-text text-muted">City</small></div>
#Html.DropDownListFor(x => x.State, PressRoom.Helpers.StateNamesList.GetStatesList(), new { placeholder = "--Select State--" })
#Html.ValidationMessageFor(model => model.State)
<div><small class="form-text text-muted">State</small></div>
#Html.TextBoxFor(model => model.ZipCode, new { placeholder = "Zip Code" })
#Html.ValidationMessageFor(model => model.ZipCode)
<div><small class="form-text text-muted">Zip</small></div>
</div>
With bootstrap4, you can achieve that using either form-row or just regular row css class.
<form>
<!-- you can use "row" class here -->
<div class="form-row">
<div class="col">
#Html.TextBoxFor(x => x.City, new { #class = "form-control" })
#Html.ValidationMessageFor(x => x.City)
#Html.Labelfor(x => x.City, new { #class = "text-muted small" })
</div>
<div class="col">
#Html.DropDownListFor(x => x.State,
PressRoom.Helpers.StateNamesList.GetStatesList(),
"-- Select a state --",
new { #class = "form-control" })
#Html.ValidationMessageFor(x => x.State)
#Html.Labelfor(x => x.State, new { #class = "text-muted small" })
</div>
<div class="col">
#Html.TextBoxFor(x => x.ZipCode, new { #class = "form-control" })
#Html.ValidationMessageFor(x => x.ZipCode)
#Html.Labelfor(x => x.ZipCode, new { #class = "text-muted small" })
</div>
</div>
</form>
And it will look like:
Related
I have a problem while uploading a File to a DMS server..I seem to not get value from a File label on my Insert page, I would be thankful for a suggestion or answer..
Here is my Create_Form
#model InsertDbProcedure
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(model => model.IP_FILETYPE, new { #class = "control-label col-md-2" })
<div class="col-md-1">
#Html.EditorFor(model => model.IP_FILETYPE)
#Html.ValidationMessageFor(model => model.IP_FILETYPE)
</div>
#Html.LabelFor(model => model.File, new { #class = "control-label col-md-2" })
<div class="col-md-5">
#Html.EditorFor(model => model.File)
#Html.ValidationMessageFor(model => model.File)
#Html.ValidationMessageFor(model => model.FileName)
#Html.ValidationMessageFor(model => model.NewFileName)
</div>
</div>
</div>
<script>
const myFileForm = $('#File')[0].form;
$(myFileForm).attr('enctype', 'multipart/form-data');
</script>
and here is where i get error in my controller
Stream fileSteam = form.File.InputStream;
I have this in my View:
<div class="form-group">
#Html.LabelFor(model => model.Q7, new { #class = "control-label col-md-4" })
<div class="col-md-5">
#Html.EditorFor(model => model.Q7)
#Html.ValidationMessageFor(model => model.Q7)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Q8, new { #class = "control-label col-md-4" })
<div class="col-md-5">
#Html.EditorFor(model => model.Q8)
#Html.ValidationMessageFor(model => model.Q8)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Q9, new { #class = "control-label col-md-4" })
<div class="col-md-5">
#Html.EditorFor(model => model.Q9)
#Html.ValidationMessageFor(model => model.Q9)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Q10, new { #class = "control-label col-md-4" })
<div class="col-md-5">
#Html.EditorFor(model => model.Q10)
#Html.ValidationMessageFor(model => model.Q10)
</div>
</div>
The user will enter this values and I have to sum all the values and show the result in another control, how can I do this in my View? Do i have to use Javascript or can i do it in a different way?
Thanks
You can invoke jquery's .focusout() for each editor, as all your editors will have their model property name id.
> $("#Q7").focusout(function() {
> // access the values of each textbox through $( "#Qn" ).text()
// cast, validate and add
> })
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'm fairly new to MVC and I'm not coming up with the right question to get my answer from Google, so here I am.
I have a dropdownlist box that holds a 'list' of addresses associated to a customer, on this page I want to be able to click on one of the addresses and use the selected 'id' to get the correct address model from a list to populate all the address fields and switch when a different address is selected. Can this be done with binding or do I have to do a lot of 'manual' resetting of the values?
<table>
<tr>
<td colspan="2">
<div class="form-group">
#Html.LabelFor(model => model.SelectedLocation.CityState, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.Location.City
, Model.Carrier.Locations.Select(x => new SelectListItem { Value = x.ID.ToString(), Text = x.CityState })
, new { #rows = 6, #multiple = false, style = "width: 300px;", onchange = "onChangeLocationDDL(this)" })
</div>
</div>
</td>
</tr>
<tr>
<td valign="top">
<div class="form-group">
#Html.LabelFor(model => model.SelectedLocation.Address1, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SelectedLocation.Address1)
#Html.ValidationMessageFor(model => model.SelectedLocation.Address1)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SelectedLocation.Address2, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SelectedLocation.Address2)
#Html.ValidationMessageFor(model => model.SelectedLocation.Address2)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SelectedLocation.City, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SelectedLocation.City)
#Html.ValidationMessageFor(model => model.SelectedLocation.City)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SelectedLocation.State, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SelectedLocation.State)
#Html.ValidationMessageFor(model => model.SelectedLocation.State)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SelectedLocation.Zip, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SelectedLocation.Zip)
#Html.ValidationMessageFor(model => model.SelectedLocation.Zip)
</div>
</div>
</td>
<td valign="top">
<div class="form-group">
#Html.LabelFor(model => model.SelectedLocation.Country, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SelectedLocation.Country)
#Html.ValidationMessageFor(model => model.SelectedLocation.Country)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SelectedLocation.Latitude, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SelectedLocation.Latitude)
#Html.ValidationMessageFor(model => model.SelectedLocation.Latitude)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SelectedLocation.Longitude, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SelectedLocation.Longitude)
#Html.ValidationMessageFor(model => model.SelectedLocation.Longitude)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SelectedLocation.LocationType, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.SelectedLocation.LocationType, (new CarrierDirectoryWeb.Models.LocationTypes()).ToSelectList())
#Html.ValidationMessageFor(model => model.SelectedLocation.LocationType)
</div>
</div>
<div class="form-group">
<div class="col-md-10">
#Html.HiddenFor(model => model.SelectedLocation.CarrierID)
</div>
</div>
</td>
</tr>
</table>
If your ok hitting the controller to update a part of the page here is how you could do it:
-create a partial view for your html that is responsible for displaying the address.
-have your original view call this partial and pass in the address model.
-create an action that will take an Id and return the PartialViewResult.
-pass onchange as an html attribute for your dropdown that will should be a one liner using jquery to call the action method and replace the div that contains the address.
So I have a ViewModel and the properties are all validated by having required attributes on them. When I submit the form it doesn't throw any error messages, i.e. name field is required.
I think I have figured where the problem is. Its in the submit button, how do I get the button to hit the HttpPost method of the ActionList because at the moment its not hitting that, hence the modelstate is not being validated.
View:
<h2>#ViewBag.Title</h2>
<hr>
<div class="well">
#using (Html.BeginForm("BookingDetails", "Booking"))
{
#Html.ValidationSummary(true)
<div class="form-group">
#Html.DisplayNameFor(m => m.FirstName)
#Html.TextBoxFor(m => m.FirstName, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.FirstName)
</div>
<div class="form-group">
#Html.DisplayNameFor(m => m.Surname)
#Html.TextBoxFor(m => m.Surname, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Surname)
</div>
<div class="form-group">
#Html.DisplayNameFor(m => m.EmailAddress)
#Html.TextBoxFor(m => m.EmailAddress, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.EmailAddress)
</div>
<div class="form-group">
#Html.DisplayNameFor(m => m.MobileNumber)
#Html.TextBoxFor(m => m.MobileNumber, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.MobileNumber)
</div>
<div class="form-group">
#Html.DisplayNameFor(m => m.NumberOfPeople)
#Html.TextBoxFor(m => m.NumberOfPeople, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.NumberOfPeople)
</div>
<div class="form-group">
#Html.DisplayNameFor(m => m.Date)
#Html.TextBoxFor(m => m.Date, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Date)
</div>
<div>
#Html.DisplayNameFor(m => m.Time)
#Html.TextBoxFor(m => m.Time, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Time)
</div>
}
</div>
<div class="form-group">
#Html.ActionLink("Book my table", "BookingDetails", "Booking" new { #class ="btn btn-primary" })
</div>
Controller:
// GET:
public ActionResult BookingDetails()
{
return View();
}
// Post
[HttpPost]
public ActionResult BookingDetails(BookingDetailsViewModel model)
{
if(ModelState.IsValid)
{
return RedirectToAction("BookingConfirmation");
}
return View(model);
}
You have two problems that I can see.
Firstly, your button isn't a submit button. Its a link that sits outside of the form. You must move it into your form and make it a submit button (or write some javascript that submits the form on click):
<div>
#Html.DisplayNameFor(m => m.Time)
#Html.TextBoxFor(m => m.Time, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Time)
</div>
<input type="submit" class="btn btn-primary" /> <!-- move it inside the form -->
#* ^^^^ submit *#
} <!-- end of your form is here -->
Also, Html.ValidationSummary(true) will hide all of your property errors from your Validation Summary. This may not be what you want. If you run into that issue.. remove true from the call.