Verzweifelt auf der Suche nach einem funktionierenden Beispiel für dieses MVC-modale Dialogfeld Validierungsmuster

Question

Ich habe ein Raster. Wenn der Benutzer auf einen Link in einer der Zeilen klickt, muss ich diese Zeilen-ID übernehmen und den Benutzer nach einem Datumsparameter in einem modalen Dialog fragen. Ich muss einen Serveraufruf durchführen, um zu bestätigen, dass die Datumeingabe, die in den Dialog eingegeben wird, für die Reihen-ID passend ist, die ursprünglich geklickt wurde. Wenn nicht gültig, Fehler im Dialogfeld anzeigen, andernfalls Zeilen-ID und Datum übermitteln, um eine Controller-Aktion mit der angegebenen RowId und dem angegebenen Datum als Parameter auszuführen.

Das perfekte Beispiel wäre, wenn der Inhalt des Dialogfelds mit einer Server-Teilansicht erstellt wurde und das Dialogfeld mithilfe von Ajax aktualisiert wird, um eine vollständige Bildschirmaktualisierung zu vermeiden.

Ich benutze C#, MVC 5, jQuery, JQueryUI und möchte andere Beispiele mit zusätzlichen Frameworks vermeiden.

Ich habe Beispiele gesehen, die verschiedene Dinge tun, aber keine, die alles in diesem Muster tun. Ich bin wirklich gespannt auf ein funktionierendes Beispiel, das ich herunterladen kann. Ich kann einfach nicht alle Teile der verschiedenen Beispiele zusammensetzen, die ich gesehen habe.

Answer 1

Kopieren Sie einfach und fügen Sie das Beispiel unten wie es ist.Ich verwende Bootstrap für das modale Popup (ich mag es wirklich und bevorzuge es über die jQuery UI-Dialog), wenn Sie es dann ändern wollen, liegt es an Ihnen. Der Rest der Logik macht genau das, wonach Sie gefragt haben.

Controller:

namespace MVCExample.Controllers 
{ 
    public class Person 
    { 
     public int ID { get; set; } 
     public string Name { get; set; } 
    } 

    public class ExampleController : Controller 
    { 
     public ActionResult Index() 
     { 
      var p1 = new Person { ID = 1, Name = "P1" }; 
      var p2 = new Person { ID = 2, Name = "P2" }; 
      var people = new List<Person> { p1, p2 }; 

      return View(people); 
     } 

     public PartialViewResult _GetPartialView(string date) 
     { 
      ViewBag.Date = date; 
      return PartialView("~/Views/Example/_Partial.cshtml"); 
     } 

     public JsonResult ValidateDate(int id, string date) 
     { 
      //Validate your date here and return appropriate response... 
      return Json(new { IsValid = true }, JsonRequestBehavior.AllowGet); 
     } 
    } 
} 

_Partial.cshtml Ansicht:

<div style="border:1px solid red;margin-top:5px;"> 
    <p>Thank you.Your request for Date - @ViewBag.Date has been received!</p> 
</div> 

Index Ansicht:

@model IEnumerable<MVCExample.Controllers.Person> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 

@{ 
    Layout = null; 
} 

<script type="text/javascript"> 
    $(function() { 
     var _id = null; 

     $(".enterDate").click(function() { 
      var id = $(this).data('id'); 
      _id = id; 
      $("#modal").modal('show'); 
      $('#response').empty(); 
     }); 

     $("#btnOK").click(function() { 
      $('#response').empty(); 
      var date = $("#myDate").val(); 
      if (date != "" && _id != null) { 
       alert("Going to the server to check if the date is valid - " + date + ".ID - " + _id); 
       $.getJSON("/Example/ValidateDate?id=" + _id + "&date=" + date, function (data) { 

        debugger; 
        if (data.IsValid == true) { 
         alert("The date appears to be valid. Going to the server again to fetch a partial view."); 

         $.get("Example/_GetPartialView?date=" + date, function (data) { 
          $('#response').html(data); 
         }); 
        } 
       }); 
      } 
     }); 
    }); 
</script> 
<table class="table"> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.Name) 
     </th> 
     <th></th> 
    </tr> 

    @foreach (var item in Model) 
    { 
     <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.Name) 
      </td> 
      <td> 
       <a href="#" class="enterDate" data-id="@item.ID">Enter date</a> 
      </td> 
     </tr> 
    } 
</table> 

<!--This is the modal popup--> 
<div class="modal fade" role="dialog" id="modal"> 
    <div class="modal-dialog"> 
     <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">Please select date</h4> 
      </div> 
      <div class="modal-body"> 
       <input type="date" id="myDate" /> 
       <input type="button" id="btnOK" value="OK" /> 
       <div id="response"></div> 
      </div> 
     </div> 
    </div> 
</div> 

Ausgang: