I am currently doing a sign-up page and i would like to insert data ( 1 page for 1 table )
After inserting data into the first table and generating the uid, i would like to bring over the generated uid to the next page.I tried to bring over the userid with viewbag on the textbox on the next page. However i end up with 0000-0000-0000-0000 instead. Can i seek some help?
My references are below.
[HttpPost]
public async Task<IActionResult> CreateAccounts(UserDTO userDto)
{
if (!ModelState.IsValid)
{
ViewBag.message = "Form is invalid please check again.";
return View("~/Views/Login/Register.cshtml");
}
string url = BaseUrl + "/User/Dto/" + "Create";
UserModel recievedUserModel = new UserModel();
#region Salting and hashing
byte[] salt = new byte[128 / 8];
using (var rng = RandomNumberGenerator.Create())
{
rng.GetBytes(salt);
}
// derive a 256-bit subkey (use HMACSHA1 with 10,000 iterations)
string hashed = Convert.ToBase64String(KeyDerivation.Pbkdf2(
password: userDto.Password,
salt: salt,
prf: KeyDerivationPrf.HMACSHA256,
iterationCount: 10000,
numBytesRequested: 256 / 8));
#endregion
userDto.Salt = salt;
userDto.Password = hashed;
StringContent content = new StringContent(JsonConvert.SerializeObject(userDto), Encoding.UTF8, "application/json");
using (var httpClient = new HttpClient())
{
using var response = await httpClient.PostAsync(url, content);
string apiResponse = await response.Content.ReadAsStringAsync();
if (response.IsSuccessStatusCode)
{
recievedUserModel = JsonConvert.DeserializeObject<UserModel>(apiResponse);
ViewBag.message = userDto.UserID;
}
else if (!response.IsSuccessStatusCode)
{
ViewBag.message = apiResponse;
}
}
return View("~/Views/Login/Register2.cshtml");
}
[HttpPost("Dto/Create")]
public async Task<IActionResult> CreateUserFromUserDto(UserDTO userDto)
{
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
UserModel userModel = new UserModel();
if (!_context.User.Any(u => u.Username.Equals(userDto.Username)))
{
userModel = new UserModel()
{
AccessLevel = userDto.AccessLevel,
Username = userDto.Username,
Password = userDto.Password,
Salt = userDto.Salt,
Surname = userDto.Surname,
GivenName = userDto.GivenName,
ContactNo = userDto.ContactNo,
Gender = userDto.Gender,
Email = userDto.Email,
YearOfBirth = userDto.YearOfBirth
};
try
{
_context.User.Add(userModel);
await _context.SaveChangesAsync();
return Ok();
}
catch
{
return BadRequest("Unable to save to database.");
}
}
else
{
return BadRequest("Username exists, try a different username.");
}
}
Here is my HTML code
#model TTSH_ALIVE.DTOs.UserDTO
#using TTSH_ALIVE.ModelObjects
#{ ViewData["Title"] = "Register";
Layout = null; }
<head>
<title>Welcome - TTSH SteWARdS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="~/images/icons/favicon.ico" />
<link rel="stylesheet" type="text/css" href="~/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="~/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="~/fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
<link rel="stylesheet" type="text/css" href="~/vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="~/vendor/css-hamburgers/hamburgers.min.css">
<link rel="stylesheet" type="text/css" href="~/vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="~/css/util.css">
<link rel="stylesheet" type="text/css" href="~/css/main.css">
</head>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100 p-t-50 p-b-0">
<span class="login100-form-error p-t-20 p-b-45">
#ViewBag.error
</span>
<div class="jp-container" style="margin-top:20px">
<h1 class="jp-jumbo"><b>Sign Up</b></h1>
<hr style="width:80px; border:5px solid #a6192e" class="jp-round">
</div>
<div class="jp-row">
<form asp-action="CreateAccounts">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
#*<div class="form-group">
<label asp-for="UserID" class="control-label"></label>
<input asp-for="UserID" class="form-control" />
<span asp-validation-for="UserID" class="text-danger"></span>
</div>*#
<div class="form-group-full">
<label asp-for="Username" class="text-white"></label>
<input asp-for="Username" class="form-control" />
<span asp-validation-for="Username" class="text-white"></span>
</div>
<div class="form-group-full">
<label asp-for="Password" class="text-white"></label>
<input asp-for="Password" class="form-control" type="password" />
<span asp-validation-for="Password" class="text-white"></span>
</div>
<div class="form-group-half">
<label asp-for="GivenName" class="text-white"></label>
<input asp-for="GivenName" class="form-control" />
<span asp-validation-for="GivenName" class="text-white"></span>
</div>
<div class="form-group-half">
<label asp-for="Surname" class="text-white"></label>
<input asp-for="Surname" class="form-control" />
<span asp-validation-for="Surname" class="text-white"></span>
</div>
<div class="form-group-full">
<label asp-for="Gender" class="text-white"></label><br />
<select asp-for="Gender" class="jp-select">
<option selected disabled>---Please select a gender---</option>
<option>Male</option>
<option>Female</option>
<option>Others</option>
</select>
<span asp-validation-for="Gender" class="text-white"></span>
</div>
<div class="form-group-full">
<label asp-for="ContactNo" class="text-white"></label>
<input asp-for="ContactNo" class="form-control" />
<span asp-validation-for="ContactNo" class="text-white"></span>
</div>
<div class="form-group-full">
<label asp-for="Email" class="text-white"></label>
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-white"></span>
</div>
<div class="form-group-full">
<label asp-for="YearOfBirth" class="text-white"></label>
<input asp-for="YearOfBirth" class="form-control" />
<span asp-validation-for="YearOfBirth" class="text-white"></span>
</div>
<div class="text-white">
<b>#ViewBag.message</b>
</div>
<div class="form-group-half">
<input type="submit" value="Sign Up" class="jp-btn-86" />
</div>
<div class="form-group-half">
<a asp-area="" asp-controller="Login" asp-action="Index" style="margin-top: 7px" class="login100-form-btn">Back to Login</a>
</div>
</form>
</div>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
2nd page
#model TTSH_ALIVE.Models.Dependent
#using TTSH_ALIVE.ModelObjects
#{ ViewData["Title"] = "Register";
Layout = null; }
<head>
<title>Welcome - TTSH SteWARdS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="~/images/icons/favicon.ico" />
<link rel="stylesheet" type="text/css" href="~/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="~/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="~/fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
<link rel="stylesheet" type="text/css" href="~/vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="~/vendor/css-hamburgers/hamburgers.min.css">
<link rel="stylesheet" type="text/css" href="~/vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="~/css/util.css">
<link rel="stylesheet" type="text/css" href="~/css/main.css">
</head>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100 p-t-50 p-b-0">
<span class="login100-form-error p-t-20 p-b-45">
#ViewBag.error
</span>
<div class="jp-container" style="margin-top:20px">
<h1 class="jp-jumbo"><b>Sign Up</b></h1>
<hr style="width:80px; border:5px solid #a6192e" class="jp-round">
</div>
<div class="jp-row">
<form asp-action="CreateAccounts">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group-full">
<label asp-for="UserID" class="text-white"></label>
<input asp-for="UserID" value="#ViewBag.message" class="form-control" />
<span asp-validation-for="UserID" class="text-white"></span>
</div>
<div class="form-group-half">
<label asp-for="AgeOfDependent" class="text-white"></label>
<input asp-for="AgeOfDependent" class="form-control" />
<span asp-validation-for="AgeOfDependent" class="text-white"></span>
</div>
<div class="form-group-half">
<label asp-for="DependentType" class="text-white"></label>
<input asp-for="DependentType" class="form-control" />
<span asp-validation-for="DependentType" class="text-white"></span>
</div>
<div class="text-white">
<b>#ViewBag.message</b>
</div>
<div class="form-group-half">
<input type="submit" value="Sign Up" class="jp-btn-86" />
</div>
<div class="form-group-half">
<a asp-area="" asp-controller="Login" asp-action="Index" style="margin-top: 7px" class="login100-form-btn">Back to Login</a>
</div>
</form>
</div>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Related
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>
I want to ask how to insert multiple rows of data at once. I included the textboxes for the user to input but it only inserts the first row of data and not the second line. Here are my references below.
The first is my controller code and the second is my view page code. I am a new coder and i need to seek help for my school work. It would be best if I can solve this problem. Thank you
[HttpPost("Create2")]
public async Task<IActionResult> CreateDependent2(Dependent dependentModel)
{
if (!ModelState.IsValid)
{
return BadRequest("Parameter condition(s) are not met");
}
else if (ModelState.IsValid)
{
_context.Dependents.Add(dependentModel);
await _context.SaveChangesAsync();
return Ok(dependentModel);
}
else
{
return BadRequest("Invalid");
}
}
and here is my view code
#model TTSH_ALIVE.Models.Dependent
#using TTSH_ALIVE.ModelObjects
#{ ViewData["Title"] = "Register";
Layout = null; }
<head>
<title>Welcome - TTSH SteWARdS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="~/images/icons/favicon.ico" />
<link rel="stylesheet" type="text/css" href="~/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="~/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="~/fonts/Linearicons-Free-v1.0.0/icon-font.min.css">
<link rel="stylesheet" type="text/css" href="~/vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="~/vendor/css-hamburgers/hamburgers.min.css">
<link rel="stylesheet" type="text/css" href="~/vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="~/css/util.css">
<link rel="stylesheet" type="text/css" href="~/css/main.css">
</head>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100 p-t-50 p-b-0">
<span class="login100-form-error p-t-20 p-b-45">
#ViewBag.error
</span>
<div class="jp-container" style="margin-top:20px">
<h1 class="jp-jumbo"><b>Sign Up</b></h1>
<hr style="width:80px; border:5px solid #a6192e" class="jp-round">
</div>
<div class="jp-row">
<form asp-action="CreateDependent">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="UserID" value="#ViewData["UserID"]" class="form-control" />
<div class="form-group-half">
<label asp-for="AgeOfDependent" class="text-white"></label>
<input asp-for="AgeOfDependent" class="form-control" />
<span asp-validation-for="AgeOfDependent" class="text-white"></span>
</div>
<div class="form-group-full">
<label asp-for="DependentType" class="text-white"></label><br />
<select asp-for="DependentType" class="jp-select">
<option selected disabled>---Please select a dependent type---</option>
<option>Parent</option>
<option>Child</option>
</select>
<span asp-validation-for="DependentType" class="text-white"></span>
</div>
<div class="form-group-half">
<label asp-for="AgeOfDependent" class="text-white"></label>
<input asp-for="AgeOfDependent" class="form-control" />
<span asp-validation-for="AgeOfDependent" class="text-white"></span>
</div>
<div class="form-group-full">
<label asp-for="DependentType" class="text-white"></label><br />
<select asp-for="DependentType" class="jp-select">
<option selected disabled>---Please select a dependent type---</option>
<option>Parent</option>
<option>Child</option>
</select>
<span asp-validation-for="DependentType" class="text-white"></span>
</div>
<div class="text-white">
<b>#ViewBag.message</b>
</div>
<div class="form-group-half">
<input type="submit" value="Sign Up" class="jp-btn-86" />
</div>
<div class="form-group-half">
<a asp-area="" asp-controller="Login" asp-action="Index" style="margin-top: 7px" class="login100-form-btn">Back to Login</a>
</div>
</form>
</div>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
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.
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 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>