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>
Related
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.
The file "Add.cshtml" is calling the partial view "_ManagePartial.cshtml" and passing the "Model""however the "Model " is not being picked up in the partial view.
When I include the code that's on the partial view into "Add.cshtml" everything works great.
Please advise what I''m doing wrong.
Error Message:
Click here to see the error message screenshot
File: _ManagePartial.cshtml
<div class="row">
<div class="col-md-4">
<div class="form-group">
#Html.LabelFor(model => model.UserName)
#Html.EditorFor(model => model.UserName, new { htmlAttributes = new { #class = "form-control input-lg" } })
#Html.ValidationMessageFor(model => model.UserName, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.UserPassword)
#Html.EditorFor(model => model.UserPassword, new { htmlAttributes = new { #class = "form-control input-lg" } })
#Html.ValidationMessageFor(model => model.UserPassword, "", new { #class = "text-danger" })
</div>
<div class="form-group"><button type="submit" class="btn btn-primary btn-lg">Submit</button></div>
</div>
<div class="col-md-4">
<div class="form-group">
#Html.LabelFor(model => model.UserEmail)
#Html.EditorFor(model => model.UserEmail, new { htmlAttributes = new { #class = "form-control input-lg" } })
#Html.ValidationMessageFor(model => model.UserEmail, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#Html.LabelFor(model => model.UserConfirmPassword)
<input type="password" class="form-control input-lg" name="UserConfirmPassword">
</div>
</div>
</div>
File: Add.cshtml
#model CardDistro.Models.AddUserViewModel
#{
ViewBag.Current = "Users#Index";
String Action = ViewBag.FormAction;
}
<h2 class="page-header">#ViewBag.Title</h2>
#using (Html.BeginForm(Action, "Users", FormMethod.Post, new { id = "SiteAddUserContainer" }))
{
<input type="hidden" name="UserID" value="#Model.UserID" />
if (ViewBag.Retval != null){
<div class="row"><div class="col-md-8"><div class="alert alert-danger">#ViewBag.Retval</div></div></div>
}
Html.RenderPartial("_ManagePartial", Model);
}
_ManagePartial.cshtml needs to identify the model by starting the partial view with
#model CardDistro.Models.AddUserViewModel
so the compiler knows what to do with model=>UserName
I have a login form code in an ASP MVC program.
I have two problems.
1)login form is not centered.
2)form-controls are not centered in the login form. I noticed when I put borders for form-group divs they are in the center and also I put border for They put in the middle too. but I do not know why textboxes do not display in the middle of form.
<div class="row">
<div class="col-md-4 col-md-offset-4 shadow" style="background-color:#0375b4;">
<section id="loginForm">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="col-md-12" style="margin-top:0.75cm">
<img class="profile-img" src="~/Content/Images/avatar1.png" />
</div>
<div class="form-group">
<div class="col-md-12">
#Html.LabelFor(m => m.Email, new { #class = "control-label", style = "color:white;" })
</div>
</div>
<div class="form-group ">
<div class="col-md-12 ">
#Html.TextBoxFor(m => m.Email, new { #class = "form-control ", #style = "text-align:left" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
#Html.LabelFor(m => m.Password, new { #class = "control-label", style = "color:white;" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
#Html.PasswordFor(m => m.Password, new { #class = "form-control", #style = "text-align:left" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="checkbox">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe, new { style = "color:white;" })
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="submit" value="Submit" class="btn btn-primary btn-block" />
</div>
</div>
}
<div style="height:20px">
</div>
Create following css class
div.centered {
margin: 0 auto;
width: 800px;
}
And set it to your container division.
I solve centralizing of form-controls by adding a class in bootstrap.css as follow:
.center_div{
margin: 0 auto;
width:80% /* value of your choice which suits your alignment */
}
then I use this class in login form view in
<section id="loginForm" class="center_div">
and form controls set in the middle of form
I have a problem with my partial views. I have two partial views that loads correctly and everything works fine there. But on form.submit only one function is triggered no matter what button the user is clicking. I have set an id on my #html.beginform but it doesn't seem to work correctly!
HTML:
<div class="tab-content">
<div class="fade in active hidden" id="reconiliation">
#Html.Partial("UploadReconciliationFile")
</div>
</div>
<div class="tab-content">
<div class="" id="payment">
#Html.Partial("UploadBankgiroFiles")
</div>
</div>
UploadReconciliationFile partial View
<div id="reconciliationdiv" class="hidden">
#using (Html.BeginForm("UploadReconciliationFile", "Payments", FormMethod.Post, new { id = "UploadReconciliationFile", #class = "merchant-form" }))
{
<div class="left-col">
<div class="form-group">
#if (Model.Installations.Any())
{
#Html.LabelFor(model => model.Installations, new { #class = "h4" })
#Html.DropDownListFor(model => model.Id, Model.Installations, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Installations, "", new { #class = "text-danger" })
}
</div>
</div>
<div class="form-button">
<div class="btn btn-primary" id="fileUploadDiv">
<input type="file" name="files" class="hidden" multiple="multiple" id="file" onchange=" form.submit() " />
<label for="file" id="fileLabel">Välj filer</label>
</div>
</div>
}
UploadBankgiroFiles partial view
<div id="bankgirodiv">
#using (Html.BeginForm("UploadBankgiroFiles", "Payments", FormMethod.Post, new { id = "UploadBankgiroFiles", #class = "merchant-form" }))
{
<div class="left-col">
<div class="form-group">
#if (Model.Installations.Any())
{
#Html.LabelFor(model => model.Installations, new { #class = "h4" })
#Html.DropDownListFor(model => model.Id, Model.Installations, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Installations, "", new { #class = "text-danger" })
}
</div>
</div>
<div class="form-button">
<div class="btn btn-primary" id="fileUploadDiv">
<input type="file" name="files" class="hidden" multiple="multiple" id="file" onchange="form.submit() " />
<label for="file" id="fileLabel">Välj filer</label>
</div>
</div>
}
Any suggestions and improvments on my code?
It worked with different id:s on the submit buttons.
<div id="bankgirodiv">
#using (Html.BeginForm("UploadBankgiroFiles", "Payments", FormMethod.Post, new { id = "UploadBankgiroFiles", #class = "merchant-form" }))
{
<div class="left-col">
<div class="form-group">
#if (Model.Installations.Any())
{
#Html.LabelFor(model => model.Installations, new { #class = "h4" })
#Html.DropDownListFor(model => model.Id, Model.Installations, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Installations, "", new { #class = "text-danger" })
}
</div>
</div>
<div class="form-button">
<div class="btn btn-primary" id="fileUploadDiv">
<input type="file" name="files" class="hidden" multiple="multiple" id="files" onchange="form.submit() " />
<label for="files" id="fileLabel">Välj filer</label>
</div>
</div>
}
I am using the default ASP.NET Identity register View, but I also want to pass along the first and last name of a person, how can I pass those variables together with the model that is sent to the controller?
#model Test1.Models.RegisterViewModel
<h2>#ViewBag.Title.</h2>
#using (Html.BeginForm("Register", "Account", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<h4>Create a new account.</h4>
<hr />
#Html.ValidationSummary("", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(m => m.Email, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.Email, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Password, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.Password, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.ConfirmPassword, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="Register" />
</div>
</div>
}