We Keep Coding

Model Validation in Asp.Net Core Doesnt Work

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

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

How to carry over autogenerated GUID onto another page after creating one

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");}
}

Jquery Modal not showing on button click ASP.NET

I have a multi step form on a web page using ASP.NET. I have two features on a form I would like to use. Autosuggest on a textbox which works fine. Also when you click on a button I want it to show a modal which shows data from a gridview. Everytime I try and click on the button, the modal does not appear.
I have a button which calls a method in the back end this calls the gridview bind method and ClientScript.RegisterStartupScript to Open the Modal. When I debug it steps through but nothing happens. And no errors in the console.
I have an update panel wrapped around my button to prevent auto-postback on the button click as I dont want the page to refresh and start the form from the beginning again.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Create Template</li>
<li>Add Recipients</li>
<li>Select Content</li>
<li>Add Style</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Create new Template</h2>
<h3 class="fs-subtitle">Provide following information</h3>
<div id="applicationselectdiv" runat="server">
</div>
<input type="text" name="tempname" placeholder="Template Name"/>
<input type="text" name="subname" placeholder="Subject Line"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Add Recipients</h2>
<h3 class="fs-subtitle">Add multiple recipients</h3>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="viewrecpbutton" runat="server" class="btn btn-primary" Text="View Recipients" OnClick="ViewRecipient_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<div id="recipienttypediv" runat="server">
</div>
<input type="text" id="SearchInput" class="autosuggest" name="initialname" placeholder="Initials"/>
<div id="subteamdiv" runat="server">
</div>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Button ID="addbtn" runat="server" Text="Add" OnClick="AddRecipient_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Recipients</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" runat="server">
<asp:GridView ID="gvCurrentRecipients" runat="server" AutoGenerateColumns="true">
</asp:GridView>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Select Content</h2>
<h3 class="fs-subtitle">This is what will appear in the email</h3>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button" value="Next"/>
</fieldset>
<fieldset>
<h2 class="fs-title">Add Style</h2>
<h3 class="fs-subtitle">Colour scheme</h3>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="submit" name="submit" class="submit action-button" value="Submit"/>
</fieldset>
</div>
</div>
</div>
</form>
protected void ViewRecipient_Click(object sender, EventArgs e)
{
GetgvRecipients();
ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
}
<script type="text/javascript">
function openModal() {
$('#myModal').modal('show');
}
</script>
Order of my libraries:
<script src="Scripts/jquery-3.0.0.js"></script>
<script src="Scripts/jquery-ui-1.12.1.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"/>
<!-- Custom styles for this template-->
<link href="css/cr-admin.css" rel="stylesheet"/>
<link href="NewTemplate.css" rel="stylesheet" />
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
<script src="NewTemplate.js"></script>

Bootstrap Modal popup issue in asp.net C#

I called that popup in a button click like this:
<li>
<span class="glyphicon glyphicon-user"></span> <asp:Label runat="server" ID="lblUserName"></asp:Label>
</li>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I dont know why it is comming like that. I cant even close that.
I want it to be like this:

The code you have have works on my machine! There must be another problem outside of the code you have given. Paste this code into a blank .html document and run it then work back to what the difference is between it and yours.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<li>
<span class="glyphicon glyphicon-user"></span> <asp:Label runat="server" ID="lblUserName"></asp:Label>
</li>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

You have to write below code on close button event :
$('#myModal').modal('hide');
$('.modal-backdrop').removeClass('modal-backdrop');
$('.fade').removeClass('fade');
$('.in').removeClass('in');
$('html, body').css({
'overflow': 'auto',
'height': 'auto'
});
Please use below code for trigger button event :
$.ajax({
url: '/test/test?id=' + id,
type: "Post",
async: false,
dataType: "html",
contentType: "application/json;charset=utf-8",
success: function (result) {
//Your div name where you want to show model popup data
$("#YourResultDivName").empty();
$("#YourResultDivName").html(result);
//your button click event trigger from here for open model popup
$("#btnhdnModelPopup").trigger('click');
}
});
Check Below HTML code for model popup :
<form id="ModelPopupForm" class="form-horizontal">
<button type="button" id="btnhdnModelPopup" style="display: none;" class="btn btn-info btn-lg" data-toggle="modal" data-target="#divModelPopup"></button>
<div class="modal fade" id="divModelPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-95" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Model Title</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12">
Your Data
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="btnClose" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
it will work perfectly !!

System.Web.HttpException: Section not defined

I have the following _Layout.cshtml:
#using System.Web.Optimization
<!DOCTYPE html>
<html>
<head>
<title>Structured Content </title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
#Scripts.Render("~/bundles/jquery")
</head>
<body>
<div id="layout">
<div id="header">
<div class="menu_header">
<h2 style="float: left;">Logo</h2>
#RenderSection("menu_header");
</div>
</div>
<div id="bottom_menu">
</div>
<div id="media">
#RenderSection("media");
</div>
<div id="content">
<div id="maincontent">
#RenderBody();
</div>
</div>
<div id="footer">
Foooter
</div>
</div>
#RenderSection("scripts", required: false)
</body>
</html>
In my index.cshtml, I have the following:
#{
Layout = "../Shared/_Layout.cshtml";
}
#section menu_header {
<div class="login_menu_links">
<ul>
<li>
Top ranked▼
</li>
</ul>
</div>
<div class="sign_in_style">
<form>
<span style="display:inline-block">
<label>Email</label><br/>
<input type="text" name="email">
</span>
<span style="display:inline-block">
<label>Password</label><br/>
<input type="password" name="pass">
<input type="submit" name="submit" value="Log in">
</span>
</form>
</div>
}
#section media {
<img src="https://marshallamps.com/wp-content/themes/marshallamps/images/brand-video-overlay.jpg" width="755">
<img src="https://www.marshallheadphones.com/media/upload/pressimages/marshall/MIXEDMEDIA/EVENT/instac.jpg">
<img src="http://blog.weddingfavorsbynette.com/wp-content/uploads/2013/05/wedding-music-dj-624x416.jpg" width="498">
}
<div id="leftcontent">
<h2 class="news_title">Get discovered as a band or musician<br />here on Namn. </h2>
<ul class="info_text">
<li><img src="https://cdn3.iconfinder.com/data/icons/vote/16/medal_star_rank-512.png" width="30" height="30">Gather karma points - get ranked</li>
<li><img src="http://findicons.com/files/icons/770/token_dark/128/headphones.png" width="32" height="32">Explore new music - all genres</li>
<li><img src="https://cdn3.iconfinder.com/data/icons/gray-user-toolbar/512/social_network-512.png" width="30" height="30">Connect - with musicians and friends</li>
</ul>
</div>
<script type="text/javascript">
$('#top_ranked_menu').mouseover(function () {
$('#bottom_menu').show();
});
$('#bottom_menu').mouseout(function () {
$(this).hide();
});
</script>
When I run my application, I get the following error message:
Section not defined: "menu_header".
Description: An unhandled exception occurred during the execution of
the current web request. Please review the stack trace for more
information about the error and where it originated in the code.
Exception Details: System.Web.HttpException: Section not defined:
"menu_header".
As I can see, I have defined them?