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*#
Related
So this is my edit controller:
namespace WebFront_End.Controllers
{
public class EditController : Controller
{
private ActiviteitContainer AC = new(new ActiviteitenMSSQLDAL());
public IActionResult Index(ActiviteitVM activiteit)
{
return View(activiteit);
}
public IActionResult Return(ActiviteitVM activiteit)
{
AC.UpdateActivityWithDayOnly(activiteit.ToActiviteit(), HttpContext.Session.GetInt32("UserId").Value);
return RedirectToAction("Index", "Home");
}
}
}
this is the home page where the edit button should send the model to the edit view:
#model UserVM
#using WebFront_End.Models
#{
ViewData["Title"] = "Home Page";
}
<h1>Hello #Model.GetFullName()</h1>
<div class="container border">
<div class="row">
<div class="col AC_header">
<p>Type</p>
</div>
<div class="col AC_header">
<p>Title</p>
</div>
<div class="col AC_header">
<p>Start Time</p>
</div>
<div class="col AC_header">
<p>End Time</p>
</div>
</div>
#foreach (ActiviteitVM a in Model.activiteiten)
{
<div class="row">
<div class="col AC">
<p>#a.Type</p>
</div>
<div class="col AC">
<p>#a.Name</p>
</div>
<div class="col AC">
<p>#a.Date</p>
</div>
<div class="col AC">
<p>#a.Date</p>
</div>
<div class="col">
</div>
<form asp-controller="Edit" asp-action=Index asp-route-activiteit="#a" method="post">
<input type="submit" value="Edit" class="btn btn-primary" />
</form>
</div>
}
</div>
this is my Edit view which gets it model from the home view:
#model ActiviteitVM
#{
ViewData["Title"] = "Index";
}
<form asp-controller="Edit" asp-action=Return method="post">
<h1>Index</h1>
<div>
<label for="Name">Name</label>
<input asp-for=Name value= "#Model.Name" class="form-control" />
</div>
<div>
<label for="Type">Type</label>
<input asp-for=Type value="#Model.Type" class="form-control" />
</div>
<div>
<label for="Description">Description</label>
<input asp-for=Description value="#Model.Description" class="form-control" />
</div>
<div>
<label for="Date">Date</label>
<input asp-for=Date value ="#Model.Date.Date.ToString("YYYY-MM-DD")" class="form-control" />
</div>
<input type="submit" value="Confirm" class="btn btn-primary" />
</form>
The fields are empty so that means the model is empty, which is weird because there is a model needed to get to the page. Which means its sending a empty model. I can't see the problem maybe in the foreach loop?
I am using ASP.NET Core MVC with identity but I want to perform my own logic on login. So, what I did is I scaffolded the login page and make my own design.
Here is my form:
#page
#model LoginModel
#{
ViewData["Title"] = "Login";
}
<div class="login-page cnt-bg-photo overview-bgi" style="background-image:
url('#Url.Content("~/assets/img/banner-1.jpg")')">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="forgot-box contact-2 clearfix">
<div class="login-header clearfix">
<div class="pull-left">
<h4>Login</h4>
</div>
</div>
<!-- <div role="alert"
class="alert alert-danger font-12">
<strong>Oops!!</strong> Invalid Email or Password
</div>-->
<p>Please enter your user name and password to login</p>
<form action="/Account/Login" method="POST">
<div class="form-group">
<label asp-for="Input.Email"></label>
<input asp-for="Input.Email" class="form-control" />
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Input.Password"></label>
<input asp-for="Input.Password" class="form-control" />
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-group w-46-f float-left">
<div class="form-check checkbox-theme pull-left">
<div class="checkbox">
<label asp-for="Input.RememberMe">
<input asp-for="Input.RememberMe" />
#Html.DisplayNameFor(m => m.Input.RememberMe)
</label>
</div>
</div>
</div>
<div class="form-group float-right">
<label class="pull-right forgotpassword-label">Forgot Password ?</label>
</div>
<div class="clearfix"></div>
<button type="submit" class="btn btn-color btn-md pull-right">Login</button>
</form>
<div class="clearfix"></div>
<div class="text-center p-t-46 p-b-20 font-14">
<span class="txt2">
Or Login with
</span>
</div>
<div class="login100-form-social flex-c-m">
<form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="#Model.ReturnUrl" method="post">
#foreach (var provider in Model.ExternalLogins)
{
if (provider.DisplayName == "Google")
{
<button type="submit" class="btn login100-form-social-item flex-c-m bg3 m-r-5" style="display: inline-block" name="provider" value="#provider.Name" title="Log in using your #provider.DisplayName account"><i class="fab fa-google"></i></button>
}
else if (provider.DisplayName == "Facebook")
{
<button type="submit" class="btn login100-form-social-item flex-c-m bg1 m-r-5" style="display: inline-block" name="provider" value="#provider.Name" title="Log in using your #provider.DisplayName account"> <i class="fab fa-facebook-f"></i></button>
}
else if (provider.DisplayName == "Twitter")
{
<button type="submit" class="btn login100-form-social-item flex-c-m bg2 m-r-5" style="display: inline-block" name="provider" value="#provider.Name" title="Log in using your #provider.DisplayName account"> <i class="fab fa-twitter"></i></button>
}
}
</form>
</div>
<hr>
<div class="text-center forgotpassword-label font-14">
Not a member?
<a href="#Url.Action("Packages","Account")">
<strong>Sign up now</strong>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
Now I want to post the login data to my own controller action. But it get null on my action method. Parameters are not filled with actual data of the form.
Here is my controller method:
[HttpPost]
public IActionResult Login(LoginModel.InputModel model)
{
//My logic
return View();
}
Why does it get model parameter as null?
Well, specifically, the source of it being null is the fact that in the Razor Page, all the input names begin with Input. because for the code-behind, the model being bound to is LoginModel and the data in those inputs will be bound to the InputModel property (Input) there. However, in your controller, you're binding directly to InputModel, and InputModel has no Input member. As a result, none of the posted inputs match anything and are therefore not bound.
If you're going to post from a Razor Page, you need to do it to a Razor Page. There's just too many inconsistencies between Razor Pages and MVC to line everything up correctly. If you you want to use a controller, you're going to need a view specifically geared for that, not your Razor Page.
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>