We Keep Coding

MVC - anti-forgery token error

I've been brought onto my first MVC and C# project so I appreciate any guidance.
I've created a new feature that checks to see if user has had security training when they log in. If they haven't, the user is directed to a training page where they simply agree/disagree to the rules. If the user agrees, login is completed. If user disagrees, he/she is logged off.
The issue that I have is that when I select the Agree/Disagree button in the training view, I get the following
It should route me to the homepage or logout the user.
Controller
public ActionResult UserSecurityTraining(int ID, string returnUrl)
{
// check if user already has taken training (e.g., is UserInfoID in UserSecurityTrainings table)
var accountUser = db.UserSecurityTraining.Where(x => x.UserInfoID == ID).Count();
// If user ID is not in UserSecurityTraining table...
if (accountUser == 0)
{
// prompt security training for user
return View("UserSecurityTraining");
}
// If user in UserSecurityTraining table...
if (accountUser > 0)
{
return RedirectToLocal(returnUrl);
}
return View();
}
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> UserSecurityTrainingConfirm(FormCollection form, UserSecurityTraining model)
{
if (ModelState.IsValid)
{
if (form["accept"] != null)
{
try
{
// if success button selected
//UserSecurityTraining user = db.UserSecurityTraining.Find(); //Create model object
//var user = new UserSecurityTraining { ID = 1, UserInfoID = 1, CreatedDt = 1 };
logger.Info("User has successfully completed training" + model.UserInfoID);
model.CreatedDt = DateTime.Now;
db.SaveChanges();
//return RedirectToAction("ChangePassword", "Manage");
}
catch (Exception e)
{
throw e;
}
return View("SecurityTrainingSuccess");
}
if(form["reject"] != null)
{
return RedirectToAction("Logoff", "Account");
}
}
return View("UserSecurityTraining");
}
View
#model ECHO.Models.UserSecurityTraining
#{
ViewBag.Title = "Security Training";
Layout = "~/Views/Shared/_LayoutNoSidebar.cshtml";
}
<!--<script src="~/Scripts/RequestAccess.js"></script>-->
<div class="container body-content">
<h2>#ViewBag.Title</h2>
<div class="row">
<div class="col-md-8">
#using (Html.BeginForm("UserSecurityTrainingConfirm", "Account", FormMethod.Post, new { role = "form" }))
{
<fieldset>
#Html.AntiForgeryToken()
Please view the following security training slides:<br><br>
[INSERT LINK TO SLIDES]<br><br>
Do you attest that you viewed, understood, and promise to follow the guidelines outlined in the security training?<br><br>
<input type="submit" id="accept" class="btn btn-default" value="Accept" />
<input type="submit" id="reject" class="btn btn-default" value="Reject" />
</fieldset>
}
</div><!--end col-md-8-->
</div><!--end row-->
</div><!-- end container -->
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}

I don't think you've provided enough of your code to properly diagnose this particular error. In general, this anti-forgery exception is due to a change in authentication status. When you call #Html.AntiForgeryToken() on a page, a cookie is set as well in the response with the token. Importantly, if the user is authenticated, then the user's identity is used to compose that token. Then, if that user's authentication status changes between when the cookie is set and when the form is posted to an action that validates that token, the token will no longer match. This can either be the user being authenticated after the cookie set or being logged out after the cookie is set. In other words, if the user is anonymous when the page loads, but becomes logged in before submitting the form, then it will still fail.
Again, I'm not seeing any code here that would obviously give rise to that situation, but we also don't have the full picture in terms of how the user is being logged in an taken to this view in the first place.
That said, there are some very clear errors that may or may not be causing this particular issue, but definitely will cause an issue at some point. First, your buttons do not have name attributes. Based on your action code, it appears as if you believe the id attribute will be what appears in your FormCollection, but that is not the case. You need to add name="accept" and name="reject", respectively, to the buttons for your current code to function.
Second, on the user successfully accepting, you should redirect to an action that loads the SecurityTrainingSuccess view, rather than return that view directly. This part of the PRG (Post-Redirect-Get) pattern and ensures that the submit is not replayed. Any and all post actions should redirect on success.
Third, at least out of the box, LogOff is going to be a post action, which means you can't redirect to it. Redirects are always via GET. You can technically make LogOff respond to GET as well as or instead of POST, but that's an anti-pattern. Atomic actions should always be handled by POST (or a more appropriate verb like PUT, DELETE, etc.), but never GET.
Finally, though minor, the use of FormCollection, in general, is discouraged. For a simple form like this, you can literally just bind your post as params:
public ActionResult UserSecurityTrainingConfirm(string accept, string reject, ...)
However, then it'd probably be more logical and foolproof to introduce a single boolean like:
public ActionResult UserSecurityTrainingConfirm(bool accepted, ...)
Then, your buttons could simply be:
<button type="submit" name="accepted" value="true" class="btn btn-default">Accept</button>
<button type="submit" name="accepted" value="false" class="btn btn-default">Reject</button>
This essentially makes them like radios. The one that is clicked submits its value, so the accepted param, then, will be true or false accordingly. Also, notice that I switched you to true button elements. The use of input for buttons is a bad practice, especially when you actually need it to submit a value, since the value and the display are inherently tied together. With a button element, you can post whatever you want and still have it labeled with whatever text you want, independently.

