Using JavaScript: Open Modal in foreach

Jerry Lipan 916 Reputation points
2022-01-17T22:05:10.477+00:00

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">&times;</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>  
                               
ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,134 questions
0 comments No comments
{count} votes

3 answers

Sort by: Most helpful
  1. Brando Zhang-MSFT 2,796 Reputation points Microsoft Vendor
    2022-01-18T03:13:09.01+00:00

    Hi @,

    As far as I know, if you are using the Bootstartp model popup, there is no need to write the js to open and close the model by yourself. It contains the attribute which could trigger the model popup.

    I suggest you could modify your codes like below and try again.

    1.Modify the trigger button as below:

              <a id="myBtn"  data-toggle="modal"  data-target="#modalpopup_@item.Index">@item.Data.TenderName</a>
    

    2.You could set an ID for model like this:

      <div id="modalpopup_@item.Index" class="modal">
    
    0 comments No comments

  2. Jerry Lipan 916 Reputation points
    2022-01-18T03:43:51.31+00:00

    Hi @Brando Zhang-MSFT ,

    I'm not using Bootstrap

    After do the changes, I got this. I cannot click [ Add Project Brief ] or [ View Project Brief ]
    165904-20220118-112806.gif

    The changes as following,
    165866-18012022-004.png

    0 comments No comments

  3. Jerry Lipan 916 Reputation points
    2022-01-19T05:45:40.18+00:00

    Hi @Brando Zhang-MSFT

    I need help for this. Please. I can give full code. Just tell me where to send

    0 comments No comments