javascript - 如何在提交表单后打开对话框以显示发布成功 - asp.net MVC

Question

我正在开发一个 asp.net MVC 项目。我想在表单发布后向用户显示一个对话框，以便用户了解它是否成功，并且如果用户想关闭该对话框也是可能的。

我搜索了很多并阅读了一些可以返回部分 View 的内容，但我不确定部分 View 是否是我在这种情况下需要的

我的问题是，是否可以使用带有 .dialog() 的 java 脚本来完成此操作，或者如果我应该使用部分 View ，那么请给我一些解释它是如何工作的。我需要在用户单击提交按钮后显示类似的内容 http://jsfiddle.net/db5SX/

这是我的 Controller :

public ActionResult Index()
    {
        ViewBag.ResultMessage = TempData["ResultMessage"];
        return View();
    }
 public ActionResult Create()
    {


        return View();
    }
  [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Id,Name,Email,Phone,Message,Date")] Contact_US contact_US)
    {
        if (ModelState.IsValid)
        {
            db.Contact_US.Add(contact_US);
            db.SaveChanges();
            TempData["ResultMessage"] = "POSTED SUCESSFULLY...!  We WILL CONTACT YOU SOON.";
            return RedirectToAction("Index");
        }


        return View(contact_US);
    }

如果需要的话，这是我的观点:

    <div class="form-group col-md-8">


        <h3 class="txtformat padbot50px">Get in touch with us</h3>

        <div class="text-danger message ">
            @ViewBag.ResultMessage
        </div>




        @using (Html.BeginForm("Create", "Contact_Us", FormMethod.Post, new { @id = "contactusform" }))
        {
            @Html.AntiForgeryToken()

            <div class="form-horizontal">



                <div class="form-group">
                    @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
                    <div class="col-md-12">
                        @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
                    <div class="col-md-12">
                        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
                    <div class="col-md-12">
                        @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group hidden">
                    @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(model => model.Message, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
                    <div class="col-md-12 contactusmsg">
                        @Html.TextAreaFor(model => model.Message, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Message, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group contactuspostbtn">
                    <div class="col-md-12">
                        <input id="postcontactusmessage" type="submit" value="Send" class="btn btn-default" data-toggle="modal" data-target="#myModal" />
                    </div>

                </div>
            </div>
        }





    </div>






</div>

如果需要我的布局信息:

<script src="~/Scripts/jquery-3.1.0.min.js"></script>
 <link href="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/tinymce/tinymce.min.js"></script>

Answer 1

实现此目的的一个好方法是将其抽象到基本 Controller 中，并在 _layouts.cshtml 文件中显示消息，例如:

创建一个将由所有 Controller 继承的基本 Controller

public class BaseController : Controller
    {
        public string SucccessMessage
        {
            get
            {
                return TempData["SuccessMessage"] as string;
            }
            set
            {
                TempData["SuccessMessage"] = value;
            }
        }

        public string ErrorMessage
        {
            get
            {
                return TempData["ErrorMessage"] as string;
            }
            set
            {
                TempData["ErrorMessage"] = value;
            }
        }
    }

在_Layouts.cshtml中，

 <div class="container body-content" id="bodyContainer">
        <div class="spacer"></div>
        @if (@TempData["SuccessMessage"] != null)
            {
            <div class="alert alert-success alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                @TempData["SuccessMessage"]
            </div>
        }
        else if (@TempData["ErrorMessage"] != null)
        {
            <div class="alert alert-danger alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                @TempData["ErrorMessage"]
            </div>
        }

        <div class="spacer"></div>
        @RenderBody()
        <hr id="hr" />
        <footer>
            <p>&copy; @DateTime.Now.Year - Your APp </p>
        </footer>
    </div>

现在，您需要在 Controller 内执行的操作是:

public class MyController:BaseController
{
 [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Id,Name,Email,Phone,Message,Date")] Contact_US contact_US)
    {
        if (ModelState.IsValid)
        {
            db.Contact_US.Add(contact_US);
            db.SaveChanges();
            SucccessMessage = "POSTED SUCESSFULLY...!  We WILL CONTACT YOU SOON.";
            return RedirectToAction("Index");
        }


        return View(contact_US);
    }
}