We Keep Coding

How can I load page content's onto another page's popup?

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*#

Failed to send model to a controller in asp mvc?

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?

Razor page I lost the User data Passed from the user page when I call it from the post method

because I need to create my user info in many different tables with many different Models and views I used this code in the address page but as shown in my remarks I lost the user info in the post function My question is why and what to do????? by the way when I copied the User1 difenation from my OnGet function to the OnPost function this code work perfectly as explained in my comment but I still want to understand why a public property lose the information please read my comments
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using RazorPagesUI.Models;
namespace RazorPagesUI.Pages.Forms
{
partial class AddAddressModel : PageModel
{
private readonly ILogger<IndexModel> _logger;
public AddAddressModel(ILogger<IndexModel> logger)
{
_logger = logger;
}
[BindProperty(SupportsGet = true)]
public string Mail { get; set; }
public IEnumerable<SelectListItem>? Country { get; set; }
[BindProperty]
public AddressModel? Address { get; set; }
public string SelectedString { get; set; }
public UserModel User1 { get; set; }=new UserModel();
public void OnGet()
{
List<string> TagIds = Mail.Split(',').ToList();
Int32.TryParse(TagIds[0], out int j);
User1.Id = j;
User1.Email = TagIds[1];
User1.FirstName = TagIds[2];
User1.LastName = TagIds[3];
User1.Password = TagIds[4]
Country = new SelectListItem[]
{
new SelectListItem ("Canada", "Canada"),
new SelectListItem ("Egypt", "Egypt"),
new SelectListItem ( "Usa", "Usa")
};
}
public IActionResult OnPost()
{
//when I get to here User1 is null
Address.Country = Request.Form["country"];
if (ModelState.IsValid == false)
{
return Page();
}
//I need to insert my user info to my user table but User1 is null
//here I insert Address info
return RedirectToPage("/index", new{ Name = User1.Firstname);//User1
becomes Null
}
}
}
cshtml file As asked to include in my post
#page
#using RazorPagesUI.Models
#model RazorPagesUI.Pages.Forms.AddAddressModel
#{
ViewData["Title"] = "Add Address";
}
<b>Adderres for: #Model.User1.FirstName #Model.User1.LastName</b>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<div class="text-center">
<h1>Add Address</h1>
</div>
<form method="post">
<div class="container-fluid">
<div class="p-1">
<div class="text-center">
<select name = "country" asp-items="#Model.Country">
</select>
</div>
</div>
<div class="text-center">
<div class="p-1">
<input type="text" asp-for="Address.State" />
</div>
</div>
<div class="text-center">
<div class="p-1">
<input type="text" asp-for="Address.City"
/>
</div>
</div>
<div class="text-center">
<div class="p-1">
<input type="text" asp-for="Address.StreetNumber"
placeholder="Street #" />
</div>
</div>
<div class="text-center">
<div class="p-1">
<input type="text" asp-for="Address.StreetName"
placeholder="Street Name" />
</div>
</div>
<div class="text-center">
<div class="p-1">
<div class="text-center">
<div class="p-1">
<input type="text" asp-for="Address.AppNumber"
placeholder="App#" />
</div>
</div>
<div class="text-center">
<div class="p-1">
<input type="text" asp-for="Address.ZipCode" />
</div>
</div>
<div class="p-1">
<div class="text-center">
<input type="tel" asp-for="Address.Phone" />
</div>
</div>
<div class="p-1">
<div class="text-center">
<input type="tel" asp-for="Address.CellPhone" />
</div>
</div>
<div class="text-center">
<div class="p-1">
<button type="submit">Submit</button>
</div>
</div>
</div>
</form>

