I'm a newbie with asp.net core & tag helpers. I'm trying to use an example from the web to auto-populate the city / state from the zip code. The example works for me if I use the web example straight up. However, when I switched to tag helpers it stopped hitting the script.
Here's my code:
$(document).ready(function() {
//when the user clicks off of the zip field:
$('#zip').keyup(function() {
alert("here");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<form asp-action="NewGroup" method="post">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label asp-for="Zip"></label>
<input id="zip" asp-for="Zip" class="form-control" />
</div>
<div class="form-group">
<label asp-for="City"></label>
<div id="city_wrap">
<input id="city" asp-for="City" class="form-control" />
</div>
</div>
<div class="form-group">
<label asp-for="State"></label>
<input id="state" asp-for="State" class="form-control" />
</div>
</div>
</div>
</form>
</div>
Related
This is the html code for the main page with the popup
<div class="box">
<a class="button" href="#divOne">
<img src="~/images/usericon.png" alt="user" width="30" height="30" />
</a>
</div>
<div class="overlay" id="divOne">
<div class="wrapper">
<div id="container">
<div class="btn" id="btn-1" data-showbutton="1">Login</div>
<div data-button="1">
×
<div class="content">
<div class="container text-active">
#* load page content here*#
<form id="login">
<label>Username</label>
<input type="text" placeholder="Username" />
<label>Password</label>
<input type="text" placeholder="Password" />
</form>
</div>
</div>
<button>Login</button>
</div>
<div class="btn" id="btn-2" data-showbutton="2">Register</div>
<div id="is-hidden" data-button="2">
×
<div class="content">
<div class="container">
<div class="container text-active">
#* load page content here*#
<form id="register">
<label>Username</label>
<input type="text" placeholder="Username" />
<label>Password</label>
<input type="text" placeholder="Password" />
<label>Confirm Password</label>
<input type="text" placeholder="Confirm Password" />
</form>
</div>
</div>
</div>
<button>Register</button>
</div>
</div>
</div>
</div>
This is the page content I want to display inside the popup
#model Store.Models.CustomerModel
#{
ViewData["Title"] = "Register";
}
#* this part is what I need*#
<div class="row">
<div class="col-md-4">
<form asp-action="Register">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="CustomerEmail" class="control-label"></label>
<input asp-for="CustomerEmail" class="form-control" />
<span asp-validation-for="CustomerEmail" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CustomerPassword" class="control-label"></label>
<input asp-for="CustomerPassword" class="form-control" />
<span asp-validation-for="CustomerPassword" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
#* this part is what I need*#
I've tried in including the model and pasting the code and it works, but I want to have that separation between the main page and the login and register form.
This is how it looks, if it is even needed
Move the duplicated code to a partial, with its #model set to CustomerModel:
#model CustomerModel
<div class="row">
<div class="col-md-4">
<form asp-action="Register">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="CustomerEmail" class="control-label"></label>
<input asp-for="CustomerEmail" class="form-control" />
<span asp-validation-for="CustomerEmail" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CustomerPassword" class="control-label"></label>
<input asp-for="CustomerPassword" class="form-control" />
<span asp-validation-for="CustomerPassword" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
In the main page, you need to add a CustomerModel property e.g.
public CustomerModel Customer { get; set; }
and then pass it to the partial, which you can do using a partial tag helper:
<div class="overlay" id="divOne">
<div class="wrapper">
<div id="container">
<div class="btn" id="btn-1" data-showbutton="1">Login</div>
<div data-button="1">
×
<div class="content">
<div class="container text-active">
#* load page content here*#
<partial name="_RegisterForm" for="Customer" />
#* load page content here*#
</div>
</div>
</div>
<button>Register</button>
</div>
</div>
</div>
In the Customer page, you include the partial again, but you don't need to specify a model via the for attribute in the partial because the host page's model will be passed by default:
#page
#model WebApplication4.Pages.CustomerModel
#{
ViewData["Title"] = "Register";
}
#* this part is what I need*#
<partial name="_RegisterForm" />
#* this part is what I need*#
Submit button doesn't submit out of a sudden in ASP.NET MVC when creating a new user when it worked previously. It did not show any invalid input or valid input. I'm not sure where the problem went wrong. Any suggestion would be helpful.This problem has been happening twice and the solution that I have done so far is recreating a new project which I think is not practical.
Here is my code to review.
Admincontroller.cs
[HttpPost]
public IActionResult CreateUser(Users usr)
{
// TODO: L09 Task 5 - Write secure code to insert TravelUser into database
if (!ModelState.IsValid)
{
ViewData["Message"] = "Invalid Input";
ViewData["MsgType"] = "warning";
return View("CreateUser");
}
else
{
string insert = #"INSERT INTO WBUsers(UserId, UserPw,FullName, Email, UserRole,Dob,ContactNo,usr.Billing_Address)
VALUES('{0}', HASHBYTES('SHA1','{1}'),'{2}','{3}','{4}','{5}',{6},'{7}')";
// TODO: L10 Task 2a - Provide the SQL statement to reset member"
if (DBUtl.ExecSQL(insert, usr.UserId, usr.UserPw, usr.FullName, usr.Email, usr.UserRole, usr.Dob, usr.ContactNo, usr.Billing_Address) == 1)
{
string template = #"Hi {0},<br/><br/>
Welcome to Ecommerce!
Your userid is <b>{1}</b> and password is <b>{2}</b>. Please change your password upon login.
<br/><br/>Adminstrator";
string title = "Account Sign Up";
string message = String.Format(template, usr.FullName, usr.UserId, usr.UserPw);
string result = "";
bool outcome = false;
// TODO: L10 Task 2b - Call EmailUtl.SendEmail to send email
// Uncomment the following line with you are done
outcome = EmailUtl.SendEmail(usr.Email, title, message, out result);
if (outcome)
{
ViewData["Message"] = "Account Has Been Created";
ViewData["MsgType"] = "success";
}
else
{
ViewData["Message"] = result;
ViewData["MsgType"] = "warning";
}
}
else
{
ViewData["Message"] = DBUtl.DB_Message;
ViewData["MsgType"] = "danger";
}
return View("CreateUser");
}
}
CreateUser.cshtml
#model SignUp2.Models.Users;
<link href="~/lib/dtpicker/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
<script src="~/lib/dtpicker/js/tempusdominus-bootstrap-4.min.js"></script>
<link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<script language="javascript">
$(document).ready(function () {
// DateA
$('#JSDateA')
.datetimepicker({ format: 'YYYY-MM-DD' });
});
</script>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="~/lib/styles/createform.css">
</head>
<body>
<div class="center">
<form asp-controller="Admin" asp-action="CreateUser" method="post">
<h3>Registration Form</h3>
<div class="form-group row">
<label class="control-label col-sm-3" asp-for="UserId">Username:<span style="color:red;">*</span></label>
<div class="col-sm-5">
<input asp-for="UserId" placeholder="User ID" class="form-control" />
</div>
<div class="col-sm-3">
<span asp-validation-for="UserId" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-3" asp-for="FullName">Full Name:<span style="color:red;">*</span> </label>
<div class="col-sm-5">
<input asp-for="FullName" placeholder="Full Name" class="form-control" />
</div>
<div class="col-sm-3">
<span asp-validation-for="FullName" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-3" asp-for="Email">Email:<span style="color:red;">*</span> </label>
<div class="col-sm-5">
<input asp-for="Email" placeholder="Email" class="form-control" />
</div>
<div class="col-sm-3">
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-3" asp-for="UserPw">Password:<span style="color:red;">*</span> </label>
<div class="col-sm-5">
<input asp-for="UserPw" placeholder="Password" class="form-control" />
</div>
<div class="col-sm-3">
<span asp-validation-for="UserPw" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-3" asp-for="Dob">Birth Date:<span style="color:red;">*</span></label>
<div class="col-sm-5">
<input asp-for="Dob" asp-format="{0:yyyy-MM-dd}"
class="form-control" placeholder="YYYY-MM-DD" />
</div>
<span asp-validation-for="Dob" class="text-danger"></span>
</div>
<div class="form-group row">
<label class="control-label col-sm-3" asp-for="ContactNo">Contact Number:<span style="color:red;">*</span></label>
<div class="col-sm-5">
<input asp-for="ContactNo" class="form-control" placeholder="Contact Number" />
</div>
<div class="col-sm-3">
<span asp-validation-for="ContactNo" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-3" asp-for="Billing_Address">Billing Address:<span style="color:red;">*</span> </label>
<div class="col-sm-5">
<input asp-for="Billing_Address" class="form-control" placeholder="Billing Address" />
</div>
<div class="col-sm-3">
<span asp-validation-for="Billing_Address" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-3">User Role:<span style="color:red;">*</span> </label>
<div class="col-sm-6">
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="rb1"
asp-for="UserRole" value="user" checked />
<label class="form-check-label" for="rb1">User</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="rb2"
asp-for="UserRole" value="admin" />
<label class="form-check-label" for="rb2">Admin</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-sm-3 col-sm-6">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</div>
#if (ViewData["Message"] != null)
{
<div class="form-group row">
<div class="offset-sm-2 col-sm-6">
<div class="alert alert-#ViewData["MsgType"]">
#Html.Raw(ViewData["Message"])
</div>
</div>
</div>
}
</form>
</div>
</body>
I've spent several hours combing Stackoverflow and other sites trying everyone's solutions with no luck so far. I'm sure I've missed something, but I can't see it. Hopefully you can point me to a fix.
I have an initial form inside a partial view that is rendered into a parent view whose validation works fine. Once the form is submitted via Ajax replace, I return either a login or registration partial view with a new form in the response. This second form will not display the model validation errors when an incomplete form is submitted and the same partial view is returned.
Thanks in advance for any tips you can offer to bring an end to this insanity!
Parent View Section
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="panel panel-primary" id="formData">
#await Html.PartialAsync("_UserNamePartial", new UserNameViewModel())
</div>
</div>
</div>
Working Rendered Partial View
<div class="panel-heading">
<h3 class="panel-title">Let's Start With Your E-mail Address</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form asp-controller="Account" asp-action="IsAccountValid" data-ajax="true" data-ajax-method="POST"
data-ajax-mode="replace" data-ajax-update="#formData">
#Html.AntiForgeryToken()
<div class="form-group">
<label for="UserName">Your Email Address</label>
<div class="input-group">
<input type="text" id="UserName" name="UserName" class="form-control" placeholder="Your email address" />
<div class="input-group-btn">
<button type="submit" id="btnGetStarted" class="btn btn-primary">Get Started</button>
</div>
</div>
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
</form>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
</div>
</div>
</div>
Initial Validation Controller Action
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public IActionResult IsAccountValid(UserNameViewModel model)
{
if (!ModelState.IsValid)
return PartialView("../Home/_UserNamePartial", model);
AccountRepository accountRepository = new AccountRepository(ConnectionConfig.InshoraDev);
AuthName match = accountRepository.GetAuthName(model.UserName);
if (match != null)
{
ModelState.Clear();
LoginViewModel loginModel = new LoginViewModel()
{
UserName = model.UserName
};
return PartialView("_UserLoginPartial", loginModel);
}
ModelState.Clear();
SignUpViewModel signupModel = new SignUpViewModel()
{
UserName = model.UserName,
};
return PartialView("_UserSignUp", signupModel);
}
Login Partial View (Validation Error Display Not Working)
#model Inshora.Models.Account.LoginViewModel
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="panel-heading">
<h3 class="panel-title">Log Into Your Account</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form id="login-form" asp-controller="Account" asp-action="Login" method="post" role="form" style="display: block;"
data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="formData" data-ajax-complete="AcctLib.Login.Events.onComplete">
#Html.AntiForgeryToken()
<div class="form-group">
<input type="text" name="UserName" id="UserName" tabindex="1" class="form-control" placeholder="Email Address" value="#Model.UserName">
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<div class="form-group">
<input type="password" name="Password" id="Password" tabindex="2" class="form-control" placeholder="Password">
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" class="" name="RememberMe" id="RememberMe">
<label for="RememberMe"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a id="PasswordReset" asp-controller="Account" asp-action="PasswordReset" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#formData" tabindex="5" class="inshora-forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
AcctLib.Login.Init();
})
</script>
LoginViewModel
public class LoginViewModel
{
[Required]
public string UserName { get; set; }
[Required]
public string Password { get; set; }
[Required]
public bool RememberMe { get; set; }
}
Client Side Initialization Code
AcctLib.Login.RebindForm = function() {
$('form').each(function (i, f) {
$form = $(f);
$form.removeData('validator');
$form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($form);
});
}
AcctLib.Login.Init = function () {
AcctLib.Login.RebindForm();
$('#UserName').focus();
}
Update
I have updated the parent page (index.cshtml) to the following and it still doesn't display the messages.
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div class="panel panel-primary" id="formData">
#await Html.PartialAsync("_UserNamePartial", new UserNameViewModel())
</div>
</div>
</div>
#section Scripts
{
#{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}
The problem was that I had not used the asp-for tag helpers. Those helpers are responsible for generating the data-* attributes needed by the unobtrusive validation parser. Once I started using them it started working. Thank you to everyone who tried to help.
Corrected View
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<form id="login-form" asp-controller="Account" asp-action="Login" method="post" role="form"
data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#formData">
#Html.AntiForgeryToken()
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="UserName"></label>
<input asp-for="UserName" class="form-control" placeholder="Email Address"/>
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" placeholder="Password"/>
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group text-center">
<input asp-for="RememberMe" />
<label asp-for="RememberMe"> Remember Me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-primary" value="Log In">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<a id="PasswordReset" asp-controller="Account" asp-action="PasswordReset" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#formData" tabindex="5" class="inshora-forgot-password">Forgot Password?</a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
if (!ModelState.IsValid)
return PartialView("..\\Home\\_UserNamePartial", model);
pretty sure this violates pathing
if(!ModelState.IsValid)
return PartialView("../Home/_UserNamePartial", model);
Cut renderPartial link and paste to before #script section, like below:
#{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
#section Scripts
{
}
I have three tabs on the form but I have sep elements on the form however I have a partial view loaded in between the main elements which has its own form
Obv I could have the one form tag to contain the main elements but how would I handle my sep view in this case as at present the main form tag would overide it
Edit 2
The main problem I am having is that when I load the partial view the main modal is not being filled as I have not told it to go to a controller to perform some linq my main question is how do i do this.
<div class="col-md-10">
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">Product Info</li>
<li>Product Images</li>
<li>Seo</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="active tab-pane" id="productInfo">
<!-- Horizontal Form -->
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Horizontal Form</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<div class="box-body">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Product Name</label>
<div class="col-sm-10">
<input type="text" asp-for="ProductName" class="form-control" id="productName">
</div>
</div>
<div class="form-group">
<label asp-for="SKU" class="col-sm-2 control-label">Product Sku</label>
<div class="col-sm-10">
<input asp-for="SKU" class="form-control" />
<span asp-validation-for="SKU" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="LongDescription" class="col-sm-2 control-label">Product Description</label>
<div class="col-sm-10">
<textarea id="editor1" class="form-control"></textarea>
<span asp-validation-for="LongDescription" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<div class="input-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
<input type="text" asp-for="OldPrice" placeholder="Price" class="form-control">
</div>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
<div class="col-xs-2">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
<input type="text" asp-for="OldPrice" placeholder="Old Price" class="form-control">
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
</form>
</div>
<!-- /.tab-pane -->
</div>
</div>
<div class="tab-pane" id="images">
Product Images
#await Html.PartialAsync("_ProductPicture", Model)
</div>
<div class="tab-pane" id="seo">
</div>
</div>
This is my partial view which is loaded from the above.
#model solitude.models.Models.ViewModels.ProductImageVm
#*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*#
#Html.PartialAsync("_ProductPicturesList.cshtml")
<div class="form-group">
<form asp-controller="Products" asp-action="FileUpload" asp-route-returnurl="#ViewData["ReturnUrl"]" enctype="multipart/form-data" method="post" class="form-horizontal" role="form">
<input asp-for="Title" />
<input asp-for="ProductId" type="hidden" />
<input asp-for="Image" />
<input type="submit" />
</form>
</div>
[code page="c#"]
Hdnano.Value = Application["AccountNum"].ToString();
$(document).ready(function() {
$("#ano").on("blur", function() {
var accountNum = $('textarea#ano').val();
$("#Hdnano").val(folioNum);
});
<html>
<body>
<form>
<div class="container">
<div class="row">
<div class="col-xs-3 col-lg-2">
SELECT bank name
</div>
<div class="col-xs-3 col-lg-3">
<input id="Text1" type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-xs-3 col-lg-2">
father name
</div>
<div class="col-xs-3 col-lg-3">
<input id="Text1" type="text" class="form-control" />
</div>
<div class="col-xs-3 col-lg-2">
father mobile no
</div>
<div class="col-xs-3 col-lg-3">
<input id="Text1" type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-xs-3 col-lg-2">
mother name
</div>
<div class="col-xs-3 col-lg-3">
<input id="Text1" type="text" class="form-control" />
</div>
<div class="col-xs-3 col-lg-2">
mother mobile no
</div>
<div class="col-xs-3 col-lg-3">
<input id="Text1" type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-xs-3 col-lg-2">
Account numbers
</div>
<div class="col-xs-3 col-md-6 col-lg-6">
<textarea class="form-control" rows="5" id="fno"></textarea>
</div>
</div>
</div>
</form>
</body>
</html>
How to store multiple textbox values into one application variable ?
here Customer details which are select bank name ,father/mother name and mobile number into one application variable ,and the multiple account numbers which is in text area into second application variable ?I want to store values of customer into application variable and than want to pass this values onto other page which is also similar kind of this html page.How can I use here json string
You can name variables like array elements. Look at this:
<form action="" method="POST">
<input type="text" name="name1[first]">
<input type="text" name="name1[second]">
<input type="text" name="name1[third]">
<input type="text" name="name2[0]">
<input type="text" name="name2[1]">
<input type="submit">
</form>