I have a MVC Login page where I authenticate the user with an AJAX post method.
I want to redirect the user from Home/Index to another controller method Home/Main once the username and password are authenticated.
Here's my home controller:
Function Index() As ActionResult
Return View()
End Function
Function Main() As ActionResult
Return View()
End Function
Here is my ajax post method:
<script type="text/javascript">
$(document).ready(function () {
$('#BtnLogin').click(function () {
var userInfo = {
UserName: $('#txtusername').val(),
Password: $('#TxtPassword').val()
};
$.ajax({
url: '#Url.Content("~/api/Users/CheckUser")',
type: 'POST',
data: JSON.stringify(userInfo),
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (responseData) {
for (var i = 0; i < responseData.length; i++) {
if (responseData[i].isErrorBool == '1') {
document.getElementById("LblErrors").innerHTML = responseData[i].isErrorMessage;
}
else {
//redirect
}
}
}
});
});
});
</script>
And my Web API:
<HttpPost>
Public Function CheckUser(LGIN As LoginModel) As List(Of VerifyReturnLogin)
Dim ReturnJson = Nothing
Dim sb As New StringBuilder()
Dim sw As New StringWriter(sb)
Try
Using jsonWriter As JsonWriter = New JsonTextWriter(sw)
jsonWriter.WriteStartArray()
jsonWriter.WriteStartObject()
Dim c As List(Of UserProfile) = userRepository.CheckUser(LGIN.UserName.Trim, LGIN.Password.Trim)
If c.Count = 0 Or c Is Nothing Then
jsonWriter.WritePropertyName("isErrorBool")
jsonWriter.WriteValue("1")
jsonWriter.WritePropertyName("isErrorMessage")
jsonWriter.WriteValue("Wrong Username or Password.")
jsonWriter.WriteEndObject()
jsonWriter.WriteEndArray()
ReturnJson = JsonConvert.DeserializeObject(Of List(Of VerifyReturnLogin))(sb.ToString)
Return ReturnJson
Else
'Redirect to Home/Main
End If
End Using
Catch ex As Exception
End Try
End Function
Where is the best place to redirect? Client or Server side?
And After login, is it wise to use Sessions in MVC like they are used in ASP.net, to ensure that the user is authenticated to go to Home/Main on every refresh?
Any help would be appreciated.
You should use in javascript window.location = "http://www.yoururl.com"; when you have
//redirect
Related
I want to display update content after posting data by jquery ajax. I tried it but not display data.
here is my code...
jquery ajax
$(document).ready(function () {
$('#paid').click(function () {
var pid = $('#pid').val();
var amt = $('#amt').val();
var payType = $('#payType').val();
$.ajax({
type: "POST",
url: "/Reception/Registration/AddPaidBalance",
data: { PatientId: pid, PaidAmt: amt, PaymentType: payType },
success: function (data) {
}
});
});
})
controller
[HttpPost]
public async Task<IActionResult> AddPaidBalance(PatientBilling patientBilling)
{
if (ModelState.IsValid)
{
_db.PatientBilling.Add(patientBilling);
await _db.SaveChangesAsync();
//return RedirectToAction("Details", "Registration", new { area = "Reception", id = patientBilling.PatientId });
//return RedirectToAction("Details", "Registration", new { patientBilling.PatientId});
}
return View();
}
help me out from this issue.
Based on your code, you make ajax request to post data of PatientBilling to action method. To display new-added PatientBilling information on Details page after the request completes successfully, you can do redirection in success callback function, like below.
<script>
$(document).ready(function () {
$('#paid').click(function () {
var pid = 1;//$('#pid').val();
var amt = "amt";//$('#amt').val();
var payType = "type1";//$('#payType').val();
$.ajax({
type: "POST",
url: "/Reception/Registration/AddPaidBalance",
data: { PatientId: pid, PaidAmt: amt, PaymentType: payType },
success: function (data) {
window.location.href = "#Url.Action("Details", "Registration", new { Area = "Reception"})" + "?patientId=" + pid;
}
});
});
})
</script>
Details action
public IActionResult Details(int patientId)
{
// code logic here
// get details of PatientBilling based on received patientId
// ...
return View(model);
}
I have a form with some fields and file upload, rendering as a partial view using ajax in asp.net MVC. when submitting the form, I want to pass all the data to the controller. But if I use $("form").serialize(), it is not passing the selected file to the controller. So I am using formData() to pass the data to the controller. Till this point, everything works fine.
But after adding captcha using CaptchaMvc, it not reaching the controller. Even if I enter valid captcha, it is invalid in the controller.
This is how I send data to the controller using the ajax and formData
var data = new FormData();
var vidFile = null;
if ($("#FileUpload")[0].files.length > 0)
vidFile = $("#FileUpload")[0].files[0];
data.append("detail", $("#detail").val());
data.append("name", $("#name").val());
data.append("FileUpload", vidFile);
$.ajax({
url: "/home/submitData",
type: "POST",
contentType: false,
processData:false,
data: data,
success: function (response) {
if (response.success == true) {
} else {
}
}
});
Is there any way to pass the captcha as well to the controller?
Why can't you validate using different controller function, as follows:
At the time of submission, validate the captcha first, and depending on the result, call another controller function to submit data or show the error.
var submitData = function(){
var data = new FormData();
var vidFile = null;
if ($("#FileUpload")[0].files.length > 0)
vidFile = $("#FileUpload")[0].files[0];
data.append("detail", $("#detail").val());
data.append("name", $("#name").val());
data.append("FileUpload", vidFile);
$.ajax({
url: "/home/submitData",
type: "POST",
contentType: false,
processData:false,
data: data,
success: function (response) {
if (response.success == true) {
//Success
} else {
//Submission failed
}
}
});
}
var validateCaptcha = function(){
$.ajax({
url: "/home/validateCaptcha",
type: "POST",
data: $("form").serialize(),
success: function (response) {
if (response.success == true) {
submitData();
} else {
alert("Invalid Captcha entry");
}
}
});
}
$("form").submit(function(e){
validateCaptcha();
});
I have this ajax post method in my code that returns undefined. I think its because I have not passed in any data, any help will be appreciated.
I have tried passing the url string using the #Url.Action Helper and passing data in as a parameter in the success parameter in the ajax method.
//jquery ajax post method
function SaveEvent(data) {
$.ajax({
type: "POST",
url: '#Url.Action("Bookings/SaveBooking")',
data: data,
success: function (data) {
if (data.status) {
//Refresh the calender
FetchEventAndRenderCalendar();
$('#myModalSave').modal('hide');
}
},
error: function (error) {
alert('Failed' + error.val );
}
})
}
//controller action
[HttpPost]
public JsonResult SaveBooking(Booking b)
{
var status = false;
using (ApplicationDbContext db = new ApplicationDbContext())
{
if (b.ID > 0)
{
//update the event
var v = db.Bookings.Where(a => a.ID == a.ID);
if (v != null)
{
v.SingleOrDefault().Subject = b.Subject;
v.SingleOrDefault().StartDate = b.StartDate;
v.SingleOrDefault().EndDate = b.EndDate;
v.SingleOrDefault().Description = b.Description;
v.SingleOrDefault().IsFullDay = b.IsFullDay;
v.SingleOrDefault().ThemeColor = b.ThemeColor;
}
else
{
db.Bookings.Add(b);
}
db.SaveChanges();
status = true;
}
}
return new JsonResult { Data = new { status } };
}
Before the ajax call, you should collect the data in object like,
var requestData= {
ModelField1: 'pass the value here',
ModelField2: 'pass the value here')
};
Please note, I have only added two fields but as per your class declaration, you can include all your fields.
it should be like :
function SaveEvent(data) {
$.ajax({
type: "POST",
url: '#Url.Action(Bookings,SaveBooking)',
data: JSON.stringify(requestData),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (data) {
if (data.status) {
//Refresh the calender
FetchEventAndRenderCalendar();
$('#myModalSave').modal('hide');
}
},
error: function (error) {
alert('Failed' + error.val );
}
})
}
Try adding contentType:'Application/json', to your ajax and simply have:
return Json(status);
In your controller instead of JsonResult. As well as this, You will need to pass the data in the ajax code as a stringified Json such as:
data:JSON.stringify(data),
Also, is there nay reason in particular why it's a JsonResult method?
I developed a WebApi and Client page for testing.
Here is my controller
public class CarDetailsController : ApiController
{
// GET api/cardetails
[HttpGet]
public IEnumerable<CarsStock > GetAllcarDetails()
{
CarsStock ST = new CarsStock();
CarsStock ST1 = new CarsStock();
List<CarsStock> li = new List<CarsStock>();
ST.CarName = "Maruti Waganor";
ST.CarPrice = "4 Lakh";
ST.CarModel = "VXI";
ST.CarColor = "Brown";
li.Add(ST);
ST1.CarName = "Maruti Swift";
ST1.CarPrice = "5 Lakh";
ST1.CarModel = "VXI";
ST1.CarColor = "RED";
li.Add(ST1);
return li;
}
}
and here is my ajax call
<button onclick="AllcarDetails()"></button>
<script type="text/javascript">
function AllcarDetails()
{
$.ajax({
type: "GET",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
contentType: 'application/json',
url: "http://localhost:1822/api/cardetails", //URI
success: function (data) {
debugger;
var datadatavalue = data;
},
error: function (xhr) {
alert(xhr.responseText);
}
});
}
</script>
It gives 405 Method Not Allowed error all the time.I tried by googling but cannot find the exact situation.Can somebody help me to solve this?
Got result correctly while calling from browser 'http://localhost:1822/api/cardetails'
Did you check so that HTTP Activation is activated where you run this code?
I don't understand once button clicked
How to handle ajax call on the server side so that my DataAnnotation work
and I get success or error message.
<script src="../../../../Content/Scripts/jquery-1.4.4-vsdoc.js" type="text/javascript"></script
<script type="text/javascript">
$(function ()
{
$("#createButton").click(function ()
{
var profile = {
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val(),
Email: $("#Email").val()
};
$.ajax({
url: "/Profile/Create",
type: "Post",
data: JSON.stringyfy(profile),
dataType: "json",
contentType: "Application/json; charset=utf-8",
success: function () {
$("#message").html("Profile Saved.");
},
error: function () {
$("#message").html("Error occured");
}
});
return false;
});
});
</script>
//Server side
public ActionResult Create(string confirmButton, CreateViewModel userVm)
{
if (confirmButton != "Create Profile") return RedirectToAction("Index");
if (!ModelState.IsValid)
return View("Create", userVm);
User user = new User();
Mapper.Map(userVm, user);
_repository.Create(user);
return RedirectToAction("Details", new { id = user.UserId });
}
If I remember correctly (it's been a while since I played with jquery), the success and error are indicative of the return value of the actual HTTP request itself. For example, if you hit a 404, you'd get an error message.
Regardless of whether or not a profile was created successfully through your page logic, if the request itself was processed, then the success message will be hit - you need to interpret the return value yourself at that point.
Try returning a JsorResult in place of redirecting to a view, then client side, parse the JsonResult and act accordingly.
[HttpPost]
public JsonResult DeleteDoc(int Id, int DocCode, SomeObject Model)
{
try
{
// Check annotations stuffs
if (!Model.IsValid) {
var jsonDataM = new { ExitCode= -100, message = "Invalid Model" };
return Json(jsonDataM, JsonRequestBehavior.DenyGet);
}
// My logic in here
var jsonData = new { ExitCode= 0, message = "Everything's ok" };
return Json(jsonData, JsonRequestBehavior.DenyGet);
}
catch (Exception e)
{
var jsonData2 = new { ExitCode= -1, message = "Everything's Ko" + e.Message };
return Json(jsonDat2a, JsonRequestBehavior.DenyGet);
}
}
in the OnSuccess callback you can refer to this with:
<script type="text/javascript">
function MyAjaxCallBack(context) {
var code = context.ExitCode;
if (code != 0) {
alert (context.message);
}
}
</script>
Please note that this code is simplified. When managing the IsValid on Model, I usually iterate del ModelState in order to build up a message.