MVC PagedList sending weird requests to server

I am using MVC with PagedList in order to have a big table divided into multiple pages.
Now, in the web browser, this is what I see:
http://localhost:49370/Home/Pending?page=2
Which makes sense. However, when sending a request to the server, this is what the server receives: http://localhost:49370/Home/WhereAmI?_=1429091783507
This is a huge mess, and in turn it makes it impossible to redirect the user to specific pages in the list because I don't know what is the page the user is currently viewing !
Controller code:
public ActionResult Pending(int? page)
{
//I have a ViewModel, which is MaterialRequestModel
IEnumerable<MaterialRequestModel> model = DB.GATE_MaterialRequest
.Select(req => new MaterialRequestModel(req))
.ToList();
int pageNum = page ?? 1;
return View(model.ToPagedList(pageNum, ENTRIES_PER_PAGE));
}
View code:
#model IEnumerable<MaterialRequestModel>
<table>
//table stfuff
</table>
<div style="display: block;text-align: center">
#Html.PagedListPager((PagedList.IPagedList<MaterialRequestModel>)Model, page => Url.Action("Pending", new { page }), PagedListRenderOptions.ClassicPlusFirstAndLast)
</div>
Is this a limitation of MVC PagedList? Or am I missing something?

It happens that PagedList does not send this type of information to the server. Instead, if you want to know which page is being looked at, you have to use a custom model that has that information, and if you want to make a request usign ajax (the original objective here) you must using a special option:
#Html.PagedListPager(Model.requests, page => Url.Action("SearchTable", "Home",
new
{
employeesQuery = Model.query.employeesQuery, //your query here
pageNum = page
}
), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "tableAndPaginationDiv", OnComplete = "initiatePendingTableDisplay" }))
Admittedly this solution is poor at best. You can only have 1 option of the entire list (so if you are already using other options somewhere else you can forget it) and you have no control whatsoever on the request made, so customization is really not an option here unless you feel like hooking the calls.
Anyway, this is how I fixed it, hopefully it will help someone in the future!

PUSH on event "DB Data Changes" using SignalR

All right I followed the chat application demo just fine, a couple of other tuts as well, but all of them combined doesn't answer or due to my lack of intelligence to derive the answer I want. The scenario is as follows
I am building a website with
MVC 4
.NET Framework 4.0
IIS 7.5
ASP.NET 4
SQL Server 2008 R2
that is to accompany a desktop app, i.e. my web application and the desktop app will be interacting with the same DB. I want to add an AMS (Acess Management System) to the website and the desktop application, so that Users access rights to any function inside the apps can be managed finely grained. I want the changes to be PUSHED to the wesite in realtime.
For Example: A manager from the desktop app revokes the rights of the clerks to view sales reports, and a couple of clerks were online on the website, so I want those changes to be PUSHED to the website as they are made.
Now currently I am storing the rights of the users at login, so that with the increasing number of users wont cause the performance of the website to degrade quickly, now I know that when checking for every action either allowed or not, I can make a round trip to the DB and check for the condition, but as I said earlier, that would degrade the performance.
Now I want to PUSH the rights of the users to the website if there are some changes, either from the website itself or the desktop app, I looked into SignalR, and I found a solution here on SO (This and This), but I don't want a clock ticker running continuously and then broadcasting the changes to all connected clients. And the user that is being changed, maybe connected to the website or maybe not. Please can someone point me in the right direction

