मुझे लगता है कि कुछ ऐसा किया जा रहा है जो मैंने सोचा था कि यह काफी आसान होगा।

मेरे पास 120 आइटमों की एक सूची है जो एक .net कोर एमवीसी ऐप में गतिशील रूप से उत्पन्न होते हैं और मेरे दृश्य में मेरे पास निम्न कोड है

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CreatedBy)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CreatedOn)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Notes)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Application)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Domain)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CreatedBy)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CreatedOn)
            </td>
            <td>
                <button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#d-@item.ObjID" aria-expanded="false" aria-controls="#d-@item.ObjID">
                    Notes
                </button>
                    <div id="d-@item.ObjID" class="collapse">
                        <div class="card card-body">
                            @Html.Raw(item.Notes)
                        </div>
                    </div>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Application.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Domain.Name)
            </td>
            <td>
                <a asp-action="Details" class="btn btn-outline-primary" asp-route-id="@item.ObjID">Details</a>
                <a asp-action="Edit" class="btn btn-outline-primary" asp-route-id="@item.ObjID">Edit</a>
                <a asp-action="Delete" class="btn btn-outline-dark" asp-route-id="@item.ObjID">Delete</a>
            </td>
        </tr>
}
    </tbody>
</table>

बटन क्लिक अपेक्षित रूप से विस्तृत या संक्षिप्त नहीं होता है - डिबग में कुछ भी नहीं है और प्रस्तुत HTML ठीक दिखता है।

JQuery और बूटस्ट्रैप कहीं और ठीक काम कर रहे हैं।

कोई भी विचार?

*** अपडेट करें ***

मैंने सुझाव के अनुसार कोड बदल दिया है और यह अभी भी काम नहीं करता है।

मैंने नीचे जेनरेट किया गया एचटीएमएल जोड़ा है अगर इससे मदद मिलती है


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
    <link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" href="/Home"></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/Home">About</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div id="Message" class="container-fluid">
        <div class="row">
        </div>
    </div>

    <div class="container-fluid">
        <main role="main" class="pb-3">
            

<h1 class="display-4">Use Cases</h1>

<p>
    <a class="btn btn-outline-primary" href="/UseCases/Create">Create New</a>
</p>

<form method="get" action="/UseCases">
    <div class="form-group row">
        <div class="col-sm-2">
            <input type="text" placeholder="Search ..." class="form-control" name="search" value="test" />
        </div>
        <div class="pl-3">
            <input type="submit" class="form-control btn btn-outline-primary" value="Search" />
        </div>
        <div class="pl-2">
            <a class="form-control btn btn-outline-primary" href="/UseCases">Back to Full List</a>
        </div>    
    </div>
</form>

<table class="table">
    <thead>
        <tr>
            <th>
                Use Case Name
            </th>
            <th>
                Created By
            </th>
            <th>
                Created On
            </th>
            <th>
                Notes
            </th>
            <th>
                Application
            </th>
            <th>
                Domain
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                rich text test
            </td>
            <td>
            </td>
            <td>
                16-03-2021 11:41
            </td>
            <td>
                <button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#d-132" aria-expanded="false" aria-controls="#d-132">
                    Notes
                </button>
                    <div id="d-132" class="collapse">
                        <div class="card card-body">
                            <p>test 1</p>
<p style="padding-left: 40px;">indent 1</p>
<p style="padding-left: 40px;">indent 2</p>
<p><strong>bold text example</strong></p>
<p><span style="color: #ba372a;">red text exmple</span></p>
                        </div>
                    </div>
            </td>
            <td>
                YorBill
            </td>
            <td>
                
            </td>
            <td>
                <a class="btn btn-outline-primary" href="/UseCases/Details?id=132">Details</a>
                <a class="btn btn-outline-primary" href="/UseCases/Edit?id=132">Edit</a>
                <a class="btn btn-outline-dark" href="/UseCases/Delete?id=132">Delete</a>
            </td>
        </tr>
        <tr>
            <td>
                test Use Case
            </td>
            <td>
            </td>
            <td>
                15-02-2021 17:08
            </td>
            <td>
                <button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#d-129" aria-expanded="false" aria-controls="#d-129">
                    Notes
                </button>
                    <div id="d-129" class="collapse">
                        <div class="card card-body">
                            
                        </div>
                    </div>
            </td>
            <td>
                YorBill
            </td>
            <td>
                
            </td>
            <td>
                <a class="btn btn-outline-primary" href="/UseCases/Details?id=129">Details</a>
                <a class="btn btn-outline-primary" href="/UseCases/Edit?id=129">Edit</a>
                <a class="btn btn-outline-dark" href="/UseCases/Delete?id=129">Delete</a>
            </td>
        </tr>
        <tr>
            <td>
                Test use case for notes
            </td>
            <td>
            </td>
            <td>
                15-03-2021 11:00
            </td>
            <td>
                <button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#d-130" aria-expanded="false" aria-controls="#d-130">
                    Notes
                </button>
                    <div id="d-130" class="collapse">
                        <div class="card card-body">
                            Test notes added to use case

2nd line

last line


                        </div>
                    </div>
            </td>
            <td>
                YorBill
            </td>
            <td>
                
            </td>
            <td>
                <a class="btn btn-outline-primary" href="/UseCases/Details?id=130">Details</a>
                <a class="btn btn-outline-primary" href="/UseCases/Edit?id=130">Edit</a>
                <a class="btn btn-outline-dark" href="/UseCases/Delete?id=130">Delete</a>
            </td>
        </tr>
    </tbody>
</table>

        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
        </div>
    </footer>

    <script type="text/javascript">
        $(window).on("load", function () {
            $('#Message').delay(3000).fadeOut(1000);
        });

        var closing = true;
        $(function () {
            $("a, input[type=submit], input[type=text], input[type=radio], button[type=submit]").click(function () { closing = false; });
            $(window).on("beforeunload", function () {
                if (closing) {
                    $.post('/log/LogOff')
                }
            });
        });
    </script>
    <script src="/lib/tinymce/js/tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: 'textarea',
            plugins: 'lists advlist emoticons',
            advlist_bullet_styles: 'square',
            advlist_number_styles: 'lower-alpha',
            menubar: false,
            width: 600,
            toolbar: 'undo redo | styleselect | bold italic | link image | outdent indent | numlist bullist | emoticons'
        });
    </script>
    
</body>
</html>

0
bhs 18 मार्च 2021, 14:31

1 उत्तर

ऐसा लगता है कि आप ObjIDप्रकार int का उपयोग कर रहे हैं, जो HTML आईडी प्रॉपर्टी के लिए मान्य नहीं है, देखें HTML5 आईडी नामकरण नियम

एक आईडी संगतता के लिए एक अक्षर से शुरू होनी चाहिए।

सभी @item.ObjID के सामने बस एक पत्र जोड़ें:

<button class="btn btn-outline-info" type="button" data-toggle="collapse" data-target="#d-@item.ObjID" aria-expanded="false" aria-controls="d-@item.ObjID">
                    Notes
</button>
<div id="d-@item.ObjID" class="collapse">
    <div class="card card-body">
        @Html.Raw(item.Notes)
    </div>
</div>
0
LazZiya 18 मार्च 2021, 14:23