用ajax mvc中的表单替换json结果

Question

我的看法和这个一样

  <div class="col-sm-3 ">
     @{Html.RenderAction("Subscribe", "Home");}
  </div>

另一方面，我的行动是

public ActionResult Subscribe()
    {
        return PartialView("_Subscribe");
    }

    [HttpPost]
    public ActionResult Subscribe(Subscribe subscribe)
    {
        if (ModelState.IsValid)
        {
            subscribe.Active = false;
            subscribe.IpAddress = Request.UserHostName;
            Guid gui = Guid.NewGuid();
            subscribe.ActiveCode = gui;
            subscribe.SubmitDate = DateTime.Now;
            //_db.SaveChanges();
            return Json("subscribe is complate, please check your email", JsonRequestBehavior.AllowGet);

        }
        return Json("error", JsonRequestBehavior.AllowGet);

    }

在局部视图中是

@model Jar.Models.Subscribe
            <div Id="subForm" class="single-widget">
                @using (Html.BeginForm()) {
                @Html.TextBoxFor(x => x.Email, new { htmlAttributes = new { 
                @class = "form-control", @placeholder = "email" } })

            <button type = "submit" id = "btn_Subscribe" class="btn btn-default"><i class="fa fa-arrow-circle-o-left"></i></button>
}

并在 ajax 中

$(document).ready(function() {

$("#btn_Subscribe").click(function() {

    $.ajax({
        type: 'POST',
        url: '@Url.Action("Subscribe")',
        dataType: 'json',
        data: { Email: $("#Email").val() },
        success: function(data) {
            alert(data);
        }
    });
});

});

好的，当点击订阅按钮时，我希望将电子邮件发送到数据库并返回 json 并将 json 替换为所有订阅表单（文本框和按钮）， 现在当我点击订阅时，电子邮件已注册，但返回新页面并显示简单的文本“订阅已完成，请检查您的电子邮件” 如何更改此代码以用 json 文本替换订阅表单？

Answer 1

首先，我建议将您的事件挂钩到 form 元素的 submit 方法。

其次你应该将你的响应类型更改为一个对象，这样它可以更有效地编码为 JSON，并且响应更一致：

[HttpPost]
public ActionResult Subscribe(Subscribe subscribe)
{
    if (ModelState.IsValid)
    {
        // your code...
        return Json(new { Message = "subscribe is complate, please check your email" }, JsonRequestBehavior.AllowGet);
    }
    return Json(new { Message = "error" }, JsonRequestBehavior.AllowGet);
}

最后，为了实现您的目标，您可以使用text() 方法查看包含表单的div 的内容，它将替换内容。试试这个：

$("#subForm form").on('submit', function(e) {
  e.preventDefault();
  $.ajax({
    type: 'POST',
    url: '@Url.Action("Subscribe")',
    dataType: 'json',
    data: {  
      Email: $("#Email").val() 
    },
    success: function(data) {
      $('#subForm').text(data.Message); // note the use of text() here
    }
  });
});