Pastebin is 300% more awesome when you are logged in. Sign Up, it's FREE!
Guest

ASP.net MVC Modal

By: rohitkandhal on Jul 3rd, 2013  |  syntax: C#  |  size: 3.54 KB  |  hits: 495  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. View _AddEstEffort.cshtml (Modal implementation using Partial View)
  2.  
  3. @model LMSPriorTool.ViewModels.EstimatedEffortViewModel
  4.  
  5. <div class="modal-header">
  6.     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  7.     <h3>Add new Estimated Effort</h3>
  8. </div>
  9.  
  10. @using (Html.BeginForm("AddEstimatedEffort", "Project", FormMethod.Post, new { @class = "modal-form" }))
  11. {
  12.     @Html.ValidationSummary()
  13.  
  14.     <div class="modal-body">
  15.         <div class="row-fluid">
  16.              <div>
  17.                 @Html.LabelFor(x => x.ProjectId)
  18.                 @Html.EditorFor(x => x.ProjectId)
  19.             </div>
  20.             <div>
  21.                 @Html.LabelFor(x => x.Cost)
  22.                 @Html.EditorFor(x => x.Cost)
  23.             </div>
  24.         </div>
  25.     </div>
  26.    
  27.     <div class="modal-footer">
  28.         <button class="btn btn-primary" type="submit">Save</button>
  29.         <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  30.     </div>
  31. }
  32.  
  33. View: Layout.cshtml (Included link to open modal)
  34. @Html.ActionLink("Add Estimated Effort", "AddEstimatedEffort", new { projectId = Model.ProjectId }, new { id = "btnAddEstimatedEffort", @class = "btn btn-info pull-right" })
  35.  
  36. ViewModel: EstimatedEffortViewModel
  37. public class EstimatedEffortViewModel
  38.     {
  39.         public int Cost { get; set; }
  40.         public int ProjectId { get; set; }
  41.     }
  42.  
  43. Controller: ProjectController.cs
  44.        
  45.         public ActionResult AddEstimatedEffort(int projectId = 1)
  46.         {
  47.             EstimatedEffortViewModel efvm = new EstimatedEffortViewModel
  48.             {
  49.                 ProjectId = projectId,
  50.             };
  51.             return PartialView("_AddEstEffort", efvm);
  52.         }
  53.  
  54.         [HttpPost]
  55.         public ActionResult AddEstimatedEffort(EstimatedEffortViewModel estimatedEffortVM)
  56.         {
  57.             Project project = db.Projects.Find(estimatedEffortVM.ProjectId);
  58.             if (project == null)
  59.             {
  60.                 return HttpNotFound();
  61.             }
  62.             project.EstimatedEfforts.Add(new EstimatedEffort
  63.             {
  64.                 EstimatedEffortId = estimatedEffortVM.EstimatedEffortId,
  65.                 Cost = estimatedEffortVM.Cost,
  66.             });
  67.             db.SaveChanges();
  68.  
  69.             return RedirectToAction("Details", new { id = estimatedEffortVM.ProjectId });
  70.         }
  71.  
  72. JavaScript to open Modal:
  73. <script type="text/javascript">
  74.     $(function () {
  75.  
  76.         //Optional: turn the chache off
  77.         $.ajaxSetup({ cache: false });
  78.  
  79.         $('#btnAddEstimatedEffort').click(function () {
  80.             $('#dialogContent').load(this.href, function () {
  81.                 $('#dialogDiv').modal({
  82.                     backdrop: 'static',
  83.                     keyboard: true
  84.                 }, 'show');
  85.                 bindForm(this);
  86.             });
  87.             return false;
  88.         });
  89.     });
  90.  
  91.     function bindForm(dialog) {
  92.         $('form', dialog).submit(function () {
  93.             $.ajax({
  94.                 url: this.action,
  95.                 type: this.method,
  96.                 data: $(this).serialize(),
  97.                 success: function (result) {
  98.                     if (result.success) {
  99.                         $('#dialogDiv').modal('hide');
  100.                         // Refresh:
  101.                         // location.reload();
  102.                     } else {
  103.                         $('#dialogContent').html(result);
  104.                         bindForm();
  105.                     }
  106.                 }
  107.             });
  108.             return false;
  109.         });
  110.     }