MVC Form Validation Thrown to All Forms in Page - asp.net-mvc

so i have this view with multiple same form like this
<div class="col-md-5">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Special Leave on Purposes Rules</h3>
</div>
<div class="panel-body">
#using (Html.BeginForm("Rule", "Admin", FormMethod.Post, new { #class = "form-horizontal", placeholder = ViewBag.maternity }))
{
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label">Set Max For</label>
<div class="col-sm-8">
#Html.DropDownListFor(
model => model.ID, (SelectList)ViewBag.special,
"--Select One--",
new
{ //anonymous type
#class = "form-control input-sm",
id= "inputEmail3"
})
</div>
#Html.ValidationMessageFor(m => m.ID, null, new { #class = "text-danger" })
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-4 control-label">Set Max</label>
<div class="col-sm-8">
#Html.TextBoxFor(model => model.Max, new { #Class = "form-control" })
</div>
#Html.ValidationMessageFor(m => m.Max, null, new { #class = "text-danger" })
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
</div>
}
</div>
</div>
</div>
<div class="col-md-5">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Maternity Leave Rules</h3>
</div>
<div class="panel-body">
#using (Html.BeginForm("Rule", "Admin", FormMethod.Post, new { #class = "form-horizontal" }))
{
<div class="form-group">
<label for="inputEmail3" class="col-sm-4 control-label">Maximum Leave</label>
<div class="col-sm-8">
<div class="input-group">
#Html.TextBoxFor(model => model.Max, new { #Class = "form-control", placeholder = ViewBag.maternity })
<span class="input-group-addon">In Row</span>
#Html.HiddenFor(model => model.ID, new { Value = 2 })
</div>
</div>
#Html.ValidationMessageFor(m => m.Max, null, new { #class = "text-danger" })
</div>
<div class="form-group">
<button type="submit" name="submit" value="Annual" class="btn btn-success">Save</button>
</div>
}
</div>
</div>
</div>
The problem here is that when the form submitted with wrong value, the modelstate validated and return error message for ALL of the form like in this picture.
I want that the error message is only shown for the form i submit, is that possible? Thanks for your help guys

Related

File upload issue in Asp.net mvc

I added HTML input type file After I run the project and click to the input file for choosing my file. When I choose file and click OK after Stopped my project.
What is the problem?
#using (Html.BeginForm("Update", "User", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="col-sm-3">
<div class="profile_img">
<div id="crop-avatar">
<img class="img-responsive avatar-view" width="250" height="150" src="~/Styles/images/#Model.User.Image" alt="Avatar" title="Change the avatar">
</div>
</div>
<div class="form-group">
<input type="file" name="file" id="file1" />
</div>
</div>
<div class="col-sm-8 form-horizontal form-label-left">
<div class="form-group">
#Html.LabelFor(model => model.User.FirstName, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.TextBoxFor(model => model.User.FirstName, new { #class = "form-control col-md-7 col-xs-12" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.User.LastName, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.TextBoxFor(model => model.User.LastName, new { #class = "form-control col-md-7 col-xs-12" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.User.MiddleName, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.TextBoxFor(model => model.User.MiddleName, new { #class = "form-control col-md-7 col-xs-12" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.User.UserName, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.TextBoxFor(model => model.User.UserName, new { #class = "form-control col-md-7 col-xs-12" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.User.Email, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.TextBoxFor(model => model.User.Email, new { #class = "form-control col-md-7 col-xs-12" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.User.Phone, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.TextBoxFor(model => model.User.Phone, new { #class = "form-control col-md-7 col-xs-12" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.User.RoleId, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.DropDownListFor(model => model.User.RoleId, new SelectList(Model.Roles, "Id", "RoleName"), htmlAttributes: new { #class = "form-control col-md-7 col-xs-12", id = "roles" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.User.Note, new { #class = "control-label col-md-3 col-sm-3 col-xs-12" })
<div class="col-md-8 col-sm-6 col-xs-12">
#Html.TextAreaFor(model => model.User.Note, new { #class = "form-control col-md-7 col-xs-12" , style = "min-height:100px !important" })
</div>
</div>
</div>
#Html.HiddenFor(m => m.User.Id)
#Html.HiddenFor(m => m.User.CreateDate)
#Html.HiddenFor(m => m.User.Status)
#Html.HiddenFor(m => m.User.Password)
<div class="col-sm-12 text-center" style="padding-bottom:3px">
<button class="btn btn-default">Yadda Saxla</button>
İmtina
</div>
}
UserController:
public ActionResult Update(int userId)
{
UserViewModel employeeViewModel = new UserViewModel
{
User = _userService.GetUser(userId),
Roles = _userService.GetRoles()
};
return View(employeeViewModel);
}
[HttpPost]
public ActionResult Update(UserViewModel userViewModel)
{
User user = new User();
user.Id = userViewModel.User.Id;
user.RoleId = userViewModel.User.RoleId;
user.UserName = userViewModel.User.UserName;
user.FirstName = userViewModel.User.FirstName;
user.LastName = userViewModel.User.LastName;
user.MiddleName = userViewModel.User.MiddleName;
user.Email = userViewModel.User.Email;
user.Phone = userViewModel.User.Phone;
user.Note = userViewModel.User.Note;
user.Status = userViewModel.User.Status;
if (userViewModel.User.Id == 0) user.CreateDate = DateTime.Now;
else user.CreateDate = userViewModel.User.CreateDate;
_userService.UpdateEmployee(user);
return RedirectToAction("Index");
}
Can do reference issue from Visual Studio?
Because when I remove
<input type="file" name="file" id="file1" />
This section project worked good.
I think the problem is in another place that is not in the code
I already added multipart/form-data for File upload..
Please help me to fix this error..

