Fixing AngularJS + MVC Routing Issues

hashratestore_icon-1Currently, I’m working on a hybrid AngularJS and MVC project, one of the tasks being to get rid of the # symbol from the URL. In pure AngularJS apps, this is very easily done by following the next two steps (and easily googled):

  1. Set up your base href in your index page: <head> <base href=”/”> </head>
  2. Add the following in your angular app config: $locationProvider.html5Mode(true)

 

The problem arises when you are in the .NET stack and using AngularJS with MVC. The above solution will still remove the # from URL, but page refresh won’t work. Why? This happens because MVC knows nothing about AngularJS routing and by following default MVC routing, it will look for an MVC page which doesn’t exist. Continue reading

MVC ActionLink not working after submit

These past days, I was having a problem with links for an iPad web app. The problem was that when I submit a form (step 1) and go to the next form (step 2), the link to return back to step 1 was not working. Apparently the problem is caused by Ajax. The solution is the following, instead of using the normal form tag to init a form:

      ……

use this type of form initialiser

@using (Html.BeginForm(“action”, “controller”, FormMethod.Post))
{

      ……

}

And add the following attribute:

{ “data-ajax”, “false” }

So the final code would look like this:

@using (Html.BeginForm(“action”, “controller”, FormMethod.Post, new Dictionary { { “data-ajax”, “false” } }))
{
……

}

Hope this post helps you, and reduces your swearing 🙂 Happy Form-ing!

 

 

 

Disable AutoComplete in Asp.NET

Most Browsers have a feature called AutoComplete which saves information that has previously been inputted like web addresses and form data. But sometimes, you may want to disable this feature for inputs like credit card information.

ASP.NET has the ability to override the user’s choice with the autocomplete attribute by setting it to off. This can be added to a form tag or any TextBox control and can be done using one of the following two properties:

  • AutoComplete=”Off”
  • AutoCompleteType=”Disabled”

View some examples after the break…

Continue reading