Wie bekomme ich die ID und den Namen eines Objekts auf Knopfdruck und zeige sie in einem Modal in asp.net view

Question

Ich habe eine stark typisierte Ansicht, in der ich einige Objekte aus einer Datenbank durchlaufen und sie in einer Jumbobox anzeigen mit zwei Tasten drin. Wenn ich auf eine der Tasten klicke, erscheint ein modal. Ich hätte gerne irgendwo in diesem Modal den Namen und die ID des entsprechenden Objekts, aber ich weiß nicht wirklich, wie ich das machen soll. Ich bin ein wenig verwirrt, wo C# und wo Javascript zu verwenden. Ich bin offensichtlich ein Neuling darin.

Kann jemand helfen?

Dies ist der Code, den ich bisher habe. Ich habe nichts in Bezug auf meine Frage, mit Ausnahme der Code für den modalen:

@model IEnumerable<eksp.Models.WorkRole> 
@{ 
    ViewBag.Title = "DisplayListOfRolesUser"; 
} 

<div class="alert alert-warning alert-dismissable">You have exceeded the number of roles you can be focused on. You can 'de-focus' a role on this link.</div> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     var dataJSON; 
     $(".alert").hide(); 
     //make the script run cuntinuosuly 
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("checkNumRoles", "WorkRoles")', 
      dataType: "json", 
      success: successFunc, 
      error: errorFunc 
     }); 

     function successFunc(data, status) { 


      if (data == false) { 
       $(".alert").show(); 
       $('.btn').addClass('disabled'); 

       //$(".btn").prop('disabled', true); 
      } 

     } 

     function errorFunc() { 
      alert('error'); 
     } 


    }); 


</script> 



@foreach (var item in Model) 
{ 

    <div class="jumbotron"> 
     <h1>@Html.DisplayFor(modelItem => item.RoleName)</h1> 
     <p class="lead">@Html.DisplayFor(modelItem => item.RoleDescription)</p> 
     <p> @Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { @class = "btn btn-primary btn-lg" })</p> 
     <p> <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p> 
    </div> 

} 



<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">@Html.DisplayFor(modelItem => item.RoleName)//doesn't work</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">Save</button> 
      </div> 
     </div> 

    </div> 
</div> 

Answer 1

allererst

Sie müssen die Daten-Toggle = „modal“ und Daten löschen -target = „# myModal“ vom Button, wie wir es manuell von JS und fügen sie eine Klasse auf diese Schaltfläche verweisen später nennen wird, wird Ihre letzte Taste sein:

<button type="button" class="btn btn-default btn-lg modal-opener">Had role in the past</button> 

Dann

In Ihrer jumbotron Schleife, müssen wir die Werte, die Sie später auf Ihrem modalen zeigen wollen fangen, wir wollen es nicht zeigen, so gehen wir mit versteckten Eingängen:

<input type="hidden" name="ID_OF_MODEL" value="@item.WorkRoleId" /> 
<input type="hidden" name="NAME_OF_MODEL" value="@item.RoleName" /> 

Für jede Information Wenn Sie anzeigen möchten, erstellen Sie eine Eingabe, die auf die aktuellen Schleifenwerte verweist.

Nun zeigen Sie schließlich die modale

Ihre document.ready Funktion dieser neuen Funktion haben:

$('.modal-opener').on('click', function(){ 
     var parent = $(this).closest('.jumbotron'); 
     var name = parent.find('input[name="NAME_OF_MODEL"]').val(); 
     var id = parent.find('input[name="ID_OF_MODEL"]').val(); 

     var titleLocation = $('#myModal').find('.modal-title'); 
     titleLocation.text(name); 

     // for each information you'll have to do like above... 

     $('#myModal').modal('show'); 
}); 

Es ist einfach, diese Werte greifen wir in versteckten Eingängen gelegt.

Ihr endgültiger Code

@model IEnumerable<eksp.Models.WorkRole> 
@{ 
    ViewBag.Title = "DisplayListOfRolesUser"; 
} 

<div class="alert alert-warning alert-dismissable">You have exceeded the number of roles you can be focused on. You can 'de-focus' a role on this link.</div> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     var dataJSON; 
     $(".alert").hide(); 
     //make the script run cuntinuosuly 
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("checkNumRoles", "WorkRoles")', 
      dataType: "json", 
      success: successFunc, 
      error: errorFunc 
    }); 

    function successFunc(data, status) { 


     if (data == false) { 
      $(".alert").show(); 
      $('.btn').addClass('disabled'); 

      //$(".btn").prop('disabled', true); 
     } 

    } 

    function errorFunc() { 
     alert('error'); 
    } 

    $('.modal-opener').on('click', function(){ 
     var parent = $(this).closest('.jumbotron'); 
     var name = parent.find('input[name="NAME_OF_MODEL"]').val(); 
     var id = parent.find('input[name="ID_OF_MODEL"]').val(); 

     var titleLocation = $('#myModal').find('.modal-title'); 
     titleLocation.text(name); 

     // for each information you'll have to do like above... 

     $('#myModal').modal('show'); 
    }); 
}); 


</script> 



@foreach (var item in Model) 
{ 

    <div class="jumbotron"> 
    <input type="hidden" name="ID_OF_MODEL" value="@item.WorkRoleId" /> 
    <input type="hidden" name="NAME_OF_MODEL" value="@item.RoleName" /> 

    <h1>@Html.DisplayFor(modelItem => item.RoleName)</h1> 
    <p class="lead">@Html.DisplayFor(modelItem => item.RoleDescription)</p> 
    <p> @Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { @class = "btn btn-primary btn-lg" })</p> 
    <p> <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p> 
</div> 

} 



<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">@Html.DisplayFor(modelItem => item.RoleName)//doesn't work</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">Save</button> 
     </div> 
    </div> 
</div> 

Answer 2

Ich denke, Sie die Server-Seite Rendering von Razor und die Client-Seite Wiedergabe der Modal verwirrend. Das Modal kann nicht auf Ihre Modelleigenschaften zugreifen, da diese vor dem Bereitstellen der Seite für den Benutzer serverseitig gerendert werden. Deshalb funktioniert das in Ihrem Code <h4 class="modal-title">@Html.DisplayFor(modelItem => item.RoleName)//doesn't work</h4> nicht.

Sie möchten die Event-Client-Seite im Browser erfassen. Bootstrap ermöglicht dies, indem es Ihnen erlaubt, sich in Events des Modal einzuloggen. Was Sie tun möchten, ist in den "show" event Haken und in diesem Fall erfassen Sie die Daten, die Sie von Ihrer Seite wollen und liefern Sie das an das Modal. Im Ereignis "show" haben Sie Zugriff auf das relatedTarget - das ist die Schaltfläche, die das Modal aufgerufen hat.

Ich würde noch einen Schritt weiter gehen und die Dinge einfacher machen, indem ich die Daten, die Sie benötigen, als Daten-xxxx-Attribute oder DOM-Elemente, die einfach über JQuery zugänglich sind, hinzufügt. Ich habe ein Muster für Sie erstellt, basierend auf dem, was Sie gezeigt haben, um Ihnen eine Vorstellung davon zu geben, wie es erreicht werden kann.

Bootply Sample

Und wenn nötig ... How to specify data attributes in razor