MVC表單提交的彈出消息

我在MVC中有一個名爲Index的視圖，它具有焦點輸出事件上的輸入文本，它呈現具有表單的局部視圖。從部分視圖提交表單後，我想顯示成功或失敗的彈出式按摩。MVC表單提交的彈出消息

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

我的控制器是繼以下

**_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>

問題是模態

**_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> 
    }

我partial2觀點我partial1視圖以下

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

是不是隻加載局部視圖顯示G。當我使用動作鏈接模式完美展現，但我不能通過行動鏈接傳遞剃刀形式。我的目標是當表單提交時會顯示一條不重定向的警報消息。我怎樣才能做到這一點？

來源

2017-07-17 MAT14

你可以試試這個。它爲我工作。該帖子很長，所以你可以拿出你需要解決你的問題。

檢視：

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

控制器/型號：

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在共享：

@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在共享：

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

來源

2017-07-17 19:37:43 kblau

MVC表單提交的彈出消息

回答

相關問題