I am using MVC 5 / WebApi 2 and AngularJs. I want to display the Logged in username in my view. I know how to display that information using razor but how can I do it with Angular? So basically I need to do this with Angular.
<span >Logged In As: #Html.ActionLink(User.Identity.GetUserName(), "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage", #style = "color:white;float:right" })</span>
apiUserController
public class apiUserController : ApiController
{
// GET api/<controller>
public List<ApplicationUser> Get()
{
using (var context = new ApplicationDbContext())
{
List<ApplicationUser> users = new List<ApplicationUser>();
users = context.ApplicationUsers
.ToList();
return users;
}
}
}
Updated
public IHttpActionResult Get()
{
using (var context = new UserManager<ApplicationUser>(new UserStore<ApplicationUser>(new ApplicationDbContext())))
{
var user = context.FindById(User.Identity.GetUserId());
var loggedInUser = user.UserName;
return Ok(loggedInUser);
}
}
you'll need to create a service that returns your user information
angular.module('app').factory('Authentication', function ($resource) {
var resource = $resource('/user', {}, {
query: {
method: 'GET',
cache: true
}
});
return resource.get().$promise;
});
* note that you'll need to create and endpoint that will send you the user data as json using web api
once you got it done you'll be able to use it in any controller (let's assume you have a homecontroller, it could be a headercontroller or any other)
angular.module('app').controller('HomeController', ['$scope', 'Authentication', function ($scope, Authentication) {
$scope.authentication = Authentication;
}]);
then use it in your view like:
<span >Logged In As: {{authentication.user.username}} </span>
EDIT:
your api controller as you suggested could be like
public HttpResponseMessage Get()
{
var userId = getCurrentUserId(); //something like that
using (var context = new ApplicationDbContext())
{
ApplicationUser user = new ApplicationUser();
user = context.ApplicationUsers.SingleOrDefault(x=>x.id==userId);
return user;
}
}
try to read http://www.asp.net/web-api/overview/formats-and-model-binding/json-and-xml-serialization
for routing try to read this article (I guess you are using web api 2)
http://www.asp.net/web-api/overview/web-api-routing-and-actions/attribute-routing-in-web-api-2
If you want to cheat a little, you can do this in <head> in your _Layout:
<script type="text/javascript">
(function(myApp) {
myApp.username = "#User.Identity.GetUserName()";
//optional
myApp.otherStuff = "#moreMvcStuff";
})(window.myApp = window.myApp || {});
</script>
Then start your angular app like this:
(function (myApp) {
"use strict";
//var app = set up your angular app
app.run(["$rootScope",
function ($rootScope) {
$rootScope.appSettings = {
username: myApp.username
};
}
]);
})(window.myApp = window.myApp || {});
What you are doing is creating a single value on the window called myApp (or name it whatever you like) and passing it into your IIFE. This gives you access to it inside your angular script, bot only in that on block. So if you want it to stick around, you need to put it in a service or your rootScope.
In the app.run block, you can stick it in your rootScope or wherever you want it.
Now in your views you can display it with {{appSettings.username}}.
I call this "cheating" because it's specifically for MVC or webforms and it's not the "angular way". If you ever migrated to a fully agnostic html/js client (no asp.net mvc) and web APIs, you'd need to do what is in the currently-accepted answer.
Related
I have three languages on my website. I'm trying to get my razor pages to route to culture/localization like so:
https://localhost:44396/en/
https://localhost:44396/ru/
I have hundreds of lines of code commented out at this point using methods I've been googling for the past two days and nothing seems to do the job.
The website is mostly static so right now beyond the culture there is nothing else that needs routing.
Here's a way you can do it that doesn't require you to put a middleware attribute on all of your pages. This works globally.
In the ConfigureServices method of Startup.cs, add the following:
services.AddMvc().AddRazorPagesOptions(options => {
options.Conventions.AddFolderRouteModelConvention("/", model => {
foreach (var selector in model.Selectors) {
selector.AttributeRouteModel.Template = AttributeRouteModel.CombineTemplates("{lang=en}", selector.AttributeRouteModel.Template);
}
});
});
services.Configure<RequestLocalizationOptions>(options => {
var defaultCulture = new CultureInfo("en");
var supportedCultures = new CultureInfo[] {
defaultCulture,
new CultureInfo("fr")
};
options.DefaultRequestCulture = new RequestCulture(defaultCulture);
options.SupportedCultures = supportedCultures;
options.SupportedUICultures = supportedCultures;
options.RequestCultureProviders.Insert(0, new RouteDataRequestCultureProvider() {
RouteDataStringKey = "lang",
UIRouteDataStringKey = "lang",
Options = options
});
});
This sets up the global route, your supported cultures, and sets the primary culture provider to come from the route. (This still leaves the other providers intact, so failing the Route values, it can still set the culture based on the Query String, Cookies, or Language Header.)
Now, in your Configure method (still in Startup.cs), add the following:
var routeBuilder = new RouteBuilder(app) {
DefaultHandler = app.ApplicationServices.GetRequiredService<MvcRouteHandler>(),
};
routeBuilder.Routes.Insert(0, AttributeRouting.CreateAttributeMegaRoute(app.ApplicationServices));
var router = routeBuilder.Build();
app.Use(async (context, next) => {
var routeContext = new RouteContext(context);
await router.RouteAsync(routeContext);
context.Features[typeof(IRoutingFeature)] = new RoutingFeature() {
RouteData = routeContext.RouteData
};
await next();
});
var options = app.ApplicationServices.GetService<IOptions<RequestLocalizationOptions>>();
app.UseRequestLocalization(options.Value);
app.UseMvc();
There's some trickery here. Firstly, we have to call app.UseRequestLocalization before we call app.UseMvc, or else our program will run before we've changed the current culture. But the problem is, app.UseMvc() is the one that sets up RouteData. So, until you call it, the routing values are all blank. Ergo, when the RouteDataRequestCultureProvider goes to try and observe what {lang} is, it'll come back empty, and thus always default you to en. Catch 22.
So, we just go manually populate the RouteData ourselves in our own custom middleware. That way, the RouteDataRequestCultureProvider can see it, and all will work well.
(I admit this is not the most efficient, as you're just duplicating the routing work that app.UseMvc() will itself also do, but I'll take that unnoticeable delay to ensure all my pages are localized.)
I will tell you what I do which works. The only difference is that I use the 5 characters language code but I guess it is not something difficult to change.
Make sure that you have the following nuget library installed
Microsoft.AspNetCore.Localization.Routing
In the ConfigureServices method of the Startup.cs we type the following code under the servcies.AddMvc();
services.AddMvc()
.AddRazorPagesOptions(options =>
{
options.Conventions.AuthorizeFolder("/Account/Manage");
options.Conventions.AuthorizePage("/Account/Logout");
options.Conventions.AddFolderRouteModelConvention("/", model =>
{
foreach (var selector in model.Selectors)
{
var attributeRouteModel = selector.AttributeRouteModel;
attributeRouteModel.Template = AttributeRouteModel.CombineTemplates("{lang=el-GR}", attributeRouteModel.Template);
}
});
});
IList<CultureInfo> supportedCultures = new List<CultureInfo>
{
new CultureInfo("en-US"),
new CultureInfo("fr-FR"),
new CultureInfo("el-GR"),
};
var MyOptions = new RequestLocalizationOptions()
{
DefaultRequestCulture = new RequestCulture(culture: "en-US", uiCulture: "en-US"),
SupportedCultures = supportedCultures,
SupportedUICultures = supportedCultures
};
MyOptions.RequestCultureProviders = new[]
{
new RouteDataRequestCultureProvider() { RouteDataStringKey = "lang", Options = MyOptions } // requires nuget package Microsoft.AspNetCore.Localization.Routing
};
services.AddSingleton(MyOptions);
We add the following class
using Microsoft.AspNetCore.Builder;
public class LocalizationPipeline
{
public void Configure(IApplicationBuilder app, RequestLocalizationOptions options)
{
app.UseRequestLocalization(options);
}
}
Now you have to add the following line over your PageModel class:
[MiddlewareFilter(typeof(LocalizationPipeline))]
public class ContactModel : PageModel
{
public void OnGet()
{
}
}
I hope it helps.
I'm using ASP.NET MVC 6 (.net core). With it, i'm using the built in external login logic in order to authenticate with facebook.
I've made a modification to it so that instead of authenticating within the same window, i'm launching a popup and authenticating there. Once successful, the popup closes itself and tells my main window to redirect. This all works.
However, I want to use the "smaller/mini" version of the facebook login page. This can be seen here:
https://www.facebook.com/login.php?display=popup
"display=popup" is what is controlling it.
I don't see how i can inject this kvp in my C# code. Where can i do it?
app.UseFacebookAuthentication(new FacebookOptions
{
// was hoping for something here... tried to stick it into the authorizationurl but then i end up with 2 question marks and it fails
AppId = "blah",
AppSecret = "blah"
});
[AllowAnonymous]
public IActionResult ExternalLogin(string provider, string returnUrl = null)
{
var redirectUrl = Url.Action("ExternalLoginCallback", "Account", new { ReturnUrl = returnUrl });
var properties = _signInManager.ConfigureExternalAuthenticationProperties(provider, redirectUrl);
// Don't see anything here...
return Challenge(properties, provider);
}
You can use OnRedirectToAuthorizationEndpoint event:
var facebookOptions = new FacebookOptions
{
AppId = "",
AppSecret = "",
Events = new OAuthEvents()
{
OnRedirectToAuthorizationEndpoint = ctx =>
{
ctx.HttpContext.Response.Redirect(ctx.RedirectUri + "&display=popup&pip");
return Task.FromResult(0);
}
}
};
app.UseFacebookAuthentication(facebookOptions);
I have a MVC Controller which contains a couple of actions. One action is responsible for changing rate. Another one is responsible for uploading a file.
the actions work correctly when I play with them. but as soon as I upload a file, if I try to change the rate the post action fails because the url it tries to post to lack the controller name in it. Here are the codes.
here is my code in the view:
Change rate:
<form method="post" action="#Url.Action("UploadPreparedContract")">
#Html.Hidden("userApplicationId", Model.UserApplicationId)
<div class="upload-section k-content">
#Html.Kendo().Upload().Name("files")
<input type="submit" value="Submit"/>
</div>
</form>
<script type="text/javascript">
jQuery(function($) {
var viewModel = kendo.observable({
currentDisclosedRate: "#Model.CurrentDisclosedRate",
changeRate: function(e) {
e.preventDefault();
var self = this;
var rawValue = $('#newDisclosureRate').val();
var rate = parseFloat(rawValue);
$.ajax({
type: "POST",
url: 'ChangeDisclosureRate',
data: { newRate: rate, userApplicationId: #Model.UserApplicationId},
}).done(function(result) {
Notification.success('Rate changed');
self.set("currentDisclosedRate", rawValue);
})
.fail(function(err) {
Notification.error('Not changed. Customer may have placed order');
});
},
});
kendo.bind($("#page"), viewModel);
});
and here is the controller
public class ContractPreparationController : Controller
{
// GET: Application/ContractPreparation
public ActionResult Index(int userApplicationId)
{
// logic to prepare model
return View(new ContractPreparationOutputModel()
{
// Model properties
});
}
[HttpPost]
public async Task<ActionResult> ChangeDisclosureRate(decimal newRate, int userApplicationId)
{
return await Command.ApplyAsync(new ChangeDisclosureRateCommand() {UserApplicationId = userApplicationId, NewDisclosureRate = BasisPoint.Percent(newRate) }) == Command.CommandResult.Succeeded
? new HttpStatusCodeResult(HttpStatusCode.OK)
: new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
[HttpPost]
public async Task<ActionResult> UploadPreparedContract(IEnumerable<HttpPostedFileBase> files, int userApplicationId)
{
if (files == null)
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
if (files.Count() != 1)
return new HttpStatusCodeResult(HttpStatusCode.BadRequest, "You must upload one file only");
var application = applicationRepository.GetUserApplication(userApplicationId);
if (application == null)
return new HttpStatusCodeResult(HttpStatusCode.BadRequest, "Invalid user");
var file = files.Single();
var memberDocument = new MemberDocument(blobService, application.FK_UserId);
await memberDocument.Uploadfile(file);
if (await Command.ApplyAsync(new UploadPreparedContractCommand() {FileGuid = memberDocument.FileGuid , UserApplicationId = userApplicationId, FileExtension = memberDocument.FileExtension}) == Command.CommandResult.Succeeded)
{
return RedirectToAction("Index", new {userApplicationId});
}
return new HttpStatusCodeResult(HttpStatusCode.InternalServerError); // No expected failure case
}
}
Use the Url.Action helper method to generate the correct relative url to the action method.
url: '#Url.Action("ChangeDisclosureRate","ContractPreparation")',
When razor executes the code for your view, it will run the Url.Action method and output the correct url (which will have the controller name if needed). You can see it if you do view source of the page.
Try adding the controller name to your ajax url parameter:
url: 'ContractPreparation/ChangeDisclosureRate'
Otherwise MVC doesn't know what controller to use.
I want to get the profile information from steam. so first I've fixed that I can login through steam, I used this tutorial: http://www.oauthforaspnet.com/providers/steam/
But now I want to get the steam profile id from the user that logged in so I can use the JSON from the steam API to get the information from the user.
https://steamcommunity.com/profiles/(this id)
I hope someone can help me, I've searched for hours now, and don't have any result.
var options = new SteamAuthenticationOptions {
ApplicationKey = "Your API Key",
Provider = new OpenIDAuthenticationProvider // Steam is based on OpenID
{
OnAuthenticated = async context =>
{
// Retrieve the user's identity with info like username and steam id in Claims property
var identity = context.Identity;
}
}}; app.UseSteamAuthentication(options);
A while ago we discovered the answer:
1.) insert your key from the tutorial here:
var options = new SteamAuthenticationOptions
{
ApplicationKey = "Your API Key",
Provider = new OpenIDAuthenticationProvider // Steam is based on OpenID
{
OnAuthenticated = async context =>
{
// Retrieve the user's identity with info like username and steam id in Claims property
var identity = context.Identity;
}
}
};
app.UseSteamAuthentication(options);
2.) We discovered that steam is saving a users steam id in the database table called: 'AspNetUserLogins', the providerkey inside that table is an url made out of more pieces. For example:
http://steamcommunity.com/openid/id/here-users-steamid
We only need the users steamid, so we going to split that in step 3.
3.) Make a controller, for example: SteamController. Here we going to add a public string:
public string GetSteamID()
{
var manager = new UserManager<ApplicationUser>(new UserStore<ApplicationUser>(new Steam.Models.ApplicationDbContext()));
var CurrentUser = manager.FindById(User.Identity.GetUserId());
if (User.Identity.Name != "")
{
string url = CurrentUser.Logins.First().ProviderKey;
ViewBag.steamid = url.Split('/')[5]; //here we going to split the providerkey so we get the right part
}
else
{
ViewBag.steamid = "";
}
return ViewBag.steamid;
}
) now we can add some stuff, lets say we going to add profile information. Go to your SteamController and add:
[HttpGet]
public ContentResult GetProfile()
{
string url = string.Format("http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=addyourkeyhere&steamids={0}", this.GetSteamID());
string result = null;
using (var client = new WebClient())
{
result = client.DownloadString(url);
}
return Content(result, "application/json");
}
notice that you have to add your steam key from step 1 in the url.
) make a script called: profile.js. Here we going to add our profile information.
function profilepic() {
$.ajax({
url: 'http://localhost:3365/steam/GetProfile',
dataType: 'json',
success: function (data) {
$.each(data.response.players, function (key, value) {
if ($('.profile')) {
$('.profile').append("<img src='" + value.avatar + "'> <span>" + value.personaname + "</span>")
}
if ($('.profile1')) {
$('.profile1').append("<img src='" + value.avatarfull + "'>")
}
if ($('.username')) {
$('.username').append(value.personaname)
}
console.log(value)
});
}, error: function (httpReq, status, exception) {
console.log(status + " " + exception);
}
});
}
6.) Now we have to do the final step, create a view with the classes, for example:
<div class="userprofile">
<span class="profile1"></span>
<div class="userdescription">
<h2 class="username"></h2>
</div>
</div>
) I hope this will help some people, for more questions, feel free to ask!
I currently have the following code for the POST to edit a customer note.
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditNote(Note note)
{
if (ValidateNote(note))
{
_customerRepository.Save(note);
return RedirectToAction("Notes", "Customers", new { id = note.CustomerID.ToString() });
}
else
{
var _customer = _customerRepository.GetCustomer(new Customer() { CustomerID = Convert.ToInt32(note.CustomerID) });
var _notePriorities = _customerRepository.GetNotePriorities(new Paging(), new NotePriority() { NotePriorityActive = true });
IEnumerable<SelectListItem> _selectNotePriorities = from c in _notePriorities
select new SelectListItem
{
Text = c.NotePriorityName,
Value = c.NotePriorityID.ToString()
};
var viewState = new GenericViewState
{
Customer = _customer,
SelectNotePriorities = _selectNotePriorities
};
return View(viewState);
}
}
If Validation fails, I want it to render the EditNote view again but preserve the url parameters (NoteID and CustomerID) for something like this: "http://localhost:63137/Customers/EditNote/?NoteID=7&CustomerID=28"
Any ideas on how to accomplish this?
Thanks!
This action is hit by using a post. Wouldn't you want the params to come through as part of the form rather than in the url?
If you do want it, I suppose you could do a RedirectToAction to the edit GET action which contains the noteId and customerId. This would effectively make your action look like this:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditNote(Note note)
{
if (ValidateNote(note))
{
_customerRepository.Save(note);
return RedirectToAction("Notes", "Customers", new { id = note.CustomerID.ToString() });
}
//It's failed, so do a redirect to action. The EditNote action here would point to the original edit note url.
return RedirectToAction("EditNote", "Customers", new { id = note.CustomerID.ToString() });
}
The benefit of this is that you've removed the need to duplicate your code that gets the customer, notes and wotnot. The downside (although I can't see where it does it here) is that you're not returning validation failures.