We Keep Coding

Model Validation in Asp.Net Core Doesnt Work

my model validation doesnt work but every thing is ok I mean I have asp-net-validationin in view and my model have attributes and my submit button send the form with post method to index method in Home controller but the validation not working but the interesting part is that my login validation is work but my main form validation that has all the things that login form has not work I try every thing but no result. but I think the problem can be in the controller. I dont have any idea please help.
Controller
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index(User user)
{
if (ModelState.IsValid)
{
return RedirectToAction("Index");
}
return View(user);
}
User Model
public class User
{
[Key]
public int LeadId { get; set; }
[Display(Name ="name")]
[Required(ErrorMessage = "please enter your name")]
[MaxLength(50,ErrorMessage ="the max is 50")]
public string FirstName { get; set; }
[Display(Name = "family")]
[Required(ErrorMessage = "please enter your family")]
[MaxLength(50,ErrorMessage = "the max is 50")]
public string LastName { get; set; }
[Display(Name = "email")]
[Required(ErrorMessage = "please enter your email")]
[MaxLength(100,ErrorMessage = "the max is 100")]
[DataType(DataType.EmailAddress)]
public string EMailAddress1 { get; set; }
[Display(Name = "mobile")]
[Required(ErrorMessage = "please enter your mobile")]
[MaxLength(11,ErrorMessage = "the max is 11")]
[DataType(DataType.PhoneNumber)]
public string MobilePhone { get; set; }
[Required(ErrorMessage = "please choose gender")]
public int gender { get; set; }
}
view
#model DataLayer.User
#{
ViewData["Title"] = "welcome to form";
Layout = "/Views/Shared/_Layout.cshtml";
}
<div class="preloader type-preloader d-flex justify-content-center align-items-center">
<img src="/files/preloader/sdf.gif" alt="preloader" />
</div>
<div class="container">
<form method="post" asp-action="Index" asp-controller="Home" name="myForm" id="myForm" class="box box1 col-lg-12 pb-3 pt-3 col-md-12 col-sm-12 col-12">
<div class="row">
#* Name *#
<div class="form-group floating-label-group col-6 col-sm-12 col-xl-12 col-md-6 col-lg-6">
<i class="zmdi zmdi-account namedarkmode namedarkmode1 "></i>
<input asp-for="FirstName" type="text" name="Name" class="Nameinput Nameinput1 name farsiinput jh" lang="fa" required autocomplete="off" title="enter your name" maxlength="50" />
<label asp-for="FirstName" class="floating-label-name floating-label-name1">name:</label><br />
<span asp-validation-for="FirstName" class="text-danger"></span>
</div>
#* Family *#
<div class="form-group floating-label-group col-6 col-sm-12 col-xl-12 col-md-6 col-lg-6">
<i class="zmdi zmdi-account familydarkmode familydarkmode1 "></i>
<input asp-for="LastName" type="text" name="Family" class="Familyinput Familyinput1 farsiinput family" lang="fa" required autocomplete="off" title="enter your family" maxlength="50" />
<label asp-for="LastName" class="floating-label-family floating-label-family1">family:</label><br />
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
</div>
#* Email *#
<div class="row">
<div class="form-group floating-label-group col-12 col-sm-12 col-md-12 col-xl-12 col-lg-12">
<i class="zmdi zmdi-email emaildarkmode emaildarkmode1"></i>
<input asp-for="EMailAddress1" type="email" name="Email" class="Emailinput Emailinput1" autocomplete="off" required title="enter your email" maxlength="100" />
<label asp-for="EMailAddress1" class="floating-label-email floating-label-email1">email:</label>
<span asp-validation-for="EMailAddress1" class="text-danger"></span>
</div>
</div>
#* Mobile *#
<div class="row">
<div class="d-flex align-items-center align-items-baseline col-12">
<div class="form-group floating-label-group">
<i class="zmdi zmdi-phone phonedarkmode phonedarkmode1"></i>
<input asp-for="MobilePhone" type="tel" name="Mobile" class="MobileInput MobileInput1 farsiinput" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" pattern="[0-9]{11}" lang="fa" dir="rtl" autocomplete="off" required title="enter your mobile" maxlength="11" />
<label asp-for="MobilePhone" class="floating-label-mobile floating-label-mobile1">mobile:</label><br />
<span asp-validation-for="MobilePhone" class="text-danger"></span>
</div>
#* Male/Female *#
<div class="form-group d-inline">
<div class="form-check custom-control custom-radio d-inline">
<input class="form-check-input MaleInput MaleInput1" type="radio" id="MaleRadio" name="Gender" />
<label class="form-check-label custom-control-label cl maledarkmode maledarkmode1" for="MaleRadio"> man</label>
</div>
<div class="form-check custom-control custom-radio d-inline">
<input class="form-check-input FemaleInput FemaleInput1" type="radio" id="FemaleRadio" name="Gender" />
<label class="form-check-label custom-control-label cl femaledarkmode femaledarkmode1" for="FemaleRadio"> woman</label>
<small class="text-danger"></small>
</div>
<span asp-validation-for="gender"></span>
</div>
</div>
</div>
#* reCAPTCHA *#
<div class="pt-2">
<div class="d-flex justify-content-start form-group recaptcha">
<div class="g-recaptcha" data-sitekey="6LcZ05gbAAAAAHOBPJu3xvtCkQcB_mMQIVrxGmTd"></div>
</div><br />
<small class="text-danger recaptchaerror mb-6"></small>
</div>
#* button *#
<div class="row pt-3 col-12">
<button class="d-flex justify-content-start btn btn-outline-success" type="submit">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
enter
</button>
</div>
</form>
</div>
layout
#model AdminContent
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>form</title>
#* material design iconic *#
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">
#* bootstrap *#
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="/css/bootstrap.min.css" rel="stylesheet" />
#* css *#
<link rel="stylesheet" href="/css/style.css" />
#* fontawsome *#
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="icon" type="image/x-icon" href="">
</head>
<body class="d-flex justify-content-center align-items-center">
<header class="header">
<nav class="navbar navbar1 d-flex align-items-baseline navbar-expand-sm navbar-toggleable-sm">
<div class="container navtop navtop1">
#* <img src="/files/AdminImages/#Model.IconImageName" />
*# #if (User.Identity.IsAuthenticated)
{
<h1 class="navbar-brand navbar-brand1 d-inline text-secondary">#User.Identity.Name #ViewData["Title"]</h1>
}
else
{
<h1 class="navbar-brand navbar-brand1 d-inline text-secondary">#ViewData["Title"]</h1>
}
#* start dark mode html *#
<div class="container bn">
<div class="sun sun-logo">
<i class="fas fa-sun fonticon"></i>
</div>
<div class="moon moon-logo">
<i class="fas fa-moon fonticon"></i>
</div>
</div>
#* end dark mode html *#
#if (User.Identity.IsAuthenticated)
{
<i class="zmdi zmdi-power icon icon1"></i>
<a asp-action="Logout" asp-controller="Account" class="btn-link">exit</a>
}
else
{
<i class="zmdi zmdi-account-box icon icon1 mb-7 ml-2"></i>
<a asp-action="Admin" asp-controller="Home" class="btn-link text text1 mnb mb-7 text-secondary">Admin</a>
}
</div>
</nav>
</header>
<main class="d-flex flex-row justify-content-start align-items-start">
#RenderBody()
</main>
#* <script src="/lib/jquery/dist/jquery.min.js"></script>
*#
<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/js/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?hl=fa"></script>
#RenderSection("Scripts", required: false)
</body>
</html>

