Question

首先，如果在其他地方已经介绍过，我会道歉，基本上我在我的网站上有一个帮助页面，包括一个FAQ页面（其内容，从Web服务提供），还有一个按钮它显示部分视图，此部分视图获取帮助请求信息，并根据您的＆＃34; bog标准＆＃34;将其发送到服务器。表格提交。

但是，我不想离开页面，而是在信息保存后更愿意利用AJAX显示成功消息。

我已经尝试从Controller返回JSON，并通过AJAX检索它以显示在页面上但是，这会替换我的整个页面上只有JSON！

如果可能的话，我真的很感激用这个推动正确的方向。

这是我的控制器行动

  [AllowAnonymous]
        public ActionResult Index()
        {
        FAQModel.Questions= Service.PopulateFAQQuestions();
            FAQModel.Answers = Service.PopulateFAQAnswers();


            return View("Index",FAQModel);

        }

        [AllowAnonymous]
        [HttpPost]
        public async Task <ActionResult> SendHelpRequest(RequestViewModel model)
        {
            model.RequestDate = DateTime.Now;
            await Service.SendHelpRequestAsync(model.Name, model.Details, model.RequestDate, model.Email, model.ContactNumber);

            return RedirectToAction("Index");
        }

和我的部分视图

@model MyProject.Models.RequestViewModel

<script>
    function Success() {
        var Success = document.getElementById("SuccessText");

       Success.innerHTML = "Request Submitted";
    }

    function Failure() {
        var Failure = document.getElementById("SuccessText");

        Failure.innerHTML = "Request Failed";
    }
</script>

@using (Ajax.BeginForm("SendHelpRequest", "Help", null, new AjaxOptions
    {
        HttpMethod = "POST",
        OnSuccess = "Success",
        OnFailure = "Failure",
        UpdateTargetId = "SuccessText"
    }))

    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="modal-content">
            <div class="modal-header" style="border-bottom: none !important;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">Support Request</h3>
            </div>

            <div class="container-fluid">
                <div class="form-group">
                    @Html.LabelFor(m => m.Name, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10" style="border-top: none !important;">
                        @Html.TextBoxFor(m => m.Name, new { @class = "form-control", @id = "txtEmail", @placeholder = "E.G: Fred Flintstone" })
                        @Html.ValidationMessageFor(m => m.Name, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @Html.TextBoxFor(m => m.Email, new { @class = "form-control", @placeholder = "E.G: example@example.com" })
                        @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(m => m.Details, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @Html.TextAreaFor(m => m.Details, new { @class = "form-control", @rows = "10", @style = "max-width:100%; max-height:100%; resize:none", @placeholder = "Please Enter Details (max 500 Characters)", @maxlength = "500" })
                        @Html.ValidationMessageFor(m => m.Details, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(m => m.ContactNumber, new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @Html.TextBoxFor(m => m.ContactNumber, new { @class = "form-control", @rows = "10", @placeholder = "E.G:00000000000", @maxlength = "15" })
                        @Html.ValidationMessageFor(m => m.ContactNumber, "", new { @class = "text-danger" })

                    </div>
                </div>

                <div class="col-md-12">
                    <div class="modal-footer">
                        <div align="left" class="col-md-6">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                        <div align="right" class="col-md-6">
                            <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    }

<div id =" SuccessText"></div>

Answer 1

使用Insertmode＆＃34;替换＆＃34;在您的Ajax.BeginForm（）上然后返回一个继承成功消息的部分视图。

这将取代＆＃34; SuccessText＆＃34;因为TargetId设置为this。确保你已经添加了＆＃34; jquery.unobtrusive-ajax.min.js＆＃34; JS库，否则它将无法正常工作！

Answer 2

我实际上自己设法解决了这个问题，发生的事情是我的代码实际上工作正常;但是我没有对我的AJAX调用结果做任何事情！

@using (Ajax.BeginForm("SendHelpRequest", "Help", null, new AjaxOptions
    {
        HttpMethod = "POST",
        OnSuccess = "Success",
        OnFailure = "Failure",
        UpdateTargetId = "SuccessText",
        InsertionMode = InsertionMode.Replace

    }))

我的成功方法

function Success(result) {
      alert( result);


    }

如何在成功提交表单时更新我的部分视图？

2 个答案:

如何在成功提交表单时更新我的​​部分视图？

2 个答案:

如何在成功提交表单时更新我的部分视图？