Firstly,you need to pass User1.FirstName when form post,so that you can get User1.FirstNamein OnPost handler.
form(add hidden input with User1.FirstName):
<form method="post">
<div class="container-fluid">
<div class="p-1">
<div class="text-center">
<select name = "country" asp-items="#Model.Country">
</select>
</div>
</div>
<div class="text-center">
<div class="p-1">
<input type="text" asp-for="Address.State" />
</div>
</div>
<div class="text-center">
<div class="p-1">
<input type="text" asp-for="Address.City"
/>
</div>
</div>
<div class="text-center">
<div class="p-1">
<input type="text" asp-for="Address.StreetNumber"
placeholder="Street #" />
</div>
</div>
<div class="text-center">
<div class="p-1">
<input type="text" asp-for="Address.StreetName"
placeholder="Street Name" />
</div>
</div>
<div class="text-center">
<div class="p-1">
<div class="text-center">
<div class="p-1">
<input type="text" asp-for="Address.AppNumber"
placeholder="App#" />
</div>
</div>
<div class="text-center">
<div class="p-1">
<input type="text" asp-for="Address.ZipCode" />
</div>
</div>
<div class="p-1">
<div class="text-center">
<input type="tel" asp-for="Address.Phone" />
</div>
</div>
<div class="p-1">
<div class="text-center">
<input type="tel" asp-for="Address.CellPhone" />
</div>
</div>
<div class="text-center">
<div class="p-1">
<input type="hidden" asp-for="User1.FirstName" />
<button type="submit">Submit</button>
</div>
</div>
</div>
</form>
cshtml.cs(If you want to bind the data to User1,you need to use [BindProperty],so that you can use User1.Firstname in OnPost handler):
[BindProperty]
public UserModel User1 { get; set; } = new UserModel();

You have to show your cshtml file i.e. the front end of the Razor page for a more clear description of your problem. But in general, I'm seeing that you are trying to bind a property called Country of a complex object called Address of type AddressModel In this case the name of the input/select in your cshtml file should reflect the complex path to the target Country property of the Address object. It should be something like this <select name="Address.Country" asp-items="Model.Country"></select> Notice the name of the select element Address.Country i.e. it reflects the full path to the target property. More information on complex model binding in razor pages here https://www.learnrazorpages.com/razor-pages/model-binding If you manage to bind the property of the complex object correctly this line of code Address.Country = Request.Form["country"]; becomes redundant. The value of Address.Country should be populated automatically.

Add a search bar in asp net mvc

I need to add a search bar on my index page, and the result of the research will be show on another page.
What I've tried:
The view
<form class="row contact-form rounded-pill link no-gutters" id="contact-form-data">
#using (Html.BeginForm("RechercheResto", "Client", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="col-12 col-lg-8 d-inline-block d-lg-flex align-items-center">
<div class="form-group">
<label><i class="lni lni-restaurant" aria-hidden="true"></i></label>
<input type="text" name="nomResto" placeholder="Nom du restaurant" class="form-control">
</div>
</div>
<div class="col-12 col-lg-4">
<i class="fa fa-spinner fa-spin mr-2 d-none" aria-hidden="true"></i>
<input type="submit" class="btn main-btn rounded-pill w-100 h-100 contact_btn" value="Rechercher le restaurant" />
</div>
}
</form>
The controller
[ValidateAntiForgeryToken]
public ActionResult RechercheResto(string nomResto)
{
var restoList = from r in db.Restaurants select r;
if (!string.IsNullOrEmpty(nomResto))
{
restoList = restoList.Where(r => r.name.Contains(nomResto));
}
return View(restoList.ToList());
}

At the time of returning View(restoList.ToList()) you can add viewname in first parameter and second will be your result.ToList().

Thanks for your help. I've just find the solution. The problem was the I put before the BeginForm.
The working code look like that
#using (Html.BeginForm("RechercheResto", "Client", FormMethod.Post, new { #class= "row contact-form rounded-pill link no-gutters"}))
{
#Html.AntiForgeryToken()
<div class="col-12 col-lg-8 d-inline-block d-lg-flex align-items-center">
<div class="form-group">
<label><i class="lni lni-restaurant" aria-hidden="true"></i></label>
<input type="text" name="nomResto" placeholder="Nom du restaurant" class="form-control">
</div>
</div>
<div class="col-12 col-lg-4">
<i class="fa fa-spinner fa-spin mr-2 d-none" aria-hidden="true"></i>
<input type="submit" class="btn main-btn rounded-pill w-100 h-100 contact_btn" value="Rechercher le restaurant" />
</div>
}

ASP.NET Core 2.1 Unobtrusive Ajax Validation Not Working With Partial View Form Swap

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