make sure to include your model name in the razor page. This is how razor knows the ViewModel
#model UserViewModel
Startup.cs
services.AddRazorPages();
RazorPage.cshtml
<form method="post">
<div asp-validation-summary="ModelOnly"></div>
</form>

How to pass data from a model as data to a

I have two models Doctor and Patients.
I want to display Names of doctors in a dropdown/select in form for patients.
This is how my Patients Create View Looks like:
#model Application.Models.Patient
#model List<Application.Models.Doctor>
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/jquery-validate/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<link href="~/css/StyleSheet.css" rel="stylesheet" />
#{
ViewData["Title"] = "Create";
}
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
<title>#ViewBag.Title</title>
</head>
<body>
<div class="container-fluid">
<div class="sidebar">
<nav class="nav flex-column">
<a asp-controller="Home" asp-action="Index" class="nav-item nav-link">Home</a>
<a asp-controller="Home" asp-action="Create" class="nav-item nav-link">Add User</a>
<a asp-controller="Home" asp-action="All" class="nav-item nav-link">All User</a>
</nav>
</div>
<div class="area card">
<div class="card-body" style="background-color: aqua">
<form asp-action="Create" asp-controller="Patient" method="post">
<div class="form-group">
<label asp-for="Name">Patient Name</label>
<div>
<span asp-validation-for="Name" style="color: red;"></span>
</div>
<input asp-for="Name" class="form-control" type="text" id="Name" name="Name" />
</div>
<div class="form-group">
<label asp-for="Adress">Address</label>
<div>
<span asp-validation-for="Adress" style="color: red;"></span>
</div>
<input asp-for="Adress" class="form-control" type="text" id="Adress" name="Adress" />
</div>
<div class="form-group">
<label asp-for="BloodGroup">Blood Group</label>
<select asp-for="BloodGroup" class="custom-select">
<option selected>Custom Select Menu</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="AB+">AB</option>
</select>
</div>
<div class="form-group">
<label asp-for="BloodGroup">Blood Group</label>
#{
<select asp-for="BloodGroup" class="custom-select">
#foreach(var d in ViewBag.doc)
{
<option value="">#d.FirstName</option>
}
</select>
}
</div>
<button class="btn btn-block btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
i am not able to add two models in a single view. I get an warning "the 'model' directive may only occur once per document"
I tried passing, List of Doctors in View as ViewBag but it din't help.
[HttpGet]
public IActionResult Create()
{
ApplicationContext application = new ApplicationContext();
List<Doctor> doctor = application.Doctor.ToList();
ViewBag.Doc = doctor;
return View();
}
What am i missing ? Please help me.

MVC Carousel not sliding automatically Bootstrap MVC

The Index.cshtml file in Microsoft Visual Studio. I want to be available to have my carousel move to the second image but it doesn't slide.
#{ ViewBag.Title = "Home Page"; }
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="~/Content/img/slide-1.png" alt="First Image" class=""/>
<div class="carousel-caption">
<h2 class="awesome">This Template Is Awesome</h2>
<p class="awesome-line">resto restaurant home page website template</p>
</div>
</div>
<div class="item">
<img src="~/Content/img/slide-2.png" alt="Second Image" class="" />
<div class="carousel-caption">
<h2 class="awesome">This Template Is Awesome</h2>
<p class="awesome-line">resto restaurant home page website template</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#mySlider" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#mySlider" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
_Layout.cshtml Page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>#Html.ActionLink("Our Story", "Index", "Home")</li>
<li>#Html.ActionLink("Menu", "Menu", "Home")</li>
<li>#Html.ActionLink("Reservations", "Reservations", "Home")</li>
<li>#Html.ActionLink("News", "News", "Home")</li>
<li>#Html.ActionLink("Reviews", "Reviews", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Do I need to call the script in the index.cshtml file?

Yes do call the Jquery,boostrap scripts
Change your href's into your carousel ID
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
and this code will help you automatically slide your carousel
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').carousel({
interval: 1200
})
});
</script>
A little Javascript will do the trick :)

Uncaught Error when loading page

