Passing value from Razor to javascript function CRUD - javascript

I have a trouble when I try to pass values from razor to a javascript function.
This works
<input type="button" class="btn btn-primary mx-1" value="Delete" onclick="deletePill()" />
function deletePill() {
console.log("Hola");
}
But when I do this it doesn't work
<input type="button" class="btn btn-primary mx-1" value="Delete" onclick="deletePill(#item.Id)" />" />
Or
<input type="button" class="btn btn-primary mx-1" value="Delete" onclick="deletePill()" data="#item.Id" />
function deletePill(Id) {
console.log(Id);
}
What should I change or add for it works?
I want passing values from Razor to javascript functions
The variables have values but it doesn't pass the values properly

The variables have values but it doesn't pass the values properly. I want passing values from Razor to javascript functions.
Well, the way you are trying to pass value is incorrect. You ought to pass value using string literal because, while you are writing Razor syntax you are in C# mode so, you have to pass value through single qoutation as like 'YourValuee'. In your scenario you should write as onclick="deletePill('#item.Id')". Therefore, in your code, you are ceretainly,missing the single qoutation ''
Solution:
HTML:
<input type="button" class="btn btn-primary mx-1" value="Delete From Razor To Js Func" onclick="deletePill('#item.ItemId')" />
Javascript:
#section scripts {
<script>
//Function Button Delete
function deletePill(Id) {
alert("User Id:" + Id + " will be Deleted!");
console.log(Id);
}
</script>
}
Output:
Note: If you would like to know more details on it you could check our official document here

Related

Anugularjs ng-disabled not working as expected for a button element

I have created a new button which should be enabled on loading on page and should get disabled while data on page is getting saved (there is a save button). So basically this new button should be disabled whenever save button is enabled.
Angular code :
<input id="save" class="btn " type="button"
value="SAVE BUTTON" ng-click="saveData()" ng-disabled="isSaveButtonDisabled" />
<input id="create" class="btn " type="button"
value="NEW BUTTON" ng-click="createNewButton()" ng-disabled="isCreateButtonDisabled" />
In the controller, it is getting attached to scope :
$scope.isSaveButtonDisabled= isSaveButtonDisabled;
$scope.isCreateButtonDisabled= isCreateButtonDisabled;
and there are two function which defines the value of this attribute :
function isSaveButtonDisabled(){
$scope.isSaveButtonDisabled= true;
}
function isCreateButtonDisabled(){
$scope.isCreateButtonDisabled= false;
}
But the Create Button remains disabled, not matter what.
What am i missing?
For both buttons, you have functions defined with the same name as the 'true/false' bool properties? If so, then you need to change the two wrapper functions to something different (possibly disableSaveButton(), disableCreateButton()) and call those two functions in your existing saveData() / createNewButton()
You can call two functions in a ng-click
try this way.
$scope.isSaveButtonDisabled= function(){
$scope.isSaveButtonDisabled= true;
$scope.isCreateButtonDisabled= false;
}
$scope.isCreateButtonDisabled= function(){
$scope.isCreateButtonDisabled= false;
$scope.isSaveButtonDisabled= true;
}
Kindly change your code in HTML, like
<input id="save" class="btn " type="button"
value="SAVE BUTTON" ng-click="isSaveButtonDisabled();saveData();" ng-disabled="isSaveButtonDisabled" />
<input id="create" class="btn " type="button"
value="NEW BUTTON" ng-click="isCreateButtonDisabled();createNewButton();" ng-disabled="isCreateButtonDisabled" />

ViewBag Append In Onclick Button MVC

I need to retrieve a string value from viewbag and append it with a javascript function.
<input type="button" value="Open" id="relay1Cuc1" onclick="newAJAXCommand(#ViewBag.Address1+'/io.cgi?DOA1=20');">
I load the ViewBag value from controller in this mode:
ViewBag.Address1 = ConfigurationManager.AppSettings["Cucina1Address"];
The result of which I need in onclick is as follows:
<input type="button" value="Open" id="relay1Cuc1" onclick="newAJAXCommand('192.168.0.1/io.cgi?DOA2=20');">
Thanks
You can try the following:
<input type="button" value="Open" id="relay1Cuc1" onclick="newAJAXCommand('#(ViewBag.Address1)/io.cgi?DOA2=20');">

Calling controller AngularJS from a button in HTML