I have spent much time on trying to find a solution for this, and the simplest I've found, using SignalR, is to use Hubs as a gateway to your Repository/API:
So, here's how the project would be set up:
ASP.NET MVC Controllers' Actions dish out entire pages.
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
The View should be wrapped in a Layout that loads a Knockout MVVM. The View then initializes the part of the MVVMs that need to be used (as in, lump all your MVVM script in one file, and the View initializes the SignalR connections, to avoid needless connections (the code below has the Script initializing itself)). The View also has KnockOut bindings attached to it.
MVVM:
function AddressViewModel(rid, nick, line1, line2, city, state, zip)
{
<!-- Modifiable Properties should be observable. This will allow Hub updates to flow to the View -->
var self = this;
self.rid = rid;
self.nick = ko.observable(nick);
self.line1 = ko.observable(line1);
self.line2 = ko.observable(line2);
self.city = ko.observable(city);
self.state = ko.observable(new StateViewModel(state.RID, state.Title, state.Abbreviation));
self.zip = ko.observable(zip);
}
function StateViewModel(rid, title, abbreviation)
{
<!-- States are a stagnant list. These will not be updated -->
var self = this;
self.rid = rid;
self.title = title;
self.abbreviation = abbreviation;
}
var Page = new function()
{
//Page holds all Page's View Models. The init function can be modified to start only certain hubs.
var page = this;
page.init = function()
{
page.Account.init();
}
page.Account = new function ()
{
//Account holds account-specific information. Should only be retrieved on an encrypted, secure, and authorized connection.
account.init = function()
{
account.Addresses.init();
}
//Addresses manages the calls to Hubs and their callbacks to modify local content.
account.Addresses = new function ()
{
//Connect to the hub, and create an observable list.
var addresses = this;
addresses.hub = $.connection.accountAddressHub;
addresses.list = ko.observableArray([]);
//Called on initial load. This calls the Index() function on the Hub.
addresses.init = function ()
{
addresses.hub.server.index();
}
//displayMode allows for dynamic changing of the template.
addresses.displayMode = ko.computed(function ()
{
return 'Address';
});
//Empty allows to prompt user instead of just showing a blank screen.
addresses.empty = ko.computed(function ()
{
if (addresses.list().length == 0)
{
return true;
}
else
{
return false;
}
});
//During initial load, unless if MVC provides the information with the View, the list will be empty until the first SignalR callback. This allows us to prompt the user we're still loading.
addresses.loading = ko.observable(true);
//The Hub's Index function ought to reach indexBack with a list of addresses. The addresses are then mapped to the list, using the local AddressViewModel. Sets initial load to false, as we now have addresses.
addresses.hub.client.indexBack = function (addressList)
{
$.map(addressList, function (address)
{
addresses.list.push(new AddressViewModel(address.RID, address.Nick, address.Line1, address.Line2, address.City, address.State, address.ZIP));
});
addresses.loading(false);
}
}
}
}
On Run Script (Place in Layout, Script File, or View, depending on needs or confirgurations per page)
$(function ()
{
//Configures what SignalR will do when starting, on receive, reconnected, reconnected, or disconnected.
$.connection.hub.starting(function ()
{
$('.updated').hide();
$('.updating').show();
});
$.connection.hub.received(function ()
{
$('.updating').hide();
$('.updated').show();
});
$.connection.hub.reconnecting(function ()
{
$('.updated').hide();
$('.updating').show();
});
$.connection.hub.reconnected(function ()
{
$('.updating').hide();
$('.updated').show();
});
//This will keep attempt to reconnect - the beauty of this, if the user unplugs the internet with page loaded, and then plugs in, the client reconnects automatically. However, the client would probably not receive any backlog - I haven't test that.
$.connection.hub.disconnected(function ()
{
setTimeout(function ()
{
$.connection.hub.start();
}, 5000); // Restart connection after 5 seconds.
});
//Apply knockout bindings, using the Page function from above.
ko.applyBindings(Page);
//Start the connection.
$.connection.hub.start(function ()
{
}).done(function ()
{
//If successfully connected, call the init functions, which propagate through the script to connect to all the necessary hubs.
console.log('Connected to Server!');
Page.init();
})
.fail(function ()
{
console.log('Could not Connect!');
});;
});
LayOut:
<!DOCTYPE html>
<html>
<head>
. . .
#Styles.Render( "~/Content/css" )
<!-- Load jQuery, KnockOut, and your MVVM scripts. -->
#Scripts.Render( "~/bundles/jquery" )
<script src="~/signalr/hubs"></script>
. . .
</head>
<body id="body" data-spy="scroll" data-target="#sidenav">
. . .
<div id="wrap">
<div class="container">
#RenderBody()
</div>
</div>
#{ Html.RenderPartial( "_Foot" ); }
</body>
</html>
View (Index):
#{
ViewBag.Title = "My Account";
}
<div>
#{
Html.RenderPartial( "_AddressesWrapper" );
}
</div>
_AddressesWrapper:
<div data-bind="with: Page.Account.Addresses">
#{
Html.RenderPartial( "_Address" );
}
<div id="Addresses" class="subcontainer">
<div class="subheader">
<div class="subtitle">
<h2>
<span class="glyphicon glyphicon-home">
</span>
Addresses
</h2>
</div>
</div>
<div id="AddressesContent" class="subcontent">
<div class="row panel panel-primary">
<!-- Check to see if content is empty. If empty, content may still be loading.-->
<div data-bind="if: Page.Account.Addresses.empty">
<!-- Content is empty. Check if content is still initially loading -->
<div data-bind="if:Page.Account.Addresses.loading">
<!-- Content is still in the initial load. Tell Client. -->
<div class="well well-lg">
<p class="text-center">
<img src="#Url.Content("~/Content/Images/ajax-loader.gif")" width="50px" height="50px" />
<strong>We are updating your Addresses.</strong> This should only take a moment.
</p>
</div>
</div>
<div data-bind="ifnot:Page.Account.Addresses.loading">
<!-- Else, if not loading, the Client has no addresses. Tell Client. -->
<div class="well well-lg">
<p class="text-center">
<strong>You have no Addresses.</strong> If you add an Addresses, you can view, edit, and delete it here.
</p>
</div>
</div>
</div>
<!-- Addresses is not empty -->
<div data-bind="ifnot: Page.Account.Addresses.empty">
<!-- We have content to display. Bind the list with a template in the Partial View we loaded earlier -->
<div data-bind="template: { name: Page.Account.Addresses.displayMode, foreach: Page.Account.Addresses.list }">
</div>
</div>
</div>
</div>
</div>
</div>
_Address:
<script type="text/html" id="Address">
<div class="col-lg-3 col-xs-6 col-sm-4 well well-sm">
<address>
<strong data-bind="text: nick"></strong><br>
<span data-bind="text: line1"></span><br>
<span data-bind="if: line2 == null">
<span data-bind="text: line2"></span><br>
</span>
<span data-bind="text: city"></span>, <span data-bind=" text: state().abbreviation"></span> <span data-bind="text: zip"></span>
</address>
</div>
</script>
The KnockOut script interchanges with a SignalR Hub. The Hub receives the call, checks the authorization, if necessary, and passes the call to the proper repository or straight to WebAPI 2 (this example). The SignalR Hub action then takes the results of the API exchange and determines which function to call, and what data to pass.
public class AccountAddressHub : AccountObjectHub
{
public override async Task Index()
{
//Connect to Internal API - Must be done within action.
using( AddressController api = new AddressController(await this.Account()) )
{
//Make Call to API to Get Addresses:
var addresses = api.Get();
//Return the list only to Connecting ID.
Clients.Client( Context.ConnectionId ).indexBack( addresses );
//Or, return to a list of specific Connection Ids - can also return to all Clients, instead of adding a parameter.
Clients.Clients( ( await this.ConnectionIds() ).ToList() ).postBack( Address );
}
}
}
The API Controller checks data integrity and sends a callback to the same SignalR Hub action.
public class AddressController
: AccountObjectController
{
...
// GET api/Address
public ICollection<Address> Get()
{
//This returns back the calling Hub action.
return Account.Addresses;
}
...
}
Your .NET application will need to use the same functions as your javascript-ran site. This will allow a modification from any client to then propagate to however many clients are needed (that single client who just loaded, as in this example, or to broadcast to everyone, or anywhere in between)
The end result is that the Hub receives changes/calls, calls the API, the API verifies the data and returns it back to the Hub. The Hub can then update all clients. You then successfully have real-time database changes and real-time client changes. The only catch is any change outside of this system will require the clients to refresh, which means all client calls, especially changes, must go through Hubs.
If you need more examples, I would be happy to show some. Obviously, security measures should be taken, and the code here is obviously only a small example.

