Click here to Skip to main content
15,889,909 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
What I need

I need to stop the page refreshing while user click submit button and it doesn't redirect to another page in MVC.

Still what I done
log in page with refreshing using jquery.if click a submit button on the page is refreshing and it display the welcome message with username and login button changed to logout link. but I want the same functionality without refreshing the page

What I have tried:

Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index(LoginMVC u) {

if (ModelState.IsValid) // this is check validity
{
using(LoginAndSignUpEntities dc = new LoginAndSignUpEntities()) {
var v = dc.tbl_Detailstbl.Where(a => a.Email_Id.Equals(u.EmailId) && a.Password.Equals(u.Password)).FirstOrDefault();
if (v != null) {
Session["LogedUserID"] = v.Email_Id.ToString();
Session["LogedUserFullname"] = v.Name.ToString();
}
}
}
return Json(u, JsonRequestBehavior.AllowGet);
}
View:
<button id="model" style="border:none;">login</button>


@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "ID" })) { @Html.AntiForgeryToken() // this is for prevent CSRF attack @Html.ValidationSummary(true)

Login

@Html.LabelFor(m => m.EmailId)



@Html.TextBoxFor(m => m.EmailId, new { @id = "txtuserid" }) @Html.ValidationMessageFor(m => m.EmailId)


@Html.LabelFor(m => m.Password)


@Html.PasswordFor(m => m.Password, new { @id = "txtpassword" }) @Html.ValidationMessageFor(m => m.Password)


<input type="submit" value="Submit" id="btnlogin" />



}


Script:
@section scripts{
<script type="text/javascript">
$(document).ready(function() {
debugger;
$("#btnlogin").submit(function(e) {
e.preventDefault();
var email = $('#txtuserid').val();
var password = $('#txtpassword').val();
$.ajax({
url: '@Url.Action("Index", "Home")',
type: 'POST',
data: $(this).serialize(),
datatype: "json",
success: function() {
alert("success");
},
error: function() {
alert("error123");
}
});

});
});
</script>


Popup Script:
$(function() {
$("#login_page").dialog({
autoOpen: false,
width: 300,
height: 100,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
});
$("#model").click(function() {
$("#login_page").dialog("open");
});
});
please give me a solution for this issue....
Posted
Updated 5-Feb-16 19:15pm
v2

1 solution

Do ajax call and return partial view from action method and render the partial view at client side.

For reference check following links :
Ajax Call in Mvc4[^]

Render Partial View[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900