How would I put the codes generated by the razor on this switch?
It would work like the ckeckbox
Image Discription
An here is the link how its work:
https://bootsnipp.com/snippets/GaxR2
<div class="card" style="margin:50px 0">
<div class="card-header">Checkbox to Switch</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
Bootstrap Switch Success
<label class="switch ">
<input type="checkbox" class="success">
<span class="slider"></span>
</label>
</li>
</ul>
</div>
Razor Code
<div class="form-group">
#Html.LabelFor(model => model.ExibirInfoPosicionamento, htmlAttributes: new { #class = "control-label " })
<div class="col-md-10">
#Html.CheckBoxFor(model => model.ExibirInfoPosicionamento, new { })
</div>
</div>
Little late but I had some frustration with this too, got it working like this (Bootstrap 4.3.1)
Razor on my page --
<div class="col-lg-1">
#Html.EditorFor(m => Model.YN,"toggle", new { #id = "yn1 })
</div>
Editor Template 'toggle'
#model System.Boolean
<div class="custom-control custom-switch">
#Html.CheckBoxFor(m => m,
new { #class = "custom-control-input" })
#Html.LabelFor(m => m, new { #class = "custom-control-label" })
</div>
Related
I have a form with 3 bootstrap tabs in it. Client Validation works correctly when the tab where the validation error occurs is open and submit button is clicked. However, when i switch to a tab with no errors (while having errors in other tabs) a post back occurs and i get the correct validation messages.
Its a minor issue, but post back is not desired in this situation, because full client side validation must be completed before sending request to the server.
How can i correct this behavior?
Below is a copy of my form HTML:
#model RBZPOSMVC.ViewModel.CreateEditItem
....
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Details">Item Details</a></li>
<li><a data-toggle="tab" href="#Sales">Sale Price Groups</a></li>
<li><a data-toggle="tab" href="#Purchases">Purchase Price Groups</a></li>
</ul>
<div class="tab-content">
<div id="Details" class="tab-pane fade in active">
<div class="form-group">
#Html.LabelFor(model => model.Item.ItemCode, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Item.ItemCode, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Item.ItemCode, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Item.ItemName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Item.ItemName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Item.ItemName, "", new { #class = "text-danger" })
</div>
</div>
.... // more form controls
</div>
<div class="hidden">
#for (var i = 0; i < Model.PriceGroupList.Count; i++)
{
<div class="form-group" id="#Model.PriceGroupList[i].PriceGroupTypeId">
#Html.HiddenFor(model => model.PriceGroupList[i].PriceGroupId)
#Html.LabelFor(model => model.PriceGroupList[i].PriceGroupName,
Model.PriceGroupList[i].PriceGroupName,
htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PriceGroupList[i].Price, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PriceGroupList[i].Price, "", new { #class = "text-danger" })
</div>
</div>
}
</div>
<div id="Sales" class="tab-pane fade in ">
</div>
<div id="Purchases" class="tab-pane fade in ">
</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>
#section Scripts {
<script>
$.validator.setDefaults({
ignore: ""
});
</script>
#Scripts.Render("~/bundles/items")
#Scripts.Render("~/bundles/jqueryval")
}
Since two of you tabs are hidden when you submit the form, you need to configure the $.validator to validate hidden elements (which are not validated by default).
You current use of $.validator.setDefaults({ ignore: "" }); is not correct for jquery version 2.2.0 (I believe that usage was depreciated in version 1.9) and it needs to be
$.validator.setDefaults({
ignore: []
});
Note: do not add the above inside $(document).ready()
So folks, i just created a _Login partial instead of Login view and rendered that partial view in my _Layout. The partial view is shown in a Modal, until yet everything seems OK! But whenever i just click the Login (Sign In) button the page reloads and nothing happens although i expect an error like the E-mail field cannot be empty or the user does not exist but surprisingly nothing happens and the page refreshes.
Here is the code for the _Login partial.
#model Hire.af.WebUI.Models.LoginViewModel
<div class="modal-body">
<!--Social Media Login Links-->
<div class="form-group row login-socical">
<div class="col-sm-9 col-sm-offset-3">
<div class="button_socical fb">
<i class="fa fa-facebook-square"> </i>
<em class="fa-facebook-square">Login with Facebook</em>
</div>
<div class="button_socical gg">
<i class="fa fa-google-plus"> </i>
<em class="fa-google-plus">Login with Google</em>
</div>
<div class="button_socical linkedin">
<i class="fa fa-linkedin-square"> </i>
<em class="fa-linkedin-square">Login with LinkedIn</em>
</div>
</div>
</div>
<!--Login Form-->
<form class="noo-ajax-login-form form-horizontal">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<hr />
#Html.ValidationSummary(true, "", new { #class = "col-sm-3" })
<div class="form-group row">
#Html.LabelFor(m => m.Email, new { #class = "col-sm-3 control-label" })
<div class="col-sm-9">
#Html.TextBoxFor(m => m.Email, new { #class = "log form-control", #placeholder="Email OR Username" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group row">
#Html.LabelFor(m => m.Password, new { #class = "col-sm-3 control-label" })
<div class="col-sm-9">
#Html.PasswordFor(m => m.Password, new { #class = "pwd form-control", #placeholder="Password" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div class="checkbox">
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
</div>
</div>
</div>
<!--Remember Me Checkbox-->
<div class="form-actions form-group text-center">
<button type="submit" class="btn btn-primary">Sign In</button>
<div class="login-form-links">
<span><i class="fa fa-question-circle"></i> Forgot Password?</span>
<span>
Don't have an account yet?
<a href="#" class="member-register-link" data-rel="registerModal">
#Html.ActionLink("Register Now", "Register") <i class="fa fa-long-arrow-right"></i>
</a>
</span>
</div>
</div>
#* Enable this once you have account confirmation enabled for password reset functionality
<p>
#Html.ActionLink("Forgot your password?", "ForgotPassword")
</p>*#
}
</form>
</div>
and below is how i rendered this partial in my _Layout.
<div class="memberModalLogin modal fade" id="userloginModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-member">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Login</h4>
</div>
<!--Login Partial Goes Here-->
#Html.Partial("_Login")
</div>
</div>
</div>
Any help would be appreciated.
You have nested forms which is invalid html and not supported. Remove the outer form from your partial view
<form class="noo-ajax-login-form form-horizontal"> // remove this and its closing tag
#using (Html.BeginForm(....
Is it possible to put the model properties in this styled login form? I don't know where to put the lambda helpers (x=>x.email, x=>x.password etc). Any help is appreciated.
#model User
#using (Html.BeginForm("LogIn", "Account", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
<div class="container">
<div class="row">
<p><br></p>
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h3>Welcome Back! Please Sign In</h3>
</div>
<div class="form-group">
#Html.LabelFor(x => x.Username)
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
#Html.EditorFor(x => x.Username, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
#Html.LabelFor(x => x.Password)
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
#Html.EditorFor(x => x.Password, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<hr />
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span> Login</button>
<div>
<h3 class="page-header">No Account? Sign Up, Its Free</h3>
</div>
<button type="button" class="btn btn-primary" />
Sign Up
<span class="glyphicon glyphicon-check"></span>
</div>
</div>
</div>
</div>
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Edit:
the problem is now that i can't apply the wanted style on the input
i tried adding
#Html.EditorFor(x => x.Username, new { htmlAttributes = new{#class = "form-control"}}) and this also #Html.EditorFor(x => x.Username, new { #class = "form-control"}) and both doesnt work.
with adding above i`m trying to get this style:
but instead i'm getting these unstyled input boxes
2nd EDIT:
Instead of using :
#Html.EditorFor(x => x.Username, new { htmlAttributes = new { #class = "form-control" } })
I tried :
#Html.TextBoxFor(x => x.Username, new { #class = "form-control" })
and with this i'm getting the desired style, so i don`t exactly know the difference between Html.EditorFor and Html.TextBoxFor and if using Html.TextBoxFor is a good solution, maybe someone can clarify this.
As long as your Model is declared you can just change it to this:
<div class="container">
<div class="row">
<p><br></p>
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-body">
<div class="page-header">
<h3>Welcome Back! Please Sign In</h3>
</div>
<form role="form" method="post" action="/Users/LogIn">
<div class="form-group">
#Html.LabelFor(x => x.Username)
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
#Html.EditorFor(x => x.Username)
</div>
</div>
<div class="form-group">
#Html.LabelFor(x => x.Password)
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
#Html.EditorFor(x => x.Password)
</div>
</div>
<hr />
<button type="button" class="btn btn-success"><span class="glyphicon glyphicon-arrow-left"></span> Back</button>
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-log-in"></span> Login</button>
<div>
<h3 class="page-header">No Account? Sign Up, Its Free</h3>
</div>
<button type="button" class="btn btn-primary">
Sign Up
<span class="glyphicon glyphicon-check"></span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
Also instead of using <form role="form" method="post" action="/Users/LogIn"> you can do the following:
#using (Html.BeginForm("LogIn", "Users", FormMethod.Post))
{
// DisplayFor and EditorFor code
}
You can read about the differences between and EditorFor and a TextBoxFor Here
I am fairly new to MVC and a little stumped on this one.
I implemented ReCaptcha last night in my Umbraco MVC 4 application (6.1.6).
ReCaptcha works, the controller gets the correct captcha valid state and all is good. The problem is when the captcha is incorrect, I set the ModelState.AddModelError(string, string) and return the model in order to show that the captcha entered as incorrect, but the view never triggers the Html.ValidateMessage("captcha-error") to show the actual error message updated in the ModelState.
Any help or advice would be appreciated
Controller:
[HttpPost]
[RecaptchaControlMvc.CaptchaValidator]
public ActionResult SubmitContactFormAction(Models.ContactFormModel model, bool captchaValid, string captchaErrorMessage)
{
if (!captchaValid)
{
ModelState.AddModelError("captcha-error", captchaErrorMessage);
return View(model);
}
else
{
// Test ModelState and do stuff
}
}
View:
#model WebStaging.Models.ContactFormModel
#using Recaptcha
#using (Ajax.BeginForm("SubmitContactFormAction", "ContactForm", null, new AjaxOptions { HttpMethod = "POST" }, new { #id = "frmContactForm" }))
{
#Html.ValidationSummary(true)
<div>
Fields marked with * are required<br/><br />
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Name) *
</div>
<div class="input-column">
#Html.TextBoxFor(model => model.Name, new { #class = "input-242" })<br />
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Email) *
</div>
<div class="input-column">
#Html.TextBoxFor(model => model.Email, new { #class = "input-242" })
</div>
</div>
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Phone)
</div>
<div class="input-column">
#Html.TextBoxFor(model => model.Phone, new { #class = "input-242" })
</div>
</div>
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Subject) *
</div>
<div class="input-column">
#Html.TextBoxFor(model => model.Subject, new { #class = "input-242" })
</div>
</div>
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Message) *
</div>
<div class="input-column">
#Html.TextAreaFor(model => model.Message, new { #class = "input-textarea" })
</div>
</div>
<br />
<div id="captcha-panel" class="clear" style="text-align: right; float: right; padding-top: 5px;">
#Html.Raw(Html.GenerateCaptcha("captcha", "white"))
</div>
<p>
<div id="captcha-result" class="clear">
#Html.ValidationMessage("captcha-error")
</div>
<div class="clear pad-5" style="float: right; text-align: center;">
<button type="submit">Send</button><br />
<div id="submit-status" style="color: Green;"></div>
</div>
</div>
I think problem is caused because ReCaptcha is not a simple web control. I think you can easy walk around problem changing your "captcha-result" div with new class or style attribute.
<div id="captcha-result" class="someClassWithRedBigFont" >
#Html.ValidationMessage("captcha-error")
</div>
If you using jQuery you can check jQuery Validate plugin.
I have scenario where I have load data on dropdown selection change and after manipulation I have to submit the page for saving.
I have developed the page but since I new to MVC so can anyone verify me code and can suggest better approach of doing the same.
#using (Html.BeginForm("Save", "forecast"))
{
using (Html.BeginForm("YearChange", "forecast", FormMethod.Get, new {#id="frmYearChange" }))
{
<div class="span12">
<div class="well well-sm" style="padding-bottom: 0px !important;">
<div class="span5">
<div class="control-group">
<label class="control-label" for="selectGroup">
Select Group:</label>
<div class="controls">
#Html.DropDownListFor(m => m.groupId, Model.groupList, "--Select Group--", new { #id = "selectGroup" })
</div>
</div>
</div>
<div class="span5">
<div class="control-group">
<label class="control-label" for="selectYear">
Select Year:</label>
<div class="controls">
#Html.DropDownListFor(m => m.yearId, Model.yearList, "--Select Year--", new { #id = "selectYear", onchange = "selectYear_indexChanged();" })
</div>
</div>
</div>
<div class="clearfix">
</div>
</div>
</div>
}
.....
}
You can't have nested forms. You can however have multiple forms per view.
See W3C for more info.