MVCフォームのポップアップメッセージsubmit

私は、MVCでIndexという名前のビューを持っており、フォーカスアウトイベントの入力テキストを持ち、フォームを持つ部分ビューをレンダリングします。部分ビューからフォームを送信した後、私は成功のポップアップマッサージを表示するか、失敗します。私のコントローラがMVCフォームのポップアップメッセージsubmit

**_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ビュー次

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

私partial1ビューを以下れる

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

次のような問題は、モーダルは部分的にしかビューをロードしていないですショーイン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フォームのポップアップメッセージsubmit

答えて

関連する問題