Am working on a small project to get familiar with ASP.NET.
I have this model
public partial class COUNTRIES
{
public int COUNTRY_ID { get; set; }
public string COUNTRY_NAME { get; set; }
public int COUNTRY_AREA { get; set; }
}
View
<div class="col-lg-12">
<div class="form-group">
#Html.LabelFor(model => model.COUNTRY_NAME, new { #class = "col-lg-2 control-label" })
<div class="col-lg-9">
#Html.TextBoxFor(model => model.COUNTRY_NAME, new { #class = "form-control" })
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<div class="radio">
#Html.RadioButtonFor(m => m.COUNTRY_AREA, 1, new { id = "", value = "" }) North East
</div>
<div class="radio">
#Html.RadioButtonFor(m => m.COUNTRY_AREA, 2, new { id = "", value = "" }) North West
</div>
<div class="radio">
#Html.RadioButtonFor(m => m.COUNTRY_AREA, 3, new { id = "", value = "" }) South West
</div>
<div class="radio">
#Html.RadioButtonFor(m => m.COUNTRY_AREA, 4, new { id = "", value = "" }) South East
</div>
</div>
</div>
m => m.COUNTRY_AREA should generate 4 radio buttons, and the 4 radio buttons are tied to it.
What I want to achieve is that When I click on:
RadioButton 1 , it should display a popup modal form with message "You are from North East.
RadioButton 2 , it should display a popup modal form with message "You are from North West.
RadioButton 3 , it should display a popup modal form with message "You are from South East.
RadioButton 1 , it should display a popup modal form with message "You are from South East.
How do I go about it
This will work, and it is factored so that there is only one JavaScript function:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index706</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$(".DoPopup").click(function (event) {
alert("You are from the " + event.target.id);
})
})
</script>
</head>
<body>
<div class="col-lg-12">
<div class="form-group">
#Html.LabelFor(model => model.COUNTRY_NAME, new { #class = "col-lg-2 control-label" })
<div class="col-lg-9">
#Html.TextBoxFor(model => model.COUNTRY_NAME, new { #class = "form-control" })
</div>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<div class="radio">
#Html.RadioButtonFor(m => m.COUNTRY_AREA, 1, new { #class = "DoPopup", id = "North East", value = "" }) North East
</div>
<div class="radio">
#Html.RadioButtonFor(m => m.COUNTRY_AREA, 2, new { #class = "DoPopup", id = "North West", value = "" }) North West
</div>
<div class="radio">
#Html.RadioButtonFor(m => m.COUNTRY_AREA, 3, new { #class = "DoPopup", id = "South West", value = "" }) South West
</div>
<div class="radio">
#Html.RadioButtonFor(m => m.COUNTRY_AREA, 4, new { #class = "DoPopup", id = "South East", value = "" }) South East
</div>
</div>
</div>
</body>
</html>
Related
In this Form used validation summary for errors.
View:-
<div class="col-md-12 table-bordered" style="padding: 20px; margin:10px;">
<div class="col-md-12">#Html.ValidationSummary(false,"Please Correct Following details :", new { #class = "text-danger" })</div>
<div class="col-md-12" style="padding:10px;">
<div class="col-md-6">
<div style="width:95%;">
#Html.LabelFor(Model => Model.ItemName, new { style = "font-weight:bold;", #maxlength = "100" })
#Html.TextBoxFor(Model => Model.ItemName)
<span class="text-danger"> #Html.ValidationMessageFor(Model => Model.ItemName) </span>
</div>
</div>
<div class="col-md-6">
<div style="width:75%;">
#Html.LabelFor(Model => Model.ActiveProductGroup, new { style = "font-weight:bold;" })
#Html.DropDownListFor(Model => Model.ProductGroupID, new SelectList(ViewBag.ActiveProductGroup, "Value", "Text"), "--Select Value--", new { style = "Width:95%" })
<span class="text-danger"> #Html.ValidationMessageFor(Model => Model.ActiveProductGroup) </span>
</div>
</div>
</div>
<div class="col-md-12" style="padding:10px;">
<div class="col-md-3">
<div style="width:70%;">
#Html.LabelFor(Model => Model.SequenceNumber, new { style = "font-weight:bold;" })
#Html.TextBoxFor(Model => Model.SequenceNumber, new { style = "text-align:right", #maxlength = "3" })
<span class="text-danger"> #Html.ValidationMessageFor(Model => Model.SequenceNumber) </span>
</div>
</div>
<div class="col-md-3">
<div style="width:50%;">
#Html.LabelFor(Model => Model.UnitPrice, new { style = "font-weight:bold;" })
#Html.TextBoxFor(Model => Model.UnitPrice, new { style = "text-align:right", #maxlength = "5" })
<span class="text-danger"> #Html.ValidationMessageFor(Model => Model.UnitPrice) </span>
</div>
</div>
<div class="col-md-3">
<div style="width:50%;">
#Html.LabelFor(Model => Model.Quantity, new { style = "font-weight:bold;" })
#Html.TextBoxFor(Model => Model.Quantity, new { style = "text-align:right", #maxlength = "5" })
<span class="text-danger"> #Html.ValidationMessageFor(Model => Model.Quantity) </span>
</div>
</div>
<div class="col-md-3">
<div style="width:80%;">
#Html.LabelFor(Model => Model.EstimatedDeliveryDays, new { style = "font-weight:bold;" })
#Html.TextBoxFor(Model => Model.EstimatedDeliveryDays, new { style = "text-align:right", #maxlength = "2" })
<span class="text-danger"> #Html.ValidationMessageFor(Model => Model.EstimatedDeliveryDays) </span>
</div>
</div>
</div>
</div>
In this used html.validation summary
In this Form it should show asterisk (*) sign below textbox and error in validation summary
how to achieve it?
Can't you use the Required attribute in your model?
Example:
public class ClassName{
[Required(ErrorMessage = "* Please enter Item Name")]
public string ItemName {get;set;}
}
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 partial view which gets populated in modal body of my home page of MVC project. Partial view holds the login form as follows -
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="row">
<div class="col-xs-6">
<div class="well">
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
<div class="col-md-12">
#Html.LabelFor(model => model.UserEmailId, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.UserEmailId, new { htmlAttributes = new { #class = "form-control", placeholder = "example#gmail.com" } })
#Html.ValidationMessageFor(model => model.UserEmailId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
#Html.LabelFor(model => model.UserPassword, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.UserPassword, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.UserPassword, "", new { #class = "text-danger" })
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="remember"> Remember login
</label>
</div>
</div>
<button type="button" class="btn btn-success btn-block" onclick="location.href='#Url.Action("Login", "Home")'">
Login
</button>
</div>
</div>
<div class="col-xs-6">
<p class="lead">Sign up with</p>
<ul class="list-unstyled" style="line-height: 2">
<li><span class="fa fa-check text-success"></span> See all your orders</li>
<li><span class="fa fa-check text-success"></span> Fast re-order</li>
<li><span class="fa fa-check text-success"></span> Save your favorites</li>
<li><span class="fa fa-check text-success"></span> Fast checkout</li>
<li><span class="fa fa-check text-success"></span> Get a gift <small>(only new customers)</small></li>
<li><u>Read more</u></li>
</ul>
</div>
</div>
}
I am using a partial classes to define my data validations for the models(so that they wont get missed if I update my db first models) -
public class UserMetadata
{
[Display(Name ="Username")]
[EmailAddress(ErrorMessage ="Please enter your email address")]
[Required(ErrorMessage ="Required field")]
public string UserEmailId { get; set; }
[Display(Name ="Password")]
[DataType(DataType.Password)]
[Required(ErrorMessage = "Username is required")]
[StringLength(15, ErrorMessage = "Must be between 8 and 15 characters", MinimumLength = 8)]
public string UserPassword { get; set; }
}
The validations are not working on the client side. They are not getting triggered. Am I missing some script reference?
I already have "ClientValidationEnabled" set to true in my web.config.
Please help. Thanks!
Edit -
The following is all included in my layout -
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/2d83329334.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
Hi please check below code for reference
1. Model
public class UserMetadata
{
[Display(Name = "Username")]
[EmailAddress(ErrorMessage = "Please enter your email address")]
[Required(ErrorMessage = "Required field")]
public string UserEmailId { get; set; }
[Display(Name = "Password")]
[DataType(DataType.Password)]
[Required(ErrorMessage = "Username is required")]
[StringLength(15, ErrorMessage = "Must be between 8 and 15 characters", MinimumLength = 8)]
public string UserPassword { get; set; }
}
2. Controller
public class UserDataController : Controller
{
// GET: Contacts/UserData
public ActionResult Index()
{
var userData = new UserMetadata();
return View(userData);
}
}
view and Javascript
#model UserMetadata
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
#using (Html.BeginForm())
{
<div class="row">
<div class="col-xs-6">
<div class="well">
<div class="form-horizontal">
#Html.ValidationSummary(true, "", new { #class = "text- danger" })
<div class="form-group">
<div class="col-md-12">
#Html.LabelFor(model => model.UserEmailId, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.UserEmailId, new { htmlAttributes = new { #class = "form-control", placeholder = "example#gmail.com" } })
#Html.ValidationMessageFor(model => model.UserEmailId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-12">
#Html.LabelFor(model => model.UserPassword, htmlAttributes: new { #class = "control-label" })
#Html.EditorFor(model => model.UserPassword, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.UserPassword, "", new { #class = "text-danger" })
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="remember" id="remember"> Remember login
</label>
</div>
<button type="button" class="btn btn-success btn-block" onclick="loginUser();">
Login
</button>
</div>
</div>
</div>
</div>
}
<script>
function loginUser()
{
if($('form').valid())
{
//redirect to some action like window.location=somerootPath+/login/home
}
else
{
//not valid
}
}
OutPut
Ensure the highlighted js are loaded except jquery UI.
One way of solution is:
In the html editor add 'required' field as below
#Html.EditorFor(model => model.UserEmailId, new { htmlAttributes = new { #class = "form-control", placeholder = "example#gmail.com",#required="required" } })
and no need of Html.ValidationMessageFor() for this.
when adding a customer (client) , I have a DropDownList of Number , when I select RaisonSocial should get the value relative to the number :
the Number and RaisonSocial are two attributes in the same table
This is my controller'action :
[HttpGet]
public ActionResult Register()
{
ViewBag.No_ = new SelectList(dbCustomer.AURES_GROS_Customer.ToList(), "No_", "No_");
ApplicationUser user = new ApplicationUser();
// Get Raison Sociale relative to No_ selected
user.RaisonSociale = context.Users.First(c => c.No_.Equals(NumClient)).RaisonSociale;
ViewBag.Remise = user.RaisonSociale;
//ViewBag.Remise= new SelectList(dbCustomer.AURES_GROS_Customer.ToList(), "Name", "Name");
return View();
}
This is my View : // Register :
#using (Html.BeginForm("Register", "Account", FormMethod.Post, new { #class = "form-horizontal form-label-left", role = "form", #id = "demo-form2" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary("", new { #class = "text-danger" })
#*" Label de Numéro de Client"*#
<div class="form-group">
<label for="No_" class="control-label col-md-3 col-sm-3 col-xs-12">N° Client</label>
<div class="col-md-9 col-sm-9 col-xs-12">
#Html.DropDownList("No_", (SelectList)ViewBag.No_, " -- Selectionner numéro de Client -- ", new { #id="test", onchange = "document.getElementById('NumClient').value = this.value;" })
</div>
</div>
#*" Label de Raison Sociale"*#
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="RaisonSociale">
Raison Sociale
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" name="RaisonSociale" value="#ViewBag.Remise" readonly="readonly" class="form-control col-md-7 col-xs-12" />
</div>
</div>
Thanks
Modify your dropdown onchange function
#Html.DropDownList("No_", (SelectList)ViewBag.No_, " -- Selectionner numéro de Client -- ", new { #id="test", onchange = "getddlVal(this.value)" })
Javascript
function getddlVal(selectedval)
{
window.location = '/Controller/action?ddlvalue=' + selectedval;
}
I have page that uses a partial view for a contact form, and the contact form is validated (so when I don't provide a required field, it redirect me to specific layout I create for this partial.)
Here is how my page is laid out:
Last image is a blank_layout I created for my partial view because if I don't do it, it changes all content like navbar and other parts of the page.
View Model:
public class ContactoViewModel
{
public IEnumerable<ProductosModel> ProductosListes { set; get; }
public String Descripcion { get; set; }
public String Id { get; set; }
[Required(ErrorMessage = "Es necesario que ingrese su nombre")]
public String Name { get; set; }
[Required(ErrorMessage = "Es necesario que ingrese su correo")]
[Email(ErrorMessage = "Ingrese un Email válido")]
public String Email { get; set; }
[Required(ErrorMessage = "Ingrese algún comentario por favor")]
[MinLength(10, ErrorMessage = "Es necesario que ingrese al menos 10 caracteres")]
public String Comments { get; set; }
}
Partial view:
#model DismedHmo.Models.ContactoViewModel
#{
Layout = "~/Views/Shared/Blank_Layout.cshtml";
}
#*<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/component.css" rel="stylesheet" />
<link href="~/Content/default.css" rel="stylesheet" />*#
<div class="row">
<!-- feedback -->
<article class="feedback">
#*<div class="title-contact">Deja un mensaje </div>*#
#using (Html.BeginForm("Contact_Partial", "ContactModels", FormMethod.Post))
{
<div class="title-margin">
#*<h6>Campos Requeridos*</h6>*#
</div>
<div class="input-group">
<div class="col-md-12">
<div class="relative">
<i class=" fa fa-user appointment-contact"></i>
<div class="contactlbl">
#Html.TextBoxFor(model => model.Name, new { #class = "form-control, txtboxexpand", #style = "width:100%", #placeholder = "Nombre*" })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="input-group">
<div class="col-md-12">
<div class="relative">
<i class=" fa fa-envelope appointment-contact"></i>
<div class="contactlbl">
#Html.TextBoxFor(model => model.Email, new { #class = "form-control, txtboxexpand", #style = "width:100%", #placeholder = "Email*", #type = "email" })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="input-group">
<div class="hidden-xs col-sm-12 col-md-12 col-lg-12">
<div class="relative">
<i class=" fa fa-align-left appointment-message"></i>
</div>
<div class="contactlbl">
#Html.TextAreaFor(model => model.Comments, new { #class = "form-control, txtareaexpand", #style = "width:100%", #placeholder = "Mensaje*" })
#Html.ValidationMessageFor(model => model.Comments, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="input-group">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
<div class="relative">
<i class=" fa fa-align-left appointment-message"></i>
</div>
<div class="contactlbl">
#Html.TextAreaFor(model => model.Comments, new { #class = "form-control, txtareaexpandxs", #style = "width:100%", #placeholder = "Mensaje*" })
#Html.ValidationMessageFor(model => model.Comments, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group margen-btn">
<div class="col-sm-12">
<input type="submit" value="Solicitar cotización" class="btn btn-contacto" />
</div>
</div>
}
</article>
</div>
Calling partial view on main page:
<div class="col-md-6">
#Html.Action("Contact_Partial", "ContactModels")
</div>
Controller:
[HttpPost]
public ActionResult Contact_Partial(ContactoViewModel model)
{
if (!ModelState.IsValid)
{
Danger("Su mensaje no fue enviado, porfavor intente de nuevo.");
return View();
}
using (var emailService = new EmailService())
{
emailService.SetRecipient("contacto#dismedhmo.com");
emailService.Contacto(model.Name, model.Email, model.Comments);
emailService.Send();
}
Success(string.Format("Tu mensaje ha sido enviado con exito."), true);
return RedirectToAction("Productos", "Productos");
}
public ActionResult MensajeEnviado()
{
return View();
}
I really want the validation page to be displayed where the contact form was. How can I do this?