在 mVC4 中更改按钮文本而不刷新页面

Question

我在 MVC 中做我的应用程序。在我看来，我有一个名为 EmailId 的文本框和一个提交按钮。如果我输入电子邮件 id 并提交按钮，按钮的标签要更改为验证，并且应该清除文本框而不刷新页面。

我的浏览页面是

    <div class="sign" id="email">
        @using (Html.BeginForm("Randa", "BU", FormMethod.Post))
        {
            <div class="sign1">

                <div class="sign2" style="height:267px;width:562px;margin-left:214px" id="cdiv">
                                     @Html.TextBox("EmailId","", new {@placeholder ="Enter the Email id",id="txtemail "})<br /><br />

                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="submit" value="Sign Up" id="btn" onclick="addbutton()" class="addbutton"/>


                </div>
            </div>

        }
    </div>
    <div class="drnd" id="rnd" style="display:none">
        @using (Html.BeginForm("Ra_verify", "BU", FormMethod.Post))
        {
            <div class="sign1">

                <div class="sign2" style="height:267px;width:562px;margin-left:214px" id="cdiv">
                    @Html.TextBox("Getran", "", new { @placeholder = "Enter the Randam", id = "txtrnd" })<br /><br />

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="submit" value="Verify" id="btnrnd" class="addbutton" />


                </div>
            </div>

        }
    </div>
    }
<script type="text/javascript">
        var btxt = "Verified";
        document.getElementById("#btn").innerHTML = btxt;
    </script>
    <script type="text/javascript">
        function addbutton()
        {

             ($("#email").hide())

                $("#rnd").show();


        }
    </script>

我的控制器代码是

 public ActionResult Randa()
        {
            return View();
        }
        [HttpPost]

        // send the randam No to the Entered mail id . Store the mail id and randam no into tbl_bussiness table;
        public ActionResult Randa(string EmailId, string submit) 
        {
            string userId = System.Configuration.ConfigurationManager.AppSettings["UserTypeId"];
            int typeid = Convert.ToInt32(userId);
            if (ModelState.IsValid)
            {
                   if (submit != null && EmailId != null)
                    {
                        EmailManager.SendConfirmationEmail(EmailId);
                        tbl_BusinessUser b = new tbl_BusinessUser();
                        b.EmailId = EmailId;
                        b.RandomNumber = (int)Session["rnd"];
                        b.UserTypeId = typeid;
                        b.CreateDTTM = System.DateTime.Now;
                        db.tbl_BusinessUser.Add(b);
                        db.SaveChanges();


                        ViewBag.message = "Please check ur Mail for randam no.Enter random in textbox ";
                    }
                    else
                    {
                        ModelState.AddModelError("", "Error");

                }
            }


                return View();

            }
        public ActionResult Ra_verify()
        {
            return View();
        }
        [HttpPost]
        // check the random no with table random no ,if match redirect to registration create page
        public ActionResult Ra_verify(int EmailId, string submit)
        {
            if (submit != null)
            {
               // int c = Convert.ToInt32(EmailId);
                tbl_BusinessUser b = new tbl_BusinessUser();
                var tbra = db.tbl_BusinessUser.Where(x => x.RandomNumber == EmailId).FirstOrDefault();
                //var tbram = Convert.ToInt32(tbra);


                    return RedirectToAction("Create", "BU");

            }
            return View();
        }

谁能帮帮我？ 提前致谢。

Answer 1

每当我们想要更新网页中的值而不刷新时，我们都必须使用 Ajax。

我们必须做以下事情才能使您的页面正常工作。

1. 从您的视图中删除 BeginForm 块，因为当我们使用 BeginForm 时，它会向控制器发送请求并刷新页面。
2. 使用 Ajax 将信息传递给控制器​​并在不刷新页面的情况下更新页面。

由于您在控制器中有两个 POST 操作，因此请保留 div“rnd”和“email”

这是带有 Ajax 选项的示例脚本块，可根据您的要求更新页面，

  $('#btn').click(function () {

  var urlinfo = '/Home/Randa';
  var textboxValue = $('#txtemail').val();

  $.ajax({
    type: "POST",
    data: { value: textboxValue },
    url: urlinfo,
    success: function (result) {          
      $('#email').hide();
      $('#rnd').show();
    },
    error: function () {
      alert("failed");
    }
  });
});

Answer 2

首先你需要使用Ajax.BeginForm

Using Ajax.BeginForm with ASP.NET MVC 3 Razor

在success 函数上，您可以编写下面的代码用于明文EmailId，以及一个提交按钮。

$("#EmailId").val("");
$("#btn").val("Verify");

如果您要执行上述操作，则不需要两个表格。