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.
Related
I have this "little" problem.
I have created a project MVC, where I need to register a user, with different field. (I will show you only a part.)
One particular field, is giving me an issue:
On the field DateOfBirth, where I have implemented a datepicker on jquery
When I click on my EditorFor label:
I got at first all the old data I taped before, and my calendar is behind, so i can't select the date:
Is there a way to make disappear the cache and have only the calendar?
#model WebApplication2.Models.Person
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Person</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<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 { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</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 { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DateOfBirth, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { #class = "datepicker form-control" } })
#Html.ValidationMessageFor(model => model.DateOfBirth, "", new { #class = "text-danger" })
</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>
}
<div>
#Html.ActionLink("Back to List", "ListPerson")
</div>
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
#section Scripts {
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
#Scripts.Render("~/bundles/jqueryval")
<script>
$(function() {
$(".datepicker").datepicker(
{
dateFormat: "yy/mm/dd",
changeMonth: true,
changeYear : true
});
});
</script>
}
At first I thought it was just the cache of a browser, and I tested with many (IE11, Mozilla, Chrome), and I cleaned cache, but it seem that is storing the date on the application cache.
Do you know what it could be the reason?
Kind regards.
Try adding the autocomplete="off" attribute – Stephen Muecke
#Html.EditorFor(model => model.DateOfBirth, new { htmlAttributes = new { #class = "form-control", autocomplete = "off" } })
And it works :)
I'm working on an asp.net Mvc Project.
I want to implement a File up_loader to upload images. my File up_loader should create the correct address and fill the imgURL field of database.
my view looks like this
here is my view
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Hotel</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.StateId, "StateId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("StateId", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.StateId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.HotelRate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.HotelRate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.HotelRate, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.HotelName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.HotelName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.HotelName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Description, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Description, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ImageURL, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#*#Html.EditorFor(model => model.ImageURL, new { htmlAttributes = new { #class = "form-control" } })*#
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
#Html.ValidationMessageFor(model => model.ImageURL, "", new { #class = "text-danger" })
</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>
}
and here is my controller:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "Id,StateId,HotelRate,HotelName,Description,ImageURL")] Hotel hotel,HttpPostedFileBase file)
{
if (file != null)
{
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/Content/img/hotel"), fileName);
file.SaveAs(path);
hotel.ImageURL = path;
}
if (ModelState.IsValid)
{
db.Hotels.Add(hotel);
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.StateId = new SelectList(db.States, "Id", "StateName", hotel.StateId);
return View(hotel);
}
after saving data everything will be save correctly except ImgURL. its data is null after saving and also even before code comes t this command if (ModelState.IsValid){...}.
I suppose whole part
if (file != null)
{
//...
}
Not working
You should use
Html.BeginForm("", "", FormMethod.Post, new { enctype="multipart/form-data"})
You don't have file becouse on POST selected file data is not been serialized without enctype="multipart/form-data" attribute on form tag.
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>
}
When Partial View load in _Layout directly, I have no Problem in Client Validation and shows field by filed error, But When call Partial View as same as one part of index page:
#Html.Partial("_CreateUser", Model)
_CreateUser PartialView:
#model ProjInMvc.Models.User
<div id="update_panel"></div>
#using (Ajax.BeginForm("CreateUser", "Home",null, new AjaxOptions { UpdateTargetId = "update_panel", Url = "/Home/CreateUser", HttpMethod = "Post",InsertionMode =InsertionMode.Replace }, new { #class = "pull-right" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<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 { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</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 { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.UserName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.UserName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.UserName, "", new { #class = "text-danger" })
</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>
}
Can anyone help me to understand this problem?
Tnx.
You may be call in Html.BeginForm, form in form is incorrect, please check that
I'm working with a standard razor view with form data. I want to pass the input form data to my controller after pressing the submit button. My view looks like this:
#model CareSource.ReleaseAssistant.Models.Prime.Team
#{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Create New Team</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Team</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Abbreviation, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Abbreviation, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Abbreviation, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CreatedBy, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CreatedBy, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CreatedBy, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CreatedOn, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CreatedOn, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CreatedOn, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ModifiedBy, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ModifiedBy, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ModifiedBy, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ModifiedOn, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ModifiedOn, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ModifiedOn, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</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>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
The problem is that the information in the form is not being passed back to my controller to be handled by my action method. I'm trying create a new entry in my database using web api. My action method looks like this:
[HttpPost]
public ActionResult Create(FormCollection collection)
{
try
{
if (ModelState.IsValid)
{
HttpEndPointContext httpEndPoint = new HttpEndPointContext()
{
AuthenticationMethod = HttpAuthenticationMethods.None,
Ssl = false,
HttpMethod = HttpMethod.Post,
//Path = "localhost:32173/api/team/",
QueryStrings = null,
};
IProcessResult result = HttpConnectionManager.Current.SendMessage(httpEndPoint);
var response = result.ResponseData.ToString();
}
return RedirectToAction("Index");
}
catch
{
return View();
}
}
Most of the code in this project was generated using Codesmith Generator and uses the MicroORM called PetaPoco.
Since your form is strongly typed to an instance of Team and you are using that to generate the input form fields, you can use Team object as the parameter of your HttpPost method.
HttpPost]
public ActionResult Create(Team model)
{
if (ModelState.IsValid)
{
//access model.Properties
}
return View(model);
}
Do use Team model as parameter remove formCollection and try
Please update your View with the given code :
#using (Html.BeginForm("Create", "YourControllerName", FormMethod.Post, new { id = "form" }))
{
//Copy your current code as it is here.
}