如何在确认数据后弹出消息框

时间:2016-12-29 13:50:36

标签: asp.net-mvc-4 asp.net-mvc-5

我想在提交表单后弹出消息框以通知用户成功消息。

我有以下控制器和视图。

 public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(PersonModel person)
        {
            int personId = person.PersonId;
            string name = person.Name;
            string gender = person.Gender;
            string city = person.City;

            return View();
        }
    }

查看 -

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }

        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
            background-color: #fff;
        }

        table th {
            background-color: #B8DBFD;
            color: #333;
            font-weight: bold;
        }

        table th, table td {
            padding: 5px;
            border: 1px solid #ccc;
        }

        table, table table td {
            border: 0px solid #ccc;
        }

        input[type=text], select {
            width: 150px;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th colspan="2" align="center">Person Details</th>
            </tr>
            <tr>
                <td>PersonId: </td>
                <td>
                    @Html.TextBoxFor(m => m.PersonId)
                </td>
            </tr>
            <tr>
                <td>Name: </td>
                <td>
                    @Html.TextBoxFor(m => m.Name)
                </td>
            </tr>
            <tr>
                <td>Gender: </td>
                <td>
                    @Html.DropDownListFor(m => m.Gender, new List<SelectListItem>
                   { new SelectListItem{Text="Male", Value="M"},
                     new SelectListItem{Text="Female", Value="F"}}, "Please select")
                </td>
            </tr>
            <tr>
                <td>City: </td>
                <td>
                    @Html.TextBoxFor(m => m.City)
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit" /></td>
            </tr>
        </table>
    }
</body>
</html>

1 个答案:

答案 0 :(得分:0)

您只需为此使用ViewBag和Javascript。

在您的控制器中:

public ActionResult Index()
{
    ViewBag.SuccessMessage = "";
    return View();
}

[HttpPost]
public ActionResult Index(PersonModel person)
{
    int personId = person.PersonId;
    string name = person.Name;
    string gender = person.Gender;
    string city = person.City;

    ViewBag.SuccessMessage = "Data has been Inserted!"

    return View();
}

在身体末端添加脚本,

<script>
    $(document).ready(function() {
        if(@ViewBag.SuccessMessage != ""){
            alert(@ViewBag.SuccessMessage);
        }
    });
</script>