We Keep Coding

Passing the parameter via an automatically generated JavaScript link to the controller

I have a problem with passing the parameter via the link to the controller. The view in which I have a problem is to dynamically display the list of users, along with the possibility of searching for them. I did this part in js and it works fine. In this functionality in js I generate a link to the buttons, so that later, after pressing the button, you can save the selection in the database. Each link has an assigned user ID and user group ID. My problem is that when I press the button, nothing happens.
The following code represents the functionality described above. I would be very grateful for your help.
#if(ViewData[Enums.States.UserSelectWindow.ToString()].ToString() == "True")
{
<script type="text/javascript">
$("#UserlistCollectionId").css('height', $("#WindowUserSelectId").height() + 'px');
let users = #Html.Raw(Json.Serialize(UserModel.GetUsers()));
function Clear() {
$("#UserlistCollectionId").empty();
}
function FillAll(users) {
Clear();
for (user of users) {
$("#UserlistCollectionId").append('<li class="list-group-item"><div class="row justify-content-between"><div class="col-auto">' + user.name + '</div><div class="col-auto"><a class="btn btn-sm btn-success" asp-action="AddUserToGroup" asp-controller="Settings" asp-route-groupId=#Model.Group.Id asp-route-userId='+user.id+'>Wybierz</a></div></div></li>');
}
}
FillAll(users);
$("#SearchInputId").keyup(function () {
Clear();
let searchValue = $("#SearchInputId").val();
if (searchValue === "")
FillAll(users);
else {
for (user of users) {
if (user.name.includes(searchValue)) {
$("#UserlistCollectionId").append('<li class="list-group-item"><div class="row justify-content-between"><div class="col-auto">' + user.name + '</div><div class="col-auto"><a class="btn btn-sm btn-success" asp-route-groupId=#Model.Group.Id asp-route-userId='+user.id+'>Wybierz</a></div></div></li>');
}
}
}
});
</script>
}
In the above code, automatic link generation is performed using JQuery as follows:
$("#UserlistCollectionId").append('<li class="list-group-item"><div class="row justify-content-between"><div class="col-auto">' + user.name + '</div><div class="col-auto"><a class="btn btn-sm btn-success" asp-route-groupId=#Model.Group.Id asp-route-userId='+user.id+'>Wybierz</a></div></div></li>');
Unfortunately it doesn't work. In the inspection of the page you can see that the tag "a" does not have the attribute "href", only automatically puts all the code in quotes:
Screen of the html fragment in the browser

Firstly, you need read the doc about what does asp-route-{value} generate the url:
Any value occupying the {value} placeholder is interpreted as a potential route parameter. If a default route isn't found, this route prefix is appended to the generated href attribute as a request parameter and value
(/home/index?value=aaa). Otherwise, it's substituted in the route template. More explantion you could refer to the document.
Secondly, you do not specify the controller and action name, so the url will generate depending on your request url. That is to say, if the tag helper exists in Home/Privacy.cshtml, it will generate to:href="/home/privacy?value=aa".
Finally, Tag Helpers are interpreted. In other words, Razor must see them as actual tags in order to replace them. So what you did in js will not follow the tag helper generation principle, it's just a JS string. You need change the url like below:
<a class="btn btn-sm btn-success" href="/home/index?groupId=' +#Model.Group.Id+'&userId=' + user.id+'">Wybierz</a>
If the url matches the default route template, the url may like below：
<a class="btn btn-sm btn-success" href="/home/index/' +#Model.Group.Id+'/' + user.id+'">Wybierz</a>

Vue, basing link in href off of the method completing first

