Отчаянно ищет рабочий пример этого шаблона проверки модального диалога MVC

Question

У меня есть сетка. Когда пользователь нажимает на ссылку в одной из строк, я должен взять этот идентификатор строки и запросить у пользователя параметр даты в модальном диалоговом окне. Мне нужно сделать вызов сервера, чтобы подтвердить, что введенный в диалоговом окне ввод даты подходит для идентификатора строки, который был первоначально нажат. Если это неверно, отобразите ошибку в диалоговом окне, иначе отправьте идентификатор строки и дату, чтобы выполнить действие контроллера с указанными параметрами RowId и Date as.

Прекрасным примером будет то, где содержимое диалогового окна было построено с использованием частичного представления на сервере, и диалоговое окно обновляется с использованием Ajax, чтобы избежать обновления полного экрана.

Я использую C#, MVC 5, jQuery, JQueryUI и хотел бы избежать других примеров с использованием дополнительных фреймворков.

Я видел примеры, которые делают разные вещи, но никто не делает все в этом шаблоне. Я очень хочу получить рабочий пример, который я могу скачать. Кажется, я просто не могу собрать все кусочки различных примеров, которые я видел.

Answer 1

Просто скопируйте и вставьте пример ниже как есть. Я использую bootstrap для модального всплывающего окна (мне это очень нравится и предпочитаю его в диалоговом окне интерфейса jQuery), если вы хотите его изменить, это зависит от вас. Остальная логика делает именно то, что вы просили.

Контроллер:

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 вид:

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

Индексный:

@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> 

Выход: