更改按鈕文本沒有頁面刷新mVC4

Question

我正在做我的應用程序在MVC。在我看來，我有一個名爲EmailId的文本框和一個Submit按鈕。如果我輸入電子郵件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.BeginForm

Using Ajax.BeginForm with ASP.NET MVC 3 Razor

而且在success功能，你可以寫明文EMAILID下面的代碼，和一個提交按鈕。

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

並且如果您要這樣做，則不需要兩種形式。

Answer 2

無論何時我們想更新網頁中的值而不刷新，我們都必須使用Ajax。

我們必須做以下事情才能使您的網頁正常工作。

1. 從您的視圖中刪除BeginForm塊，因爲當我們使用BeginForm時，它將向控制器發送請求並刷新頁面。
2. 使用Ajax將信息傳遞給控制器​​並更新頁面而不刷新它。

正如你在控制器兩名內線動作，所以保持二者的div「RND」和「電子郵件」

下面是使用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"); 
    } 
    }); 
});