基于按钮单击重新加载页面后显示div

时间:2015-10-27 12:42:36

标签: asp.net-mvc-4

我有两个Div.I尝试在按钮上单击显示第二个DIV,但在表单发布值后,Second Div将立即消失。我想显示第二个DIV,直到我按下第二个DIV上的按钮

此处我的查看代码是:

@using(Html.BeginForm())
   { 
   <div id="demail" name="demail">
            <div class="sign2" style="height:267px;width:562px;margin-left:214px" id="emaildiv">
            @Html.TextBox("EmailId", "", new { @placeholder = "Enter the Email ", id = "txtemail" })<br /><br />
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="submit" value="Sign Up" id="btn" onclick="add()" class="addbutton"/>
        </div>

    </div>
   }

<div id="dverify" name="dname" style="display:none">
    <div class="sign3" style="height:267px;width:562px;margin-left:214px" id="verfieddiv">
        @Html.TextBox("verify", "", new { @placeholder = "Enter the Randam Number", id = "txtverified" })<br /><br/>
        <input type="submit" name="submit" value="Verified" id="vbtn" />
    </div>
</div>


 <script type="text/javascript">
     $("#btn").click(function () {
         debugger
         $("#dverify").show();
         $("#btn").hide();

     });

我的控制器代码是:

public ActionResult Randa(string Emailid, string submit, string submit1, int? Getran) 
        {
            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();
                          }

                     //return PartialView("verify");
                 }



                 return View("Randa","BU");

           }

1 个答案:

答案 0 :(得分:1)

问题在于全页回发,您的视图已重新加载并处于其原始状态,并且您的脚本/客户端更改(在您的案例中显示/隐藏按钮单击时的div)不再存在。基于您的代码的快速修复是:

<强> HTML

    @using (Html.BeginForm())
    {
        string emailDivDisplayStyle = (ViewBag.ShouldShowVerifyDiv == null || (bool)ViewBag.ShouldShowVerifyDiv == false) ? "" : "display:none"; 

<!-- This flag is used to set display style for email div in below line-->
        <div id="demail" name="demail" style="@emailDivDisplayStyle">
            <div class="sign2" style="height:267px;width:562px;margin-left:214px" id="emaildiv">
                @Html.TextBox("EmailId", "", new { @placeholder = "Enter the Email ", id = "txtemail" })<br /><br />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="submit" value="Sign Up" id="btn" onclick="add()" class="addbutton" />
            </div>

        </div>
        string verifyDivDisplayStyle = (ViewBag.ShouldShowVerifyDiv != null && (bool)ViewBag.ShouldShowVerifyDiv == true) ? "" : "display:none"; 

<!-- This flag is used to set display style for verify div in below line-->
        <div id="dverify" name="dname" style="@verifyDivDisplayStyle">
                <div class="sign3" style="height:267px;width:562px;margin-left:214px" id="verfieddiv">
                    @Html.TextBox("verify", "", new { @placeholder = "Enter the Randam Number", id = "txtverified" })<br /><br />
                    <input type="submit" name="submit" value="Verified" id="vbtn" />
                </div>
            </div>

    }

控制器代码

public ActionResult Randa(string Emailid, string submit, int? Getran) //Removed unnecessary parameter submit1
{
    ...
    if (submit == "Sign Up")
    {
         ViewBag.ShouldShowVerifyDiv = true;
    }
    return View("Randa","BU");
}

<input type='submit'更改为<input type='button'并使用jQuery POST将数据异步发布到控制器,并在回调中执行显示/隐藏面板或显示消息等内容回应。

希望这提供一种开始的方式......