first time use MVC and i want to change the position and want to change the logo. after this i write the #using
the error is Parser Error what happened ?
#using Angga.Models
#model LoginViewModel
#{ ViewBag.Title = "Log in"; }
<div class="col-sm-4">
</div>
<div class="col-sm-4">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form"})) { #Html.AntiForgeryToken()
<div class="page animsition vertical-align text-center" data-animsition-in="fade-in" data-animsition-out="fade-out" style="animation-duration: 800ms; opacity: 1;">
<div class="page-content vertical-align-middle">
<div class="panel">
<div class="panel-body">
<div class="brand">
<img class="brand-img" src="~/image/logo-blue.png" alt="..." />
<h2 class="brand-text font-size-18">MYLOYALTY</h2>
</div>
<form method="post" action="customer_search.php" autocomplete="off">
#Html.ValidationSummary(true, "", new {#class = "text-danger"})
<div class="form-group form-material floating">
<!-- Untuk Email-->
<!-- <label class="floating-label">Email</label> -->
<div class="form-group">
#Html.LabelFor(m => m.Email) #Html.TextBoxFor(m => m.Email, new { #class = "form-control" }) #Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
</div>
#*
<input style="margin-left: auto; margin-right: auto; text-align: center;" type="email" class="form-control" name="email" />*#
</div>
<!-- Untuk Password-->
<div class="form-group form-material floating">
#Html.LabelFor(m => m.Password) #Html.PasswordFor(m => m.Password, new {#class= "form-control"}) #Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger"}) #*
<input style="margin-left: auto; margin-right: auto; text-align: center;" type="password" class="form-control" name="password" />*#
</div>
<div class="form-group clearfix">
<div class="checkbox-custom checkbox-inline checkbox-primary checkbox-lg pull-left">
<input type="checkbox" id="inputCheckbox" name="remember" />
<label for="inputCheckbox">Remember me</label>
</div>
</div>
<button style="" class="btn btn-primary btn-block btn-lg" onclick="location.href='#Url.Action(" About ")'">Sign in</button>
</form>
</div>
</div>
}
<footer class="page-copyright page-copyright-inverse">
<p>© 2016. All RIGHT RESERVED.</p>
</footer>
</div>
</div>
</div>
<div class="col-sm-4">
</div>
#section Scripts { #Scripts.Render("~/bundles/jqueryval") }
and this my code :D, the error is Parser Error
The Error is
enter image description here
this arise for your nested form
because you already introduce a form in html div
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form"})) { #Html.AntiForgeryToken()
........
and you try to introduce another form in the same form
<form method="post" action="customer_search.php" autocomplete="off">
......
Related
I am building a form using bootstrap 4.3 with few Radio-Buttons, but the issue is, it overlaps each other as shown below.
I tried it in jsfiddle and the result is same. Here is my working in jsfiddle: https://jsfiddle.net/hifni/ky3xzej0/7/
My Razor page looks like this:
<div class="alert alert-info">
<p>The request will enable your Credit Balance to be in your account for future trading/settlement.</p>
<footer class="blockquote-footer">Subject to T&C</footer>
</div>
<style>
.form-control {
height: auto;
}
</style>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.HiddenFor(model => model.AccountId)
<input type="hidden" id="tempStore" />
#Html.HiddenFor(model => model.SendSMS)
#Html.HiddenFor(model => model.RequiresApproval)
</div>
<div class="form-group">
<label>Pick a Settlement Mode</label>
<div class="form-control">
<div class="form-check">
#Html.RadioButtonFor(model => model.IsSettlementOnHold, "No", new { #class = "form-check-input", #id = "rbIsSettlementOnHold_No" })
#Html.Label("rbIsSettlementOnHold_No", "Standard ", new { #class = "form-check-label" })
#Html.RadioButtonFor(model => model.IsSettlementOnHold, "Yes", new { #class = "form-check-input", #id = "rbIsSettlementOnHold_Yes" })
#Html.Label("rbIsSettlementOnHold_Yes", "On Request ", new { #class = "form-check-label" })
#Html.ValidationMessageFor(model => model.IsSettlementOnHold, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.TextAreaFor(model => model.AdditionalNote, 3, 50, new { #class = "form-control", #placeholder = "Any Aditional Note" })
#Html.ValidationMessageFor(model => model.AdditionalNote, "", new { #class = "text-danger" })
</div>
<div class="form-group">
#*<input type="submit" value="Submit" class="btn btn-default" id="btnSelfServiceRequestSubmit"/>*#
<button type="submit"
class="btn btn-dark"
id="btnSelfServiceRequestSubmit"
#*data-toggle="modal"
data-target="#modalEntityDetail"
data-url="#Url.Action("_CodePrompt", "ExternalSelfServiceRequest")"*#>
Submit
</button>
<button type="reset"
class="btn btn-warning">
Reset
</button>
</div>
#if (Model.RequiresApproval.Equals("Yes"))
{
<div class="alert alert-info" role="alert">
For security verification purpose you will be required to access your JKSB Registered Mobile, there will
be a verification code sent to it.
</div>
}
</div>
}
Appreciate any help.
You can separate your "form-check" div like this;
<div class="form-control">
<div class="form-check form-check-inline">
<input checked="checked" class="form-check-input" id="rbIsSettlementOnHold_No" name="IsSettlementOnHold" type="radio" value="No">
<label for="rbIsSettlementOnHold_No" class="form-check-label"> Standard</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" id="rbIsSettlementOnHold_Yes" name="IsSettlementOnHold" type="radio" value="Yes">
<label for="rbIsSettlementOnHold_Yes" class="form-check-label"> On Request </label>
</div>
</div>
And using "form-check-inline" class will be provide you a horizontal alignment.
I hope this helps.
I have the following simple bootstrap form:
#{
ViewBag.Title = "Register";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h3>Register</h3>
<br>
<form action="/User/Register">
<div class="form-group row">
<label class="col-sm-2 col-md-1 col-form-label">Name</label>
<div class="col-sm-10 col-md-2">
<input name="name" type="text" class="form-control" placeholder="Enter Name">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-md-1 col-form-label">Email</label>
<div class="col-sm-10 col-md-2">
<input name="email" type="email" class="form-control" placeholder="Enter email">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-md-1 col-form-label">MAC</label>
<div class="col-sm-10 col-md-2 positioned_relative">
<span class="add-new-icon glyphicon glyphicon-plus-sign" id="add_mac"> </span>
<input type="text" class="form-control" id="mac_addr" placeholder="Enter MAC">
</div>
</div>
<div class="form-group row new_mac_wrapper">
<div class="col-md-offset-3">
<div class="new_mac_container">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary col-sm-offset-1">Register</button>
</form>
I want to convert this into razor view as follows:
#model RouterManagement.Models.UserViewModel
#{
ViewBag.Title = "Register";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h3 class="pull-left">Register</h3> <br />
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group row">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "col-sm-2 col-md-1 col-form-label" })
<div class="col-sm-10 col-md-2">
#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">
#Html.LabelFor(model => model.Email, htmlAttributes: new { #class = "col-sm-2 col-md-1 col-form-label" })
<div class="col-sm-10 col-md-2">
#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">
#Html.LabelFor(model => model.Password, htmlAttributes: new { #class = "col-sm-2 col-md-1 col-form-label" })
<div class="col-sm-10 col-md-2">
#Html.EditorFor(model => model.Password, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Mac, htmlAttributes: new { #class = "col-sm-2 col-md-1 col-form-label" })
<div class="col-sm-10 col-md-2">
#Html.EditorFor(model => model.Mac, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Mac, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-sm-10 col-md-2">
<input type="submit" value="Create" class="btn btn-primary col-sm-offset-1" />
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
And for this conversion I get the following rendered HTML:
<form action="/Users/Register" method="post"><input name="__RequestVerificationToken" type="hidden" value="IZ_dvCy7QtB1VsoqQGh6x_Yzr1DME9V6LjKs1Fi8KL6KxOoKNNvFlH6mdw8yD4xIj-LKaUXFsNZndDTeHOa8xCVZPdu7b8qNXeL05IdIyiQ1"> <div class="form-group row">
<label class="col-sm-2 col-md-1 col-form-label" for="Name">Name</label>
<div class="col-sm-10 col-md-2">
<input class="form-control text-box single-line" id="Name" name="Name" type="text" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-md-1 col-form-label" for="Email">Email</label>
<div class="col-sm-10 col-md-2">
<input class="form-control text-box single-line" id="Email" name="Email" type="text" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="Email" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-md-1 col-form-label" for="Password">Password</label>
<div class="col-sm-10 col-md-2">
<input class="form-control text-box single-line" id="Password" name="Password" type="text" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="Password" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-md-1 col-form-label" for="Mac">Mac</label>
<div class="col-sm-10 col-md-2">
<span class="field-validation-valid text-danger" data-valmsg-for="Mac" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-sm-10 col-md-2">
<input type="submit" value="Create" class="btn btn-primary col-sm-offset-1">
</div>
</div>
</form>
This is approximately close to my static html. If you pay a deep attention you can see some additional html generated in case of razor view. I am okay with this additional html but why my design has been broken. I checked for css and js files. All are okay, but there is something related to razor conversion only. Any Idea?
N.S: I am switching from PHP to ASP. So I am apologizing if my question is not standard to ask here. Thanks for your time.
In brief - this two HTML's are not the same.
They differ in a few things:
- in original bootstrap form, you have inputs for Name, Email, and Mac - in generated you have Name, Email, Password, and Mac.
Then in original, each input tag is wrapped in div with class = "form-group row" in generated only first input has these, and the rest have only "form-group". Then in original inside MAC input group, you have div with class="col-sm-10 col-md-2 positioned_relative" and in original, there is no such thing.
Also in original, you have div with class="form-group row new_mac_wrapper" and in the generated code there is none.
I will not go further into details but as you can see you have two different code - hard to tell what is breaking things without a chance to see the whole project.
However, the suggestion is to start little by little - start with just one field (Name) in original and on generated code.
See the differences and only when there is none keep up adding and comparing one field at the time.
In my submit of my login form which is in pop-up it is not hitting the controller even though I provided the code in beginform with post method. I need to send the username and password to my controller for verification. Unable to figure out why it is not hitting.
[HttpPost]
public ActionResult LoginUser(UserInfo objUser)
{
int res = udaObj.CheckUser(objUser.UserName, objUser.Password);
if (res >= 1)
{
return RedirectToAction("Appointment", "Home");
}
else
{
//For testing purpose
return RedirectToAction("Appointment", "Home");
}
}
My view is as follows:
#using (Html.BeginForm("LoginUser", "Home", FormMethod.Post, new { id = "loginForm" }))
{
<div class="tab-pane fade active in" id="signin">
<fieldset>
<!-- Sign In Form -->
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="userid">Alias:</label>
<div class="controls">
#* <input required="" id="userid" name="userid" type="text" class="form-control" placeholder="JoeSixpack" class="input-medium" required="">*#
#Html.TextBoxFor(x => x.UserName, new { #class = "form-control input-large", #placeholder = "Joek#irawath.com", #required = "" , #id="userid" })
</div>
</div>
<!-- Password input-->
<div class="control-group">
<label class="control-label" for="passwordinput">Password:</label>
<div class="controls">
#*<input required="" id="passwordinput" name="passwordinput" class="form-control" type="password" placeholder="********" class="input-medium">*#
#Html.TextBoxFor(x => x.Password, new { #class = "form-control input-large", #placeholder = "********", #required = "", #type = "password" , #id="passwordinput" })
</div>
</div>
<!-- Multiple Checkboxes (inline) -->
<div class="control-group">
<label class="control-label" for="rememberme"></label>
<div class="controls">
<label class="checkbox inline" for="rememberme-0">
<input type="checkbox" name="rememberme" id="rememberme-0" value="Remember me" style="margin-left: 0px">
Remember me
</label>
</div>
</div>
<button id="btnsignin" type="submit" name="signin" class="btn btn-success">Sign In</button>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="signin"></label>
<div class="controls">
#* <button id="btnsignin" type="submit" name="signin" class="btn btn-success">Sign In</button>*#
</div>
</div>
</fieldset>
</div>
}
Check if the object UserInfo is the same model you are using in your view. Try using a FormCollection instead and check.
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>
}