在 mVC4 中更改按钮文本而不刷新页面
change the button text without page refreshing in mVC4
我正在用 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 />
<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 />
<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();
}
谁能帮帮我?
提前致谢。
首先你需要使用Ajax.BeginForm
Using Ajax.BeginForm with ASP.NET MVC 3 Razor
并且在 success
功能上,您可以为明文 EmailId 和一个提交按钮编写以下代码。
$("#EmailId").val("");
$("#btn").val("Verify");
如果您要执行上述操作,则不需要两份表格。
每当我们想在不刷新的情况下更新网页中的值时,我们必须使用Ajax。
我们必须执行以下操作才能使您的页面正常运行。
- 从您的视图中删除 BeginForm 块,因为当我们使用 BeginForm 时,它会向控制器发送请求并刷新页面。
- 使用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");
}
});
});
我正在用 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 />
<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 />
<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();
}
谁能帮帮我? 提前致谢。
首先你需要使用Ajax.BeginForm
Using Ajax.BeginForm with ASP.NET MVC 3 Razor
并且在 success
功能上,您可以为明文 EmailId 和一个提交按钮编写以下代码。
$("#EmailId").val("");
$("#btn").val("Verify");
如果您要执行上述操作,则不需要两份表格。
每当我们想在不刷新的情况下更新网页中的值时,我们必须使用Ajax。
我们必须执行以下操作才能使您的页面正常运行。
- 从您的视图中删除 BeginForm 块,因为当我们使用 BeginForm 时,它会向控制器发送请求并刷新页面。
- 使用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");
}
});
});