I need to call the controller deleteMember so to when the user clicks on a button, the member is deleted.
//deleting a member
Members.controller('deleteMember',['$scope','$http',function($scope, $http){
$scope.deleteMember = function(member){
$scope.deleteMember="";
console.log(member);
var deleteMember=confirm("Sure you want to delete?");
if(deleteMember){
$http.post('PHP/deleteMember.php',member).success(
function(data){
console.log(data);
if (data){
console.log("Deletion successful"); //delete worked
}else{
console.log("Deletion not successful"); //delete did not work
}
});
};
};
}]);
HTML code:
<div class="col-md-2">
<td><button type="button" class="btn btn-warning">Delete</button><td> <!--on button click, the member will be deleted-->
</div>
Is there a way that I can write the name of the controller using HTML?
Thanks for the help :)
You could add the ng-click attribute to the button:
<button type="button" ng-click="deleteMember(member)" class="btn btn-warning">Delete</button>
In this example I assume that the member variable that is passed to the deleteMember method is already in the scope of this button. This would be the case if this button is rendered inside an ng-repeat directive.
For example:
<tr ng-repeat="member in members">
...
<td>
<button type="button" ng-click="deleteMember(member)" class="btn btn-warning">
Delete
</button>
<td>
</tr>
Also you should probably not shooting yourself into the foot by replacing the deleteMember function with a string because the next time you want to call this method it simply won't work:
$scope.deleteMember = "";
You can simply just call the function deleteMember using ng-click and make sure you pass in the member you want to delete as an argument. You are passing a member in your function as an argument in the controller, so one must also be passed via the HTML. You haven't shown it in your code but I assume you are using ng-repeat to do this.
<div class="col-md-2">
<td><button type="button" class="btn btn-warning" ng-click="deleteMember(member)">Delete</button><td> <!--on button click, the member will be deleted-->
</div>
You mention calling the controller in the HTML. If you mean your page isn't initiated with the 'deleteMember' controller then you can wrap that block of code using ng-controller to give you access to the deleteMember.
<div class="col-md-2" ng-controller="deleteMember">
<td><button type="button" class="btn btn-warning" ng-click="deleteMember(member)">Delete</button><td> <!--on button click, the member will be deleted-->
</div>

ng hide issues in angular js

I have hided an element using ng-hide.
Then tried to show it using a function. but it is not showing..
<input type="button" class="btn btn-primary btn-sm margin-right-15 ng-hide" value=" Edits "
ng-click="EditValueSalComponent(T,p,K)" id="{{'in'+T.id}}"/>
<div ng-if="(p.id == K.emp_id && T.id == K.component_id)">
{{K.amount}}
<div ng-init="hideinputbox(T.id)"></div>
</div>
$scope.hideinputbox = function (k) {
$("input#in" +k).show();
}
You have to do it angular way .
Like this
<input type="button" ng-hide="T.hideMe" class="btn btn-primary btn-sm margin-right-15" value=" Edits "
ng-click="EditValueSalComponent(T,p,K)" id="{{'in'+T.id}}"/>
<div ng-init="hideinputbox(T)"></div>
JS
$scope.hideinputbox = function (k) {
k.hideMe=!k.hideMe
}
I totally agree with the answer provided by #anik, but just to add on. Whenever you are performing an operation out of the context of angular (via a 3rd party lib or framework like jQuery). The scope values would not be updated as the digest cycle is not triggered . Thats why it is important that you always stay within the angulars execution context.

Javascript update razor variable using onclick element

Is it possible to update a razor variable using onclick on a element?
MVC VIEW:
#{
string iconNumber = "1";
}
<button type="submit" onclick="#iconNumber = '2'; alert('#iconNumber');"></button>
Console error:
Uncaught ReferenceError: Invalid left-hand side in assignment
Thanks
I am not able to understand from your comments for what purpose you trying to update the razor variable, but if you really wants to update your razor variable from 1 to 2 (from your question), then i would suggest to try like below
#{
int iconNumber = 1;
}
then,
<button type="submit" onclick="#(iconNumber++); alert('#iconNumber');"></button>
Hope it helps...But also note that iconNumber will increment on each click of button. So, I can help you if you show some more code
When reading this question the day after, one would think I was under the influence of drugs.
I came up with a better solution that only uses javascript variables:
VIEW:
<script>var iconNumber = 0;</script>
#using (Ajax.BeginForm("", "",
new AjaxOptions
{
OnBegin = "$('#iconElement' + iconNumber).attr('class', 'fa fa-spinner fa-spin');",
HttpMethod = "POST"
}))
{
Html input here
<button type="submit" class="btn btn-danger" id="IconElement1" onclick="iconNumber = 1;">
<button type="submit" class="btn btn-danger" id="IconElement2" onclick="iconNumber = 2;">
<button type="submit" class="btn btn-danger" id="IconElement3" onclick="iconNumber = 3;">
}
I can now disable the form after submit to prevent multiple requests. Because I don't start the spinner directly in onclick I don't have to disable the buttons, (spinner wont start).

Categories