login form design problems in ASP MVC

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

How to Login/Register from bootstrap modal without redirecting?

I'm using the default web application mvc project, and i'm trying to login/register from modal:
So i made a new model containing the models for login and register
public class LogInRegisterViewModel
{
public LoginViewModel login { get; set; }
public RegisterViewModel register { get; set; }
}
then in my layout page i provide that model along with the partial view for the login/register:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
#if (User.Identity.IsAuthenticated)
{
<li>#Html.ActionLink("MyUploads", "Index", "Tutorials")</li>
<li>#Html.ActionLink("Upload", "Create", "Tutorials")</li>
}
</ul>
#Html.Partial("_LoginPartial",model) #*model = new LogInRegisterViewModel()*#
</div>
the html code for the modal is in my _LoginPartial view(maybe this is my mistake?), and the login and register forms(copied from the Account controller):
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content mc">
<div class="modal-body">
<div class="row">
<div class="col-md-6 login-modal">
<section id="loginForm">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<h4>Use a local account to log in.</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
<div>
<h5 class="user-name login-labels"><i class="fa fa-user" aria-hidden="true"></i> User Name</h5>
</div>
<div class="col-md-8 login-input">
#Html.TextBoxFor(m => m.login.UserName, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.login.UserName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<h5 class="user-password login-labels"><i class="fa fa-lock" aria-hidden="true"></i> Password</h5>
<div class="col-md-8 login-input">
#Html.PasswordFor(m => m.login.Password, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.login.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-10 login-btn">
<input type="submit" value="Log in" class="btn btn-primary" />
</div>
</div>
#* Enable this once you have account confirmation enabled for password reset functionality
<p>
#Html.ActionLink("Forgot your password?", "ForgotPassword")
</p>*#
}
</section>
</div>
<div class="col-md-6">
#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.register.FirstName, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.register.FirstName, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.register.LastName, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.register.LastName, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.register.ProfileAvatar, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.register.ProfileAvatar, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.register.Email, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.register.Email, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.register.Password, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.register.Password, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.register.ConfirmPassword, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.PasswordFor(m => m.register.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>
}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
and now if you click on log in button without providing username and password, the page will redirect me to Account/Login, same thing for the register.
So how can i fix this so the validation errors popup on the modal and not to be redirected to Account controller?
Thanks in advance for any help.
Ensure first of all you have included the scripts to actually validate the form:
<script src=".../Scripts/jquery.validate.js"></script>
<script src=".../Scripts/jquery.validate.unobtrusive.js"></script>
For client side validation include jquery validation bundle in your view or layout.
#section scripts
{
#Scripts.Render("~/bundles/jqueryval")
}
Also, you can use Ajax.BeginForm() helper instead of Html.BeginForm to implement your registration and login form.