If you want use signalr I think you should use push server.But you can use another way and send a request to the api and the api should know about db change.
For push server you can also see this.

There are some considerations that might help.
1- Since you are playing with the Access rights , so i would say that , you must check the access right at run time each time , user wants to access certain secured functionality , yes this will have some degradation in performance but ensure you the tighter granular security.
2- For sending periodic changes , i would say that , you can use Timer available in .Net and trigger changes at a certain interval.
3- I still don't like the idea of sending security related information to the client (thin) because anybody with basic knowledge of JavaScript and Html can change the security by running your site in debug mode or through some automated tools like Fiddler.

I've made a library that proxies between a server side eventaggregator / service bus. It makes it alot easier to stream line the events being sent to clients. Take a look at the demo project here
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/tree/master/SignalR.EventAggregatorProxy.Demo.MVC4
Open the demo .sln and there is both a .NET client (WPF) and a javascript client example
Install using nuget
Install-Package SignalR.EventAggregatorProxy
wiki
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/wiki

Programming Button OnClick Event

I'm trying to make a method run once a user clicks a button on a page. I created a sample of code to test it but it doesn't work, though it may be because I'm using MessageBox.
<input id="upload-button" type="button" ondblclick="#ModController.ShowBox("Message");" value="Upload"/><br />
Here's the method I'm invoking.
public static DialogResult ShowBox(string message)
{
return MessageBox.Show(message);
}
Any idea on how I can make this function properly?

You could do something like this if your intent is to pass a message to the client and display a dialog:
In your view, add the following:
#using (Html.BeginForm("ShowBox","Home",FormMethod.Post, new { enctype = "multipart/form-data" })){
#Html.Hidden("message", "Your file has uploaded successfully.");
<input id="upload-button" type="submit" value="Click Me" />
<input id="file" name="file" type="file" value="Browse"/>
}
Then in your controller:
[HttpPost]
public ActionResult ShowBox(string message, HttpPostedFileBase file)
{
if (file == null || file.ContentLength == 0)
{
//override the message sent from the view
message = "You did not specify a valid file to upload";
}
else
{
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/App_Data/Uploads"));
file.SaveAs(path);
}
System.Text.StringBuilder response = new System.Text.StringBuilder();
response.Append("<script language='javascript' type='text/javascript'>");
response.Append(string.Format(" alert('{0}');", message));
response.Append(" var uploader = document.getElementById('upload-button'); ");
response.Append(" window.location.href = '/Home/Index/';");
response.Append("</script>");
return Content(response.ToString());
}
NOTE:
I think this approach is less than ideal. I'm pretty sure that returning JavaScript directly like this from the controller is probably some sort of an anti-pattern. In the least, it does not feel right, even thought it works just fine.

It looks like you're using a Razor template. If so, and you're using MVC, I don't think you're approaching this right. MVC doesn't work on an event system like ASP.NET. In MVC you make a requst to an ACtion method, usually with a URL in the form of {controller}/{action}, or something like that.
you have few options:
Setup a javascript event for the dblClick event, and perform an AJAX request to the server in the event handler.
Use #ActionLink() and style it to look like a button.
If you are using ASP.NET, there are certain POST parameters you can set before posting to the server, which will tell ASP.NET to run a certain event handler. However, if you're using ASP.NET, I'd recommend using web forms instead of Razor. I've never used Razor with ASP.NET myself, but I don't think the two technologies Jive very well.

ASP.NET MVC 3 - Nick and Email taken validation (Ajax calls)

What is the recommended way to handle "Nick / Email taken" AJAX validation in MVC that integrates nicely with validators provided by DataAnnotantion (#Html.ValidationMessageFor(model => model.Email))? I understand that I would probably have something like this:
<input id="email" onBlur="emailTaken();" onchanged="emailTaken();" />
<script type="text/javascript">
function emailTaken() {
var encodedEmail = enc($("#email").val());
$.getJSON("/Ajax/EmailTaken/" + encodedEmail, function (data) {
if (data.res) {
// all is OK
} else {
// TODO: Show Error?
}
});
}
</script>
I already know that on Server I can do ModelState.AddModelError and I am doing it... but I want to know what is recommended way for ClientSide validation? Do I need to invoke some method provided by jquery.validate.unobtrusive.js?

You would probably want to use Remote Validation for this. It's built-in, so you don't have to do any of your own javascript.
http://msdn.microsoft.com/en-us/library/gg508808(v=vs.98).aspx