We Keep Coding

Passing data to controller in ASP.NET MVC using C#

What am I doing wrong?
I want to pass Id to the controller where I can use it.
My controller
[HttpGet]
public ActionResult ListCoach(int id)
{
List<Training> ListCoachTraining = _TraningService.ListCoach(id);
var ChoachList = _TraningService.Coach(id);
return View(ChoachList);
}
My view - what is correct way call the script? It doesn't work right now:
<div class="container">
<div class="row">
#foreach (var item in Model)
{
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="~/Content/no_foto.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">#item.Name</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div id="textButton">
Go to anywhere
<a id="btnSave" class="btn btn-primary">Go to anywhere</a>
<input class="btn btn-primary" type="button" id="btnSave" value="Save" />
</div>
</div>
</div>
</div>
}
</div>
</div>
//call the script
<script src="#Url.Content("~/scripts/ManagerAccount.js")" type="text/javascript"></script>
My script - I use Ajax for it. There I want to pass id to the controller:
function PassToContoller(data) {
$("#btnSave").click(function () {
$.ajax({
type: "Get",
url: '/TrainingType/ListCoach',
data: { id: data },
success: function (data) {
window.location.href = '/appUser/ManageAccount';
//return data;
},
error: function () {
$("#loader").fadeOut("slow");
console.log("error1");
}
});
});
};

You haven't call the function accordingly. You are expecting your PassToContoller function should invoke while you click on save in your case either you have to call this function with btnSave onlick or onClick="PassToContoller(#item.Name)"
I am showing you both here:
When onClick="PassToContoller(#item.Name)" In Line:
Razor HTML
<div class="container">
<div class="row">
#foreach (var item in Model)
{
<div class="col-md-4">
<div class="card" style="width: 18rem;">
#*<img src="~/Content/no_foto.png" class="card-img-top" alt="...">*#
<div class="card-body">
<h5 class="card-title">#item.Name</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div id="textButton">
Go to anywhere
<a id="btnSave" class="btn btn-primary">Go to anywhere</a>
<input class="btn btn-primary" type="button" id="btnSave" onClick="PassToContoller(#item.Name)" value="Save" />
</div>
</div>
</div>
</div>
}
</div>
</div>
Script:
<script>
function PassToContoller(data) {
alert(data);
$.ajax({
type: "GET",
url: '/ListCoachController/ListCoach',
data: { id: data },
success: function (data) {
console.log(data);
window.location.href = '/appUser/ManageAccount';
return data;
},
error: function () {
$("#loader").fadeOut("slow");
console.log("error1");
}
});
}
</script>
Output:
Aother way btnSave Onlick:
In this you need few modifications:
Need to introduce a input type text which will be hidden it will
contrain a value like this <input type="text" id="getValue" value="#item.Name" hidden /> and will pass that hidden value when you
would click the button.
Another thing is your btnSave seems you have used same for other button as well so your onclick function will getConfused which event to fired. So need to set unique btn id Now rest of the same like below:
Razor HTML
<div class="container">
<div class="row">
#foreach (var item in Model)
{
<div class="col-md-4">
<div class="card" style="width: 18rem;">
#*<img src="~/Content/no_foto.png" class="card-img-top" alt="...">*#
<div class="card-body">
<h5 class="card-title">#item.Name</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div id="textButton">
Go to anywhere
<a id="btnSave" class="btn btn-primary">Go to anywhere</a>
<input class="btn btn-primary" type="button" id="btnNewSave" value="Save" />
<input type="text" id="getValue" value="#item.Name" hidden />
</div>
</div>
</div>
</div>
}
</div>
</div>
Script:
#section scripts {
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
$("#btnNewSave").click(function () {
var data = $("#getValue").val();
$.ajax({
type: "GET",
url: '/ListCoachController/AnotherListCoach',
data: { id: data },
success: function (data) {
console.log(data);
window.location.href = '/appUser/ManageAccount';
return data;
},
error: function () {
$("#loader").fadeOut("slow");
console.log("error1");
}
});
});
});
</script>
}
Update:
Based on your new requirement on comment you just need to update your HTML like below:
<div class="container">
<div class="row">
#foreach (var item in Model)
{
<div class="col-md-4">
<div class="card" style="width: 18rem;">
#*<img src="~/Content/no_foto.png" class="card-img-top" alt="...">*#
<div class="card-body">
<h5 class="card-title">#item.Name</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div id="textButton">
Go to anywhere
<a class="btn btn-primary" onClick="PassToContoller(#item.Name)">Go to anywhere</a>
<input class="btn btn-primary" type="button" onClick="PassToContoller(#item.Name)" value="Save" />
<input type="text" id="getValue" value="#item.Name" hidden />
</div>
</div>
</div>
</div>
}
</div>
</div>
Note: You have to get rid of id="btnSave" from all the <a> and <button> and need to replace with
onClick="PassToContoller(#item.Name)" it will pass all of your
value. No matter how many cycle you have.
Update with Comment Can I do without?:
HTML:
<div class="container">
<div class="row">
#foreach (var item in Model)
{
<div class="col-md-4">
<div class="card" style="width: 18rem;">
#*<img src="~/Content/no_foto.png" class="card-img-top" alt="...">*#
<div class="card-body">
<h5 class="card-title">#item.Name</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<div id="textButton">
<a href="#" class="btn btn-primary" >Go to anywhere</a>
<a class="btn btn-primary">Go to anywhere</a>
<input class="btn btn-primary" type="button" value="Save" />
<input type="text" id="getValue" value="#item.Name" hidden />
</div>
</div>
</div>
</div>
}
</div>
</div>
Script:
#section scripts {
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script>
function PassToContoller(data) {
alert(data);
$.ajax({
type: "GET",
url: '/UserLog/AnotherListCoach',
data: { id: data },
success: function (data) {
console.log(data);
window.location.href = '/appUser/ManageAccount';
return data;
},
error: function () {
$("#loader").fadeOut("slow");
console.log("error1");
}
});
}
$(document).ready(function () {
$("a").click(function () {
var data = $("#getValue").val();
var callFunc = PassToContoller(data)
});
$(":button").click(function () {
var data = $("#getValue").val();
var callFunc = PassToContoller(data)
});
});
</script>
}
Hope it would guide you accordingly. You can used either of the approach.

