Popup message on MVC form submit

Question

i have view in MVC called Index which have a input text on focusout event it render a partial view which has form. After submit form from partial view i want to show a popup massage of success or failed.

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

My Controller is following

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

my partial1 view following

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

my partial2 view following

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

the problem is modal is not loading only partial view showing. when i use action link the modal showing perfectly but i can not pass razor form via action link. my target is when form submit it will show a alert message without redirection. how can i do that ?

score 0 · Answer 1 · answered Jul 17 '17 at 19:37

Can you please try this. It worked for me. The post is long, so you can take out what you need to solve your issue.

View:

@{
    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/Model:

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 in shared:

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

Popup message on MVC form submit

1 Answers1