Question

我在MVC中有一个名为Index的视图，它在聚焦事件上有一个输入文本，它呈现一个具有形式的局部视图。从局部视图提交表格后，我想显示成功或失败的弹出按摩。

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

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

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

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

Answer 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 in shared：

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

MVC表单上的弹出消息提交

1 个答案: