Popup-Nachricht auf MVC-Formular senden

Ich habe in MVC namens Index, die einen Eingabetext auf Fokus-Ereignis haben, es eine Teilansicht, die Form hat. Nach dem Abschicken des Formulars aus der Teilansicht möchte ich eine Popup-Massage des Erfolgs zeigen oder fehlgeschlagen.Popup-Nachricht auf MVC-Formular senden

**Index.cshtml**  
    @Html.Label("inp") 
    @Html.TextBox("inp", new { @class = "form-control input-sm", id = "inp" }) 
    <div id=partial_1></div> 
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog"> 
     <div class="modal-content"> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     $("document").ready(function() 
     { 
      $(document).on('focusout', 'input:text[id="imp"]', function (event) {   
      $.ajax({ 
       url: '@Url.Action("GetPartial1", "Controller")', 
       type: 'get', 
       async: false, 
       data: { inp: $("#inp").val()}, 
       success: function (resp) { 
        $('#partial_1').html(resp); 
       }, 
       error: function (resp) { 
       } 
      }); 
      }); 
    </script>

Mein Controller folgende

**Controller.cs** 
    public ActionResult GetPartial1(string inp) 
    { 
     var model=getModel(inp); 
     return PartialView("_Partial1", model); 
    } 
public ActionResult save(Model form){ 
     return PartialView("_Partial2"); 
}

meine partial1 Sicht nach

**_partial1.cshtml** 
    @using (Html.BeginForm("save", "Controller"))      
    { 
     <div class="form-group"> 
     @Html.LabelFor(modelval => modelval.Title) 
     @Html.TextBoxFor(modelval => modelval.Title) 

    <button type="submit" class="btn btn-primary pull-right" data-toggle="modal" data-target="#modal-container">Save</button> 
    </div> 
    }

meine partial2 Sicht nach

**_partical2.cshtml** 
    <div class="modal-body"> 
     <p>massage</p> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div>

das Problem modal ist nicht nur Teilansicht Laden zeigen in G. Wenn ich eine Aktion nutze, verlinke die modale Darstellung perfekt, aber ich kann die Rasierklinge nicht über die Aktionsverbindung passieren. Mein Ziel ist, wenn Formular senden, wird eine Warnmeldung ohne Umleitung angezeigt. wie kann ich das machen ?

Quelle

2017-07-17 MAT14

Können Sie dies bitte versuchen. Es hat für mich funktioniert. Der Beitrag ist lang, Sie können also das herausnehmen, was Sie zur Lösung Ihres Problems benötigen.

Ausblick:

@{ 
    Layout = null; 
} 
<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>IndexStackOverflow100</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
     $("document").ready(function() { 
      $("#inp").focusout(function (event) { 
       $.ajax({ 
        //I'm using Home controller, you can you ControllerController 
        url: '@Url.Action("GetPartial1", "Home")', 
        type: 'get', 
        async: false, 
        data: { inp: $("#inp").val() }, 
        success: function (resp) { 
         $('#partial_1').html(resp); 
        }, 
        error: function (resp) { 
        } 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div class="container"> 
     <div class="form-grouprow"> 
      <div class="col-md-3"> 
       @Html.Label("inp") 
       @Html.TextBox("inp", null, new { @class = "form-control input-sm", id = "inp" }) 
      </div> 
     </div> 
    </div> 
    <div id=partial_1></div> 
</body> 
</html>

Controller/Modell:

public class PopupViewModel 
{ 
    public string inp { get; set; } 
    public string Title { get; set; } 
} 

public class HomeController : Controller 
{ 
    public PartialViewResult GetPartial1(string inp) 
    { 
     var model = getModel(inp); 
     return PartialView("_Partial1", model); 
    } 

    //start here, you can name it different in routeconfig 
    public ActionResult IndexStackOverflow100() 
    { 
     return View(); 
    } 

    static PopupViewModel getModel(string inp) 
    { 
     return new PopupViewModel { inp = inp }; 
    } 

    public PartialViewResult save(PopupViewModel popupViewModel) 
    { 
     //you can put a breakpoint here to see popupViewModel data 
     ViewBag.message = "success"; 
     return PartialView("_Partial2"); 
    }

_Parital1.cshtml in geteilt:

@model Testy20161006.Controllers.PopupViewModel 
@*I am using HomeController, you can use ControllerController if you want*@ 
@using (Html.BeginForm("save", "Home")) 
{ 
    <div class="form-group"> 
     @Html.LabelFor(modelval => modelval.Title) 
     @Html.TextBoxFor(modelval => modelval.Title) 
     @Html.TextBoxFor(modelval => modelval.inp) 

     <button type="submit" class="btn btn-primary pull-right"> 
      Save 
     </button> 
    </div> 
}

_Partial2.cshtml in geteilt:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("#modal-container").modal('show'); 

    }) 
</script> 
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog"> 
    <div class="modal-content"> 
     <div class="modal-body"> 
      <p>@ViewBag.message</p> 
     </div> 

     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 

     </div> 
    </div> 
</div> 
<div> 
    @*IndexStackOverflow100, you can use a different page*@ 
    @Html.ActionLink("return", "IndexStackOverflow100") 
</div>

Quelle

2017-07-17 19:37:43 kblau

Popup-Nachricht auf MVC-Formular senden

Antwort

Verwandte Themen