With GET method, you should pass the data via query string
/TrainingType/ListCoach?id=1
In ASP.NET MVC, we have default route template is {Controller}/{Action}/{id}
So, alternative we can use this URL
/TrainingType/ListCoach/1

ASP.NET Core MVC autocomplete partial view not showing result

I have a partial view that will not show the result that it gets from the controller. This is in ASP.NET Core MVC 2.1.
The base for the code is from here.
Here is the partial view:
#model City
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Grad</h4>
</div>
<div class="modal-body">
<form asp-controller="City" id="TestForm">
<div class="form-group">
<label class="control-label">Name</label>
<input asp-for="Name" class="form-control" id="CityName" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">Postal Code</label>
<input asp-for="PostalCode" class="form-control" id="PostalCode" onkeypress="return isNumberKey(event)" />
<span asp-validation-for="PostalCode" class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">Country TEST</label>
<input type="text" id="txtCounty" name="CountyName"/>
<input type="hidden" id="hfCountry" name="CountyID" />
<span asp-validation-for="CountryID" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-default" id="SaveCity" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="CloseCity" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The part in question is:
<div class="form-group">
<label class="control-label">Country TEST</label>
<input type="text" id="txtCounty" name="CountyName"/>
<input type="hidden" id="hfCountry" name="CountyID" />
<span asp-validation-for="CountryID" class="text-danger"></span>
</div>
It does not want to show the result it gets.
The jQuery method I use is, it is inside the Index.cshtml scripts:
$(document).on("focus", "#txtCountry", function (e) {
$("#txtCountry").autocomplete({
source: function (request, response) {
$.ajax({
url: '/City/AutoComplete/',
type: "POST",
data: { "prefix": request.term },
success: function (data) {
response($.map(data, function (item) {
return item;
}))
}
});
},
select: function (e, i) {
$("#hfCountry").val(i.item.val);
},
minLength: 1
});
});
When I put this code:
<input type="text" id="txtCounty" name="CountyName"/>
<input type="hidden" id="hfCountry" name="CountyID" />
outside the partial view it shows the searched for thing.
Here is controller for it:
[HttpPost]
public JsonResult AutoComplete(string prefix)
{
var countries = (from country in this._dbContext.Countries
where country.Name.ToLower().Contains(prefix.ToLower())
select new
{
label = country.Name,
val = country.ID
}).ToList();
return Json(countries);
}
Can anybody help I just can not find the answer.

