ASP.Net MVC 5 Daten an Modal übergeben

Question

Ich muss das Objekt an mein Modal übergeben. Denn jetzt habe ich so etwas wie diese:

@for (int i = 0; i < @Model.Count; i++) 
{ 
    <div id="contentDiv" style="margin: 10px"> 
     <div class="form-group"> 
      <div> 
       DAY : @Model[i].Day.Day/Hour : @Model[i].Hour 
      </div> 
      <div class="form-group"> 

       <button id="reservationButton" class="btn-default btn-lg" disabled="@Model[i].IsHourTaken()" onclick="@($"OpenModalPopUp('{i}')");">Book</button> 
      </div> 
     </div> 
    </div> 
} 

meinen js:

function OpenModalPopUp(id) { 
    $('#myModal').modal(); 
}; 

und meine modal:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
aria-labelledby="myModalLabel"> 
<div class="modal-dialog" 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">&times;</span></button> 
      <h4 class="modal-title" id="myModalLabel">Book this hour!</h4> 
     </div> 
     <div class="modal-body"> 
      <div> 
       <div> 
        <div class="row"> 
         <b>Day:</b> 
         <div class="col-lg-5"> 
          <span class="reservationDay"> @Model[indexOftheDay].Day </span> 
         </div> 
        </div> 
        <div class="row"> 
         <b>Hour:</b> 
         <div class="col-lg-5"> 
          <span class="reservationHour"> @Model[indexOftheDay].Hour </span> 
         </div> 
        </div> (......) 

Mein Problem ist hier @Model[indexOftheDay].Day ich weiß nicht, wie indexOftheDay passieren zu meinem modal.

Vielen Dank im Voraus!

Answer 1

, wenn Ihr Modell wie folgt aus:

//TestModel: Name of your model 
public class TestModel 
    { 
     public int Id { get; set; } 
     public DateTime Day { get; set; } 
     public DateTime Hour { get; set; } 

     public bool IsHourTaken() 
     { 
      //your code 
      return false; 
     } 
    } 

Ihr Controller muss mag:

//HomeController: name of your controller 
public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      //get list from db or ... 
      List<TestModel> models = new List<Models.TestModel>() 
      { 
       new Models.TestModel { Day = DateTime.Now, Hour = DateTime.Now, Id = 1}, 
       new Models.TestModel { Day = DateTime.Now, Hour = DateTime.Now, Id = 2}, 
       new Models.TestModel { Day = DateTime.Now, Hour = DateTime.Now, Id = 3}, 
      }; 

      return View(models); 
     } 

     public ActionResult Details(int Id) 
     { 
      //find item from db or ... 
      var model = new Models.TestModel { Day = DateTime.Now, Hour = DateTime.Now, Id = 1 }; 
      return PartialView("_ModalView", model); 
     } 
    } 

Ihrer Ansicht nach muss mag:

@model IEnumerable<WebApplication4.Models.TestModel> 
@foreach (var item in Model) 
{ 
    <div id="contentDiv" style="margin: 10px"> 
     <div class="form-group"> 
      <div> 
       DAY : @item.Day 
      </div> 
      <div class="form-group"> 
       <button id="reservationButton" data-id='@item.Id' class="btn-default btn-lg" disabled='@item.IsHourTaken()'>Book</button> 
      </div> 
     </div> 
    </div> 
} 

<script> 
    var detailUrl = '/Home/Details'; 
    $(function() { 
     $(".btnDetail").click(function() { 
      var $buttonClicked = $(this); 
      var id = $buttonClicked.attr('data-id'); 
      var options = { "backdrop": "static", keyboard: true }; 
      $.ajax({ 
       type: "GET", 
       url: detailUrl, 
       contentType: "application/json; charset=utf-8", 
       data: { "Id": id }, 
       datatype: "json", 
       success: function (data) { 
        debugger; 
        $('#myModalContent').html(data); 
        $('#myModal').modal(options); 
        $('#myModal').modal('show'); 

       }, 
       error: function() { 
        alert("Dynamic content load failed."); 
       } 
      }); 
     }); 
    }); 

</script> 

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel"> 
    <div id='myModalContent'></div> 
</div> 

und Sie müssen eine PartialView wie dieses:

@model WebApplication4.Models.TestModel 
<div class="modal-dialog" 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">&times;</span> 
      </button> 
      <h4 class="modal-title" id="myModalLabel">Book this hour!</h4> 
     </div> 
     <div class="modal-body"> 
      <div> 
       <div> 
        <div class="row"> 
         <div class="col-lg-5"> 
          <b> 
           Day: 
           <span class="reservationDay"> @Model.Day </span> 
          </b> 
         </div> 
        </div> 
        <div class="row"> 
         <div class="col-lg-5"> 
          <b> 
           Hour: 
           <span class="reservationHour">@Model.Hour </span> 
          </b> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

Danke, mein Herr! Ich schaffte es, wie dies zu tun:

<button id="reservationButton" class="btn-default btn-lg" disabled="@Model[i].IsHourTaken()" onclick="@($"OpenModalPopUp('{@Model[i].GetDay()}')");">Book</button> 

js:

function OpenModalPopUp(reservationDay) { 
    $('.reservationDay').text(reservationDay); 
    $('#myModal').modal(); 
}; 

und in meinem modal

<div class="modal-body"> 
      <div> 
       <div class="container-fluid"> 
        <div class="row"> 
         <div class="col-xs-3"> 
          <b>Day</b> 
         </div> 
         <div class="col-xs-9"> 
          <span class="reservationDay"/> 
         </div> 
        </div> 

Unfortunatelly das nächste Problem konfrontiert ich ist, dass aus irgendeinem Grund (Fehler: Ein konstanter Wert wird erwartet ...) Ich kann zwei Parameter nicht an meine Funktion übergeben :(Meine aktualisierte Funktion sieht so aus:

function OpenModalPopUp(reservationDay,reservationHour) { 
     $('.reservationDay').text(reservationDay); 
     $('.reservationHour').text(reservationHour); 
     $('#myModal').modal(); 
    };