I'm trying to figure out how to reconcile this, but I have a button in Vue calling a function, which works, but it's taking more than a few seconds to complete and the href link to the next page happens first about half the time.
Is there a way to make this so that the button called method has to get a 200 success back in order for the href link to be triggered?
<button #click="changeStatus(dateEvent)" type="button" class=" taskButton btn-default">
<a v-bind:href="'/task/' + dateEvent.taskt_id + '/progress'" style="color:white;">Accept Task</a>
</button>
methods: {
changeStatus: function(dateEvent) {
//console.log(dateEvent.status, dateEvent.taskt_id)
let data = {
id: dateEvent.taskt_id,
status: 'P'
};
}

You need programmatic navigation (vue router if you want) and async/await:
You could do it without the router in vanilla js as well:
methods: {
async changeStatus(dateEvent) {
await this.myAsyncFunction(); // your function that takes two seconds to complete
let data = {
id: dateEvent.task_id,
status: 'P'
};
var route = '/task/' + dateEvent.task_id + '/progress'"
this.$router.push(route);
}
}
<button #click="changeStatus(dateEvent)" type="button" class=" taskButton btn-default">
<a style="color:white;">Accept Task</a>
</button>

How to concat #Url.Action with jquery syntax

I'm using bootstrap datatables to create a column displaying a link button to redirect to another view, the problem is that I'm getting syntax error from jquery and I'm not beign successful fixing it.
Here is the relevant part where I get the syntax error:
return '<button type="button"class="btn btn-default" onclick="location.href='#Url.Action("IncidentesDetalle", "ServiciosController", new { Id = "1" })'"><i class="fa fa-eye"></i></button>'
Any help will be appreciated.

I guess you should change your string to:
return '<button type="button" class="btn btn-default" onclick="location.href=\'#Url.Action("IncidentesDetalle", "ServiciosController", new { Id = "1" })\'"><i class="fa fa-eye"></i></button>'
Because in your original code single quotes just closed after href= and opened before ><i again. So part of the returning string like #Url.... became just invalid code. Hence the error.

Try this, it will work:
string path = "'#Url.Action('IncidentesDetalle', 'ServiciosController', new { Id = '1' })'";
return "<button type='button' class='btn btn-default' onclick='location.href="+path+"'><i class='fa fa-eye'></i></button>";

How to pass parameter(id) in URL using ng-click to view subdocument of specific user in Angularjs

I need to pass the parameter id in a URL using ng-click in Angularjs, I am doing this because of I want to view a specific user subdocument data in a separate page.
<tr ng-repeat="register in registerlist | filter:searchText">
<td>{{$index+1}}</td>
<td>{{register.name}}</td>
<td>{{register.email}}</td>
<td>{{register.mobile_no}}</td>
<td>{{register.area_name}}</td>
<td>
<button type="button" class="btn btn-default"
ng-click="RegisterView(register._id); showOrder = !showOrder">View</button>
</td>
</tr>
URL example: localhost:8080//register/5426ced88b49d2e402402205
Here this above user had subdocument, so i need to view the subdocument in a separate page.
Controller:
$scope.RegisterView = function(id) {
$scope.IsVisible = $scope.IsVisible ? false : true;
$http.get('/auth/register-list/' + id).success(function(response){
$scope.bookinglist = response.booking;
});
};

You can use $location in your $scope.RegisterView function to navigate to other page.
something like this $location.path('/register/5426ced88b49d2e402402205')

If you want to see your subdocument in seperate page then simply use :
<a target="_blank" >
// apply target to that div where you are using subdocument
</a>
And if You have id in your register then you can directly call it as RegisterView(register.id)
$scope.RegisterView = function(id){
$scope.IsVisible = $scope.IsVisible ? false : true;
$http.get('/auth/register-list/' + id).success(function(response){
$scope.bookinglist = response.booking;
});
};
TEMPLATE
<button type="button" ng-click="RegisterView(register.id)"></button>

Javascript href MVC Razor URL.Action

This is my javascript, trying to go to an Url.Action using javascript.
function selectSchool() {
var url = '#Url.Action("SelectSchool", "Home", new { school = "_id_" })'.replace('_id_', $("#schoolSelect").val());
alert(url);
window.location.href = url;
}
The link in the alert looks fine, however the url goes back to the current view Home/Index?
What am i doing wrong?
HTML
<button class="btn btn-success" onclick="selectSchool()">Välj</button>