MVC表单提交上的弹出消息答案

【问题标题】：Popup message on MVC form submitMVC表单提交上的弹出消息
【发布时间】：2017-12-21 16:17:28
【问题描述】：

我在 MVC 中有一个名为 Index 的视图，它在 focusout 事件上有一个输入文本，它呈现一个具有表单的局部视图。从部分视图提交表单后，我想显示成功或失败的弹出消息。

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

我的控制器正在关注

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

我的部分视图如下

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

我的部分视图如下

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

问题是模态不加载仅显示部分视图。当我使用动作链接时，模态显示完美，但我无法通过动作链接传递剃刀形式。我的目标是当表单提交时它会显示一条没有重定向的警报消息。我该怎么做？

【问题讨论】：

标签： javascript jquery asp.net-mvc forms bootstrap-modal

【解决方案1】：

请你试试这个。它对我有用。帖子很长，您可以拿出解决问题所需的内容。

查看：

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

【讨论】：