Hi,
My Controller is successfully return a data
My foreach as a following. It contains - Click to Open Modal when User click " TenderName "
![165806-a-111.png][1]
This is a script to Open Modal
![165861-a-112.png][2]
It was successfully open Modal in the 1st row ( Blue Border )
![165862-a-113.png][3]
![165817-a-114.png][4]
Unfortunately, the Modal failed to open 2nd row and so on ( Red Border )
I suspect, below html id is REPEATED and not unique. I don't know - How to make it unique id
![165852-a-115.png][5]
How to fixed this ? Please help. See my code
Models: ProjectGet.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace SalesSystem_DataBinding.Models
{
public class ProjectGet
{
public string Id { get; set; }
public string ClientName { get; set; }
public string TenderName { get; set; }
public string TenderCategoryName { get; set; }
public string StageName { get; set; }
}
}
Controllers: HomeController.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Logging;
using SalesSystem_DataBinding.Models;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
namespace SalesSystem_DataBinding.Controllers
{
public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
public HomeController(ILogger<HomeController> logger)
{
_logger = logger;
}
public IActionResult Index()
{
List<ProjectGet> projects = new List<ProjectGet>
{
new ProjectGet { Id="1", ClientName="Majlis Amanah Rakyat (MARA)", TenderName="Perkhidmatan Menyediakan 3",
TenderCategoryName="Tender Category 2", StageName = "Prospect" },
new ProjectGet { Id="2", ClientName="Majlis Amanah Rakyat (MARA)", TenderName="Perkhidmatan Menyediakan 3",
TenderCategoryName="Tender Category 3", StageName="Prospect" },
new ProjectGet { Id="3", ClientName="CRIDEA sdn bhd", TenderName="Perkhidmatan Menyediakan 20",
TenderCategoryName="Tender Category 2", StageName="Commitment To Buy" }
};
if (HttpContext.Request.Query["status"].Count > 0)
{
ViewBag.status = HttpContext.Request.Query["status"][0];
}
return View(projects);
}
public IActionResult Privacy()
{
return View();
}
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
}
}
Views: Home/Index.cshtml
@model IEnumerable<SalesSystem_DataBinding.Models.ProjectGet>
@if (ViewBag.status == "True")
{
<ejs-toast id="element" created="oncreated" title='Success' content='Your transaction has been saved successfully.' cssClass='e-toast-success' icon='e-success toast-icons'>
<e-toast-position X="Center"></e-toast-position>
</ejs-toast>
}
<title>Stages</title>
<html>
<head>
<style>
/* Set height of body and the document to 100% to enable "full page tabs" */
body, html {
height: 100%;
}
/* Style tab links */
.tablink {
background-color: #7ca5ee;
color: black;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 14px;
width: 16.667%;
}
.tablink:hover {
background-color: #b9cef3;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: black;
display: none;
padding: 50px 20px;
height: 100%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
border-radius: 25px;
}
#prospect {
background-color: white;
padding-bottom: 0;
margin-top: auto;
}
#potential {
background-color: white;
padding-bottom: 0;
margin-top: auto;
}
#bestfew {
background-color: white;
padding-bottom: 0;
margin-top: auto;
}
#CTB {
background-color: white;
padding-bottom: 0;
margin-top: auto;
}
#followup {
background-color: white;
padding-bottom: 0;
margin-top: auto;
}
#unsuccessful {
background-color: white;
padding-bottom: 0;
margin-top: auto;
}
.div1 {
/*column-width: 400px;*/
white-space: normal;
column-count: 1;
/*table-layout: auto;*/
min-width: 400px;
line-height: normal;
text-align: justify;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
margin-top: 120px;
padding: 20px;
border: 1px solid #888;
width: 30%;
}
/* The Close Button */
.close {
color: #aaaaaa;
right: 35px;
top: 15px;
font-size: 28px;
font-weight: bold;
top: 8px;
right: 16px;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Stages</h2>
<br>
@*<button class="tablink" onclick="openPage('prospect', this, 'white')" id="defaultOpen" style="border-top-left-radius: 25px;">Prospect</button>*@
<button class="tablink" onclick="openPage('prospect', this, 'white')" id="defaultOpen" style="border-top-left-radius: 25px;">Prospect</button>
<button class="tablink" onclick="openPage('potential', this, 'white')">Potential</button>
<button class="tablink" onclick="openPage('bestfew', this, 'white')">Best Few</button>
<button class="tablink" onclick="openPage('CTB', this, 'white')">Commitment To Buy</button>
<button class="tablink" onclick="openPage('followup', this, 'white')">Follow Up</button>
<button class="tablink" onclick="openPage('unsuccessful', this, 'white')" style="border-top-right-radius: 25px;">Unsuccessful</button>
<div id="prospect" class="tabcontent">
<div class="row">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<p class="card-description">
Pre-approach/Initial Commitment/ Opportunity Analysis
</p>
<table class="table table-striped">
<thead>
<tr>
<th>
No
</th>
<th>
Client name
</th>
<th>
Tender name
</th>
<th>
Category
</th>
<th>
Expected Close Date
</th>
<th>
Total Tender Value(RM)
</th>
<th>
Total Tender Cost(RM)
</th>
<th>
Sales Person
</th>
<th>
Status
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
@{int indexA = 1;}
@foreach (var item in Model.Select((x, i) => new { Data = x, Index = i }))
{
if (@item.Data.StageName == "Prospect")
{
<tr>
<td>
@*@(item.Index + 1)*@
@indexA
</td>
<td>
@item.Data.ClientName
</td>
<td>
<a id="myBtn" href="#">@item.Data.TenderName</a>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p class="message">Select an action</p>
<div style="text-align: center;">
<a type="button" class="btn btn-primary" asp-controller="Stages"
asp-action="CreateProjectBrief" asp-route-id="@item.Data.Id">Add Project Brief</a>
<a type="button" class="btn btn-primary" asp-controller="Stages"
asp-action="ViewProjectBrief" asp-route-id="@item.Data.Id">View Project Brief</a>
</div>
</div>
</div>
</td>
<td>
@item.Data.TenderCategoryName
</td>
<td>
<a asp-controller="Project" asp-action="EditProject" asp-route-id="@item.Data.Id">Edit</a> |
<a asp-controller="Project" asp-action="DeleteProject" asp-route-id="@item.Data.Id"
onclick="return confirm('Are you sure, you want to delete it?')">Delete</a>
</td>
</tr>
indexA++;
}
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="potential" class="tabcontent">
<div class="row">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<p class="card-description">
Submitted Proposal/Bid
</p>
<table class="table table-striped">
<thead>
<tr>
<th>
No
</th>
<th>
Client name
</th>
<th>
Tender name
</th>
<th>
Category
</th>
<th>
Date Submit/PO Date
</th>
<th>
Total Tender Value(RM)
</th>
<th>
Total Tender Cost(RM)
</th>
<th>
Margin
</th>
<th>
Margin Value(RM)
</th>
<th>
Sales Person
</th>
<th>
Status
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
@{int indexB = 1;}
@foreach (var item in Model.Select((x, i) => new { Data = x, Index = i }))
{
if (@item.Data.StageName == "Potential")
{
<tr>
<td>
@*@(item.Index + 1)*@
@indexB
</td>
<td>
@item.Data.ClientName
</td>
<td>
@item.Data.TenderName
</td>
<td>
@item.Data.TenderCategoryName
</td>
<td>
<a asp-controller="Project" asp-action="EditProject" asp-route-id="@item.Data.Id">Edit</a> |
<a asp-controller="Project" asp-action="DeleteProject" asp-route-id="@item.Data.Id"
onclick="return confirm('Are you sure, you want to delete it?')">Delete</a>
</td>
</tr>
indexB++;
}
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="bestfew" class="tabcontent">
<div class="row">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<p class="card-description">
Meet Budget/ Shortlisted/ Benchmark/ Pilot
</p>
<table class="table table-striped">
<thead>
<tr>
<th>
No
</th>
<th>
Client name
</th>
<th>
Tender name
</th>
<th>
Category
</th>
<th>
Date Submit/PO Date
</th>
<th>
Total Tender Value(RM)
</th>
<th>
Total Tender Cost(RM)
</th>
<th>
Margin
</th>
<th>
Margin Value(RM)
</th>
<th>
Sales Person
</th>
<th>
Status
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
@{int indexC = 1;}
@foreach (var item in Model.Select((x, i) => new { Data = x, Index = i }))
{
if (@item.Data.StageName == "Best Few")
{
<tr>
<td>
@*@(item.Index + 1)*@
@indexC
</td>
<td>
@item.Data.ClientName
</td>
<td>
@item.Data.TenderName
</td>
<td>
@item.Data.TenderCategoryName
</td>
<td>
<a asp-controller="Project" asp-action="EditProject" asp-route-id="@item.Data.Id">Edit</a> |
<a asp-controller="Project" asp-action="DeleteProject" asp-route-id="@item.Data.Id"
onclick="return confirm('Are you sure, you want to delete it?')">Delete</a>
</td>
</tr>
indexC++;
}
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="CTB" class="tabcontent">
<div class="row">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
@*<h4 class="card-title">Striped Table</h4>
<p class="card-description">
Add class <code>.table-striped</code>
</p>*@
<div class="table-responsive">
<p class="card-description">
Recommended/ LOI
</p>
<table class="table table-striped">
<thead>
<tr>
<th>
No
</th>
<th>
Client name
</th>
<th>
Tender name
</th>
<th>
Category
</th>
<th>
Date Submit/PO Date
</th>
<th>
Total Tender Value(RM)
</th>
<th>
Total Tender Cost(RM)
</th>
<th>
Margin
</th>
<th>
Margin Value(RM)
</th>
<th>
Sales Person
</th>
<th>
Status
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
@{int indexD = 1;}
@foreach (var item in Model.Select((x, i) => new { Data = x, Index = i }))
{
if (@item.Data.StageName == "Commitment To Buy")
{
<tr>
<td>
@*@(item.Index + 1)*@
@indexD
</td>
<td>
@item.Data.ClientName
</td>
<td>
@item.Data.TenderName
</td>
<td>
@item.Data.TenderCategoryName
</td>
<td>
<a asp-controller="Project" asp-action="EditProject" asp-route-id="@item.Data.Id">Edit</a> |
<a asp-controller="Project" asp-action="DeleteProject" asp-route-id="@item.Data.Id"
onclick="return confirm('Are you sure, you want to delete it?')">Delete</a>
</td>
</tr>
indexD++;
}
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="followup" class="tabcontent">
<div class="row">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
@*<h4 class="card-title">Striped Table</h4>
<p class="card-description">
Add class <code>.table-striped</code>
</p>*@
<div class="table-responsive">
<p class="card-description">
Backorders/ LOA/ Contract
</p>
<table class="table table-striped">
<thead>
<tr>
<th>
No
</th>
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(278.4, 89%, 36%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EJL%3C/text%3E%3C/svg%3E)
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(288, 78%, 37%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EBZ%3C/text%3E%3C/svg%3E)