I found the answer.
The text was showing behind the modal, that is way I could not see it.
<style>
.ui-autocomplete {
z-index: 5000;
}
</style>
Put that inside the _Layout.cshtml file, inside the enviroment.
<environment include="Development">
... some stuff...
<style>
.ui-autocomplete {
z-index: 5000;
}
</style>
... some ,oe stuff...
</environment>

ASP.NET Core 3.0 Razor JQuery validation rules on partial page

I have a page in ASP.NET Core 3.0 with RAZOR(no MVC), with a partial page loaded with AJAX; load works well but validation rules no. Validation with "required" notation on otherinput fields also works well.
This is my main page:
<a class="nav-link showposition text-dark text-center p-0 collapsed" id="ShowPosition" href='ShowPosition'>#item.Sale_Order_Position</a>
<div class="card shadow mb-4 collapse" aria-labelledby="ShowPosition">
<div id="DetailContents">
</div>
</div>
<script>
jQuery(function($) {
$('.showposition').on('click', function (e) {
e.preventDefault();
$.ajax({
url: $(this).attr('href'),
type: 'GET',
cache: false,
headers: {
RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()
}
}).done(function(result) {
$('#DetailContents').html(result);
//Setup Position details
$('#SavePositionForm').SetupPositionDetails();
});
});
(function( $ ){
$.fn.SetupPositionDetails = function () {
$("#SavePositionForm").removeData("validator");
$("#SavePositionForm").removeData("unobtrusiveValidator");
$.validator.unobtrusive.parse("#SavePositionForm");
$("#SavePositionForm").validate({
debug: true,
rules: {
inp_NetPrice: {
required: true
}
}
});
};
})(jQuery);
});
</script>
And this is my Partial View:
<form id="SavePositionForm" class="needs-validation" novalidate>
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="row">
<div class="col div_image pl-0">
<label class="bg-white"><i class="fr fa-newspaper mr-2"></i><localize>Net price</localize></label>
</div>
<div class="col-sm-6 col-md-6">
<input class="form-control form-control-sm" type="number" step="any" name="inp_NetPrice" id="inp_NetPrice" asp-for="#Model.Item1.Net_Price" value="#Model.Item1.Net_Price"/>
</div>
</div>
</div>
</form>
The problem is "inp_NetPrice" validation not working.
I have also try this script, in main partial page(i know, it's not a good idea to put script in partial pages but I would like to try) without success:
$(document).ready(function () {
$("#SavePositionForm").validate({
debug: true,
rules: {
inp_NetPrice: {
required: true
}
}
});
$("#SavePositionForm").removeData("validator");
$("#SavePositionForm").removeData("unobtrusiveValidator");
$.validator.unobtrusive.parse("#SavePositionForm");
});
Any suggestions?
Thanks.
EDIT:
Generated HTML:
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="row">
<div class="col div_image pl-0">
<label class="bg-white"><i class="fa fa-newspaper mr-2"></i>Net price</label>
</div>
<div class="col-sm-6 col-md-6">
<input class="form-control form-control-sm" id="inp_NetPrice" name="inp_NetPrice" value="" type="number" step="any">
</div>
</div>
</div>

Problem fixed removing
name="inp_NetPrice"
because i have
name="inp_NetPrice" id="inp_NetPrice" asp-for="#Model.Item1.Net_Price"

how to get value of the editable text in angular controller

my index page is here
<div ng-app="CommentApp" ng-controller="MyController">
<div class=" col-md-12">
<div class="alert alert-info"><h2 class="text-center">Comment App</h2></div>
<div id="CommentList" class="container col-md-7" scroll="Comments" style="height:650px; overflow:scroll">
<div class="row" style="border:0px solid;padding:20px;" ng-repeat="Comment in Comments | orderBy:'LastUpdateTime'">
<div class="well well-sm row">
<div class="col-md-8">
**<h3><text style="color:mediumpurple;" e-form="rowform" data-ng-model="UpdateCommentText" editable-text="Comment.CommentText">{{Comment.CommentText || 'Empty'}}</text></h3>**
</div>
<div class="col-md-4 pull-right" style="margin-top:17px">
<div class="buttons pull-right">
<form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline">
<button type="submit" ng-disabled="rowform.$waiting" ng-click="EditComment()" class="btn btn-primary">
Save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
Cancel
</button>
</form>
</div>
<div class="buttons pull-right" ng-show="!rowform.$visible">
<button class="btn btn-primary" ng-click="rowform.$show()">Edit</button>
<button class="btn btn-danger" ng-click="RemoveComment(Comment)">Delete</button>
</div>
</div>
</div>
<div class="col-md-12 row" style="margin-bottom:10px" ng-repeat="img in Comment.Images">
<img style="margin-bottom:15px" src="{{img}}" />
</div>
<h2 class="pull-right" style="color:green;font-size:15px; margin-right:20px">By User {{Comment.Id}}</h2>
<h2 class="pull-right" style="color: darkviolet; font-size: 15px; margin-right: 20px">{{Comment.LastUpdateTime.slice(6,-2) | date: 'hh:mm a dd-MMM-yyyy' }}</h2>
<div class="clearfix"> </div>
<hr />
</div>
</div>
</div>
<div class="col-sm-10" style="font-size:17px">
<form novalidate name="f1" ng-submit="AddComment()">
<div style="color: red">{{Message}}</div>
<div class="col-sm-1">
<div class="glyphicon glyphicon-plus" style="height: 50px;border:1px solid; width: 50px; cursor:pointer;" onclick="getFile()">
<div style="height: 0px;width:0px; overflow:hidden;">
<input id="filesel" type="file" name="file" accept="image/*" onchange="angular.element(this).scope().selectFileforUpload(this.files)" required multiple />
</div>
</div>
<span class="error">{{FileInvalidMessage}}</span>
</div>
<div class="col-sm-6 pull-left">
<input type="text" placeholder="Enter Your Comment Here" style="height: 50px;font-size:30px;width:500px" name=" ufiledescription" ng-model="CommentText" class="{{(IsFormSubmitted?'ng-dirty' + (f1.uFileDescription.$invalid?' ng-invalid':''):'')}}" autofocus />
</div>
<div class="col-sm-3 pull-left">
<input class="btn btn-primary" style="height:50px;width:100px" value="Send" id="Submit" type="submit" />
</div>
</form>
</div>
</div>
my angular controller
app.controller("MyController", function ($scope, MyServices,$http) {
// Get All Comments
GetAllComments();
function GetAllComments() {
var getData = MyServices.getComments();
getData.then(function (cmnt) {
$scope.Comments = cmnt.data;
},
function () {
alert('Error in getting Comments');
});
};
// Add New Comment
$scope.AddComment = function () {
var Comment = {
CommentText: $scope.CommentText
};
var getData = MyServices.AddCmnt(Comment);
getData.then(function (ResultMsg) {
GetAllComments();
alert(ResultMsg.data);
});
ClearFields();
$scope.refresh();
};
// Edit The Comment
$scope.EditComment = function () {
Comment =
{
Id: Comment.Id,
CommentText: $scope.UpdateCommentText
}
alert(Comment.CommentText);
//var getData = MyServices.getCommentById(Comment.Id);
var getData = MyServices.EditCmnt(Comment);
getData.then(function (ResultMsg) {
alert(ResultMsg.data);
GetAllComments();
});
};
// Delete The Comment
$scope.RemoveComment = function (Comment) {
var getData = MyServices.DeleteCmnt(Comment);
getData.then(function (ResultMsg) {
alert(ResultMsg.data);
GetAllComments();
},
function () {
alert('Error in Deleting Comment');
});
}
//Clear Fields After Comment Addition
function ClearFields() {
$scope.CommentText = "";
angular.forEach(angular.element("input[type='file']"), function (inputElem) {
angular.element(inputElem).val(null);
});
};
});
in the index page the comment.commenttext which is editable text and coming from database on click of edit there will be a editable text box and after editing the text on click of save button i cant get value of edited text what shpold to in editcomment section to retrieve value of edited text?
i tried $scope.Comment.commenttext but it is undefined..
help me thanks in advance..

You have a double bind here:
<h3>
<text
style="color:mediumpurple;"
e-form="rowform"
data-ng-model="UpdateCommentText"
editable-text="Comment.CommentText"
>
{{Comment.CommentText || 'Empty'}}
</text>
</h3>
So basically you see what is binded with data-ng-model, not experssion in {{ }} Try getting UpdateCommentText value. Maybe this helps.

Microsoft JScript runtime error: Object doesn't support property or method 'validate'

This issue is that i am getting the error, Microsoft JScript runtime error: Object doesn't support property or method 'validate'. Couldn't figure out why. Any suggestions?
<form id="ContactUs" class="float-left" autocomplete="off">
<div class="box-content">
<div id="Department-List" class="field clearfix">
<select id="DepartmentList" size="1" name="DepartmentList" class="required">
<% foreach(var options in (List<string>)ViewBag.DepartmentList) { %>
<option id="<%:options%>" value="<%:options%>" ><%:options%></option>
<% } %>
</select>
</div>
<div class="field clearfix">
<label class="float-left">NAME:</label>
<input type="text" id="Name" class="required full-width text radi-4" minlength="3"/>
</div>
<div class="field clearfix">
<label class="float-left">PHONE:</label>
<input type="text" id="Phone" class="required PhoneNumbers full-width text radi-4" />
</div>
<div class="field clearfix">
<label class="float-left">EMAIL:</label>
<input type="text" id="SendersEmail" class="required email full-width text radi-4"/>
</div>
<div class="field clearfix">
<label class="float-left">ACCOUNT #:</label>
<input type="text" id="AccountNumber" class="full-width text radi-4" />
</div>
<div class="field clearfix">
<label class="float-left">QUESTIONS:</label>
<textarea id="QuestionBox" rows="4" cols="25" class="required full-width text radi-4"></textarea>
</div>
<div class="field clearfix">
<input id="submit-inventory-request-button" type="submit" name="Submit" value="Send" class="submit next-step toggle-btn radi-3 arrow-icon" />
</div>
When I am trying to submit the form I am getting the error from $('#ContactUs').validate() function.
<script type="text/javascript">
$(document).ready(function () {
$('#ContactUs').validate({
errorElement: 'span',
success: 'valid',
error: 'error',
submitHandler: function() {
var contact = {
DepartmentList: $('#DepartmentList').val()
, Name: $('#Name').val()
, Phone: $('#Phone').val()
, SendersEmail: $('#SendersEmail').val()
, RequestersEmail: $('#RequestersEmail').val()
, AccountNumber: $('#AccountNumber').val()
, QuestionBox: $('#QuestionBox').val()
, TermsCheckBox: $('#TermsCheckBox').val()
};
var req;
req = DT.ajaxData('/Ajax/ContactUs/', 'POST', JSON.stringify(contact));
// if the ajax request is successful, then display the success message and redirect the page
req.done(function(data) {
console.log(data);
$("#partial").dialog('close');
$("#SuccessMessage").dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
});
return false;
}
});
})

There is no built-in jQuery function named validate. It's available from several plugins though. For example
http://docs.jquery.com/Plugins/Validation
Have you properly included the plugin's in your page?

If using Visual Studio the simplest way is to use the NuGet extension to download jQuery. If you don't have it you can find it at www.codeplex.com and install it. Then go to Tools -> Library Package Manager -> Manage NuGet Packages within Visual Studio and search for jQuery. Once this is installed, the Script folder within your project will have the required files.
Modify the path within your view.cshtml file to point to the current version of jQuery e.g 1.7.1 in this case