How to set Session to ReceiveInvoice in Combobox to hold the Receive_ID for very next Entry

I want to use receive invoice for very next entry using session but it don't. Here I populate Receive InvoiceNo in create controller. please help me..
var rmaster = db.FactoryReceiveMaster.ToList();
List<SelectListItem> lstFactoryReceiveMaster = new List<SelectListItem>();
if (rmaster != null && rmaster.Count > 0)
{
foreach (var rInvoice in rmaster)
{
SelectListItem item = new SelectListItem { Text = rInvoice.RInvoiceNo, Value = rInvoice.Receive_ID.ToString(), Selected = false };
lstFactoryReceiveMaster.Add(item);
}
}
Session["lstFactoryReceiveMaster"] = lstFactoryReceiveMaster;
model.AssembleInvoice = lstFactoryReceiveMaster;
Create View....
#using Kendo.Mvc.UI;
#model MvcMahindraTwoWheelerERP.Models.FactoryProductAssembledViewModel
<div class="panel panel-info">
<div class="panel-heading">
<h3 style="font-family:cursive;font-size:large;"> Assemble Product - Entry Form</h3>
</div>
<div class="panel-body">
#using (Html.BeginForm("Create", "FactoryAssembleProduct", FormMethod.Post))
{
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-horizontal">
<div class="form-group">
<div class="form-group">
<div class="col-sm-offset-1 col-sm-4">
#Html.LabelFor(model => model.Assembled_Date)
#(Html.Kendo().DatePickerFor(model => model.Assembled_Date).Format("dd/MMM/yyyy").HtmlAttributes(new { #style = "width:100%;"}))
#Html.ValidationMessageFor(model => model.Assembled_Date)
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-4">
#Html.LabelFor(model => model.FactoryReceiveMaster.RInvoiceNo)
#(Html.Kendo().ComboBoxFor(model => model.FactoryReceiveMaster.Receive_ID).BindTo(Model.AssembleInvoice).HtmlAttributes(new {#style = "width:100%;"}))
#Html.ValidationMessageFor(model => model.FactoryReceiveMaster.Receive_ID)
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-4">
#Html.LabelFor(model => model.Product.ProdCode)
#(Html.Kendo().ComboBoxFor(model => model.Product.ProductID).BindTo(Model.AssembleProducts).HtmlAttributes(new {id="ProductID", #style = "width:100%;"}).Filter(FilterType.Contains))
#Html.ValidationMessageFor(model => model.Product.ProductID)
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-4">
#Html.LabelFor(model => model.Description)
#Html.TextBoxFor(model => model.Description, new { id="descriptipn", #class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-4">
#Html.LabelFor(model => model.Chassis_No)
#Html.TextBoxFor(model => model.Chassis_No, new {#class = "form-control" })
#Html.ValidationMessageFor(model => model.Chassis_No)
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-4">
#Html.LabelFor(model => model.Engine_No)
#Html.TextBoxFor(model => model.Engine_No, new {#class = "form-control" })
#Html.ValidationMessageFor(model => model.Engine_No)
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-4">
#Html.LabelFor(model => model.Key_No)
#Html.TextBoxFor(model => model.Key_No, new {#class = "form-control" })
#Html.ValidationMessageFor(model => model.Key_No)
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-4">
#Html.LabelFor(model => model.Remarks)
#Html.TextBoxFor(model => model.Remarks, new {#class = "form-control" })
#Html.ValidationMessageFor(model =>model.Remarks)
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-4">
<input type="submit" class="btn btn-lg btn-primary btn-block" value="Save Changes" />
</div>
</div>
</div>
</div>
}
</div>
Now, now how to fix it ...?

Partial view MVC set ID on Html.Beginform to get right submit function

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>
}

Resources