I( have an MVC 5 application that is also using angularjs and boot strap. When the page loads the modal doesnt launch and i get the following err in the console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.8/$injector/modulerr?p0=myApp&p1=Error%3A%2….c%20(http%3A%2F%2Flocalhost%3A60248%2FScripts%2Fangular.min.js%3A17%3A431)
Here is my html:
Layout:
<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temujin #ViewBag.Title</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/js/Login.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Temujin", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Temujin</p>
</footer>
</div>
</body>
</html>
Directive template:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form class="form-signin" name="authForm" ng-submit="auth()" ng-controller ="AuthController" novalidate>
<input type="text" class="form-control" placeholder="user name" ng-model ="AuthController.user.username" required autofocus>
<input type="password" class="form-control" placeholder="password" ng-model ="AuthController.user.password" required>
<input type="submit" class="btn btn-primary" value="Submit" />
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
cshtml:
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2></h2>
<div id="loginBox">
<auth-modal></auth-modal>
</div>
angularjs:
(function () {
var temujin = angular.module('temujin', []);
temujin.controller('AuthModalController', ['$scope',function ($scope) {
$scope.temujin.user = {};
console.log("AuthModalController ran");
$scope.$(".modal").modal({ message: 'HEll0 World' });
}]);
temujin.directive("authModal", function () {
return { restrict: 'E', templateUrl: '\\js\\templates\\auth-modal.html', controller: 'AuthModalController',controllerAs: 'authmodalCtrl'}
});
temujin.controller('AuthController',['$scope',function ($scope) {
$scope.user = {};
console.log("AuthController ran");
$scope.auth = function () {
console.log("user " + this.user);
};
}]);
})();
MVC 5 controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace temujin.Controllers
{
public class TemujinController : Controller
{
//
// GET: /Temujin/
public ActionResult Index()
{
return View();
}
}
}

You are attempting to use the module myApp in your page here:
<html ng-app ="myApp">
But your actual module is named temujin
You just need to change your ng-app directive to point to the right module name.
<html ng-app ="temujin">

When submitting form not calling controller function

When clicking the submit button the auth function isn't being called, I haven't been able to figure out why.
html for the template for all pages:
<!DOCTYPE html>
<html ng-app ="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyApp #ViewBag.Title</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/js/Login.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("myApp", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - myApp</p>
</footer>
</div>
</body>
</html>
html for this pages view:
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2></h2>
<div id="loginBox">
<auth-modal></auth-modal>
</div>
here is the html for the custom directive:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<form class="form-signin" name="authForm" ng-submit="auth()" ng-controller ="AuthController" novalidate>
<input type="text" class="form-control" placeholder="user name" ng-model ="AuthController.user.username" required autofocus>
<input type="password" class="form-control" placeholder="password" ng-model ="AuthController.user.password" required>
<input type="submit" class="btn btn-primary" value="Submit" />
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Here is the JS:
(function () {
var MyApp = angular.module('MyApp', []);
MyApp.controller('AuthModalController', function () {
MyApp.user = {};
console.log("AuthModalController ran");
$(".modal").modal({});
});
MyApp.directive("authModal", function () {
return { restrict: 'E', templateUrl: '\\js\\templates\\auth-modal.html', controller: 'AuthModalController',controllerAs: 'authmodalCtrl'}
});
MyApp.controller('AuthController',function () {
this.user = {};
console.log("AuthController ran");
this.auth = function () {
console.log("user " + this.user);
};
});
})();
MVC 5 Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MyApp.Controllers
{
public class MyAppController : Controller
{
//
// GET: /MyApp/
public ActionResult Index()
{
return View();
}
}
}

Edit: I'm adding on here that I couldn't get the code linked below to run except by adding the ng-app="app-name-from-module" directive alongside the controller declaration on the form object, which is not in the linked angular-js documentation!
Reading just the documentation I noticed quite a few issues,
1) You're declaring "myApp" and using "MyApp" unless thats an obfuscation error.
2) I think your controller is missing a few things per the documentation (esp $scope variable, https://docs.angularjs.org/guide/controller)
2a) You're not attaching the auth function to the $scope
3) The .controller seems to take a string and an array as an argument, not a generic function.
Per: https://docs.angularjs.org/api/ng/directive/ngSubmit
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.list.push(this.text);
$scope.text = '';
}
};
}]);
</script>
<form ng-app="submitExample" ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
</form>