Knockoutjs couldn't go to RedirectToAction view - asp.net-mvc

Question

I have a simple login controller:
public ActionResult Login()
{
return View();
}
[HttpPost]
public ActionResult Login(string userName, string passWord)
{
if (ModelState.IsValid)
{
var employee =
db.Employees.FirstOrDefault(x => x.EmployeeNo == userName && x.Password == passWord && x.StatId == 1);
if (employee != null)
{
return RedirectToAction("Index");
}
}
return View();
}
public ActionResult Index()
{
return View(db.Employees.ToList());
}
This is my view which is bound to a knockoutjs file:
#model SimpleLogin.Models.Employee
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Login</h2>
<span>User</span> <span data-bind="text: userName"></span> <br/>
<span>Password</span> <span data-bind="text: passWord"></span>
<div>
<table>
<tr>
<td>
<input type="text" name="txtUserName" placeholder="User Name" data-bind="value: userName" /></td>
</tr>
<tr>
<td>
<input type="password" name="txtPassword" placeholder="Password" data-bind="value: passWord"/></td>
</tr>
</table>
<button data-bind="click: logUser">Login</button>
</div>
#section Scripts
{
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/knockout")
#Scripts.Render("~/Knocks/LoginVm.js")
}
this is my knockout LoginVm.js
$(function() {
ko.applyBindings(LoginVm);
});
var LoginVm = {
userName: ko.observable(''),
passWord: ko.observable(''),
logUser: function() {
var self = this;
$.ajax({
url: '/Company/Login',
type: 'post',
dataType: 'json',
data: ko.toJSON(self),
contentType: 'application/json',
success: function(data) {
//window.location.href = '/Company/Index'; //I tried putting an alert here but doesn't work. why?
}
});
}
};
When I ran the app, I put a break point in the "if (ModelState.IsValid)" of the controller. It worked fine. It even executed the "return RedirectToAction("Index")" but the problem is, the page stays in the Login View and never loaded the Index view. Why? What did I do wrong?
I also put this:
bundles.Add(new ScriptBundle("~/bundles/knockout").Include(
"~/Scripts/knockout-2.1.0.js",
"~/Scripts/knockout-2.1.0.debug.js"));
in the BundleConfig.cs
I'm not used to js, it really confuses me. I know there are more than 2 errors in what I did.
this is my class
public class Employee{
public int EmployeeId {get; set;}
public string UserName {get; set}
public string Password {get; set;}
}

Answer 1

You can't return View to an ajax request. You should change it to:
public ActionResult Login(string userName, string passWord)
{
if (ModelState.IsValid)
{
var employee =
db.Employees.FirstOrDefault(x => x.EmployeeNo == userName && x.Password == passWord && x.StatId == 1);
if (employee != null)
{
return Json(true);
}
}
return Json(false);
}
Then in your js:
$.ajax({
url: '/Company/Login',
type: 'post',
dataType: 'json',
data: ko.toJSON(self),
contentType: 'application/json',
success: function(data) {
if(data) {
window.location.href = '#Url.Action("Index", "Company")';
}
}
});
But there is no need to use knockout here. You can simply do a regular form Submit and Redirect by return RedirectToAction("Index", "Company") in the controller.