Bootstrap modal Dialog Rückmeldung in MVC

Question

Ich brauche Hilfe bei Rückkehr Erfolg oder Fehlermeldung im Bootstrap modalen Dialog von Teilansicht in MVC.

Wenn Sie auf den Link in der _LayoutAdmin-Ansicht klicken, wird die Teilansicht Impersonation.cshtml in den modalen Dialog geladen.

Nach der Eingabe und klicken Sie auf Senden Schaltfläche, wird das Popup-Fenster geschlossen und im Controller veröffentlichen. Wie zeige ich die Fehlermeldung im modalen Dialog an, wenn Benutzereingabedaten nicht existieren?

Jede Anleitung ist sehr zu schätzen!

Screenshot:

_LayoutAdmin.cshtml:

<a href="@Url.Action("Impersonation", "UserRoles")" class="modal-link"> 
    Impersonation &nbsp; 
    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> 
</a> 

<div id="modal-container" class="modal fade" tabindex="-1" role="dialog"> 
</div> 

<script> 

$(function() { 

       $('body').on('click', '.modal-link', function (e) { 
        e.preventDefault(); 
        $(this).attr('data-target', '#modal-container'); 
        $(this).attr('data-toggle', 'modal'); 
       }); 
       // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears 
       $('body').on('click', '.modal-close-btn', function() { 
        $('#modal-container').modal('hide'); 
       }); 
       //clear modal cache, so that new content can be loaded 
       $('#modal-container').on('hidden.bs.modal', function() { 
        $(this).removeData('bs.modal'); 
       }); 
       $('#CancelModal').on('click', function() { 
        return false; 
       }); 
     }); 

    </script> 

(Teilansicht) Impersonation.csthml:

@model FAB_Portal.Models.FAB_View 
@using (Html.BeginForm()) 
{ 
    <script type="text/javascript"> 

     $("a#impersonate").click(function() { 
      var username = $('#UserName').val(); 
      $.ajax({ 
       type: "POST", 
       url: "@Url.Action("Impersonation", "UserRoles")", 
       data: { UserName: username }, 
       success: function (result) { 
        if (result.success) { 
         $('#modal-dialog').modal('hide'); 

        } else { 
         $('#modal-body').html(result); 
        } 
       } 
      }); 
     }); 

    </script> 

<div class="modal-dialog"> 
    <div class="modal-content"> 

     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Impersonation</h4> 
     </div> 

     <div class="modal-body"> 
      <div class="form-horizontal"> 
       @Html.Label("Impersonate", htmlAttributes: new { @class = "control-label col-md-4" }) 
       @Html.TextBox("UserName", null, htmlAttributes: new { @class = "form-control" }) 
       <text class="text-danger">@ViewBag.Error</text> 
      </div> 
     </div> 

     <div class="modal-footer"> 
      @using (Html.BeginForm("Impersonation", "UserRoles", FormMethod.Post)) 
      { 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       <a class="btn btn-danger btn-ok" id="impersonate" >Submit</a> 
      } 
     </div> 
    </div> 
</div> 
} 

UserRoles.Controller:

public ActionResult Impersonation() 
{ 
    return PartialView("Impersonation"); 
} 

[HttpPost] 
public ActionResult Impersonation(FAB_View model) 
{ 
    if (ModelState.IsValid) 
    { 
     UserRoleHelper userrolehelper = new UserRoleHelper(); 
     bool validuser = userrolehelper.CheckValidUser(model.UserName); 
     if (validuser == false) 
     { 
      ViewBag.Error = "Don't have such user!"; 
      return PartialView("Impersonation"); 
     } 
     userrolehelper.StartImpersonate(model.UserName); 
    }   
    return PartialView("Impersonation"); 
} 

Answer 1

Fix it mich von unten mit:

LayoutAdmin Ansicht:

<script> 
$(function() { 

     $.ajaxSetup({ cache: false }); 

     $("#impersonate").on("click", function (e) { 

      // hide dropdown if any 
      $(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle'); 

      $('#myModalContent').load(this.href, function() { 
       $('#myModal').modal({ 
        /*backdrop: 'static',*/ 
        keyboard: true 
       }, 'show'); 
       bindForm(this); 
      }); 
      return false; 
     }); 
    }); 

    function bindForm(dialog) { 

     $('form', dialog).submit(function() { 
      $.ajax({ 
       url: this.action, 
       type: this.method, 

       data: $(this).serialize(), 
       success: function (result) { 
        if (result.success) { 
         $('#myModal').modal('hide'); 
         //Refresh 
         location.reload(); 
        } else { 
         $('#myModalContent').html(result); 
         bindForm(); 
        } 
       } 
      }); 
      return false; 
     }); 
    } 

</script> 

Impersonation.cshtml:

[HttpPost] 
     [ValidateAntiForgeryToken] 
     public ActionResult Impersonation(FAB_View model) 
     { 
      if (ModelState.IsValid) 
      { 
       UserRoleHelper userrolehelper = new UserRoleHelper(); 
       var loggedonuser = userrolehelper.GetLoggedOnUser(); 
       var currentuser = userrolehelper.GetCurrentUser(); 

       bool validuser = userrolehelper.CheckValidUser(model.UserName); 

       if (validuser == false) 
       { 
        ViewBag.Error = "* Don't have such user!"; 
        return PartialView("Impersonation", model); 
        //return Json(new { success = false }); 
       } 
       else 
       { 
        //userrolehelper.StartImpersonate(model.UserName); 
        return Json(new { success = true }); 
       }    
      } 

      return PartialView("Impersonation", model); 

     } 

Answer 2

Versuchen Sie, diese ändern (Teilansicht) Impersonation.csthml:

@model FAB_Portal.Models.FAB_View 
    @using (Html.BeginForm("Impersonation", "UserRoles", FormMethod.Post,new { @id="form" })) 
       { 

    <div class="modal-dialog"> 
     <div class="modal-content"> 

      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Impersonation</h4> 
      </div> 

      <div class="modal-body"> 
       <div class="form-horizontal"> 
        @Html.Label("Impersonate", htmlAttributes: new { @class = "control-label col-md-4" }) 
        @Html.TextBox("UserName", null, htmlAttributes: new { @class = "form-control" }) 
        <text class="text-danger">@ViewBag.Error</text> 
       </div> 
      </div> 

      <div class="modal-footer"> 

        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
        <a class="btn btn-danger btn-ok" id="impersonate" data-dismiss="modal">Submit</a> 

      </div> 
     </div> 
    </div> 
    } 
    <script type="text/javascript"> 

      $("a#impersonate").click(function() { 

       $.ajax({ 
        type: "POST", 
        url: "@Url.Action("Impersonation", "UserRoles")", 
        data: $('#form').serialize(), 
        success: function (result) { 
         if (result == "success") { 
          $('#dialogDiv').modal('hide'); 

         } else { 
          $('#dialogContent').html(result); 
         } 
        } 
       }); 
      }); 

     </script> 

UserRoles.Controller:

[HttpPost] 
public ActionResult Impersonation(FAB_View model) 
{ 
    if (ModelState.IsValid) 
    { 
     UserRoleHelper userrolehelper = new UserRoleHelper(); 
     bool validuser = userrolehelper.CheckValidUser(model.UserName); 
     if (validuser == false) 
     { 
      ViewBag.Error = "Don't have such user!"; 
      return Content("error"); 
     } 
     userrolehelper.StartImpersonate(model.UserName); 
    }   
    return Content("success"); 
} 

die Sie interessieren und vergessen Sie nicht, wie zu schlagen, wenn es funktioniert. Lassen Sie mich wissen, wenn es nicht funktioniert, um einen anderen Weg zu bieten oder diesen zu modifizieren.