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>

A controller with this name is not registered in Angulaj Js with Sql Database

I am currently learning Angular Js . I added the ADO.NET Entitly model in my project and Angular Js Packages as well. I am unable to do insert like user registration from my registration page. I lunch the developer tools and its showing following error ...
Module.js:5 Uncaught ReferenceError: angular is not defined
at Module.js:5
at Module.js:60
user.png Failed to load resource: the server responded with a status of 404 (Not Found)
load.png Failed to load resource: the server responded with a status of 404 (Not Found)
angular.min.js:42 Uncaught Error: [$injector:modulerr]
Here is my Code in Module.js file under MyScript Folder..
var app;
(function () {
var app = angular.module("myApp", []);
app.controller("Ctrl", ['$scope', function ($scope){
$scope.SaveUser = function () {
$("#divLoading").show();
var User = {
FName: $scope.fName,
LName: $scope.lName,
Email: $scope.uEmail,
Password: $scope.uPwd,
UserName: $scope.uName
};
var response = myService.AddUser(User);
response.then(function (data) {
if (data.data == "1") {
$("#divLoading").hide();
clearFields();
alert("User Created !");
window.location.href = "/Register/Login";
}
else if (data.data == "-1") {
$("#divLoading").hide();
alert("user alraedy present !");
}
else {
$("#divLoading").hide();
clearFields();
alert("Invalid data entered !");
}
});
}
function clearFields() {
$scope.fName = "";
$scope.lName = "";
$scope.Email = "";
$scope.Password = "";
$scope.UserName = "";
}
}]);
app.service("myService", function ($http) {
this.AddUser = function (User) {
var response = $http({
method: "post",
url: "/Register/AddUser",
data: JSON.stringify(User),
dataType: "json"
});
return response;
}
})
})();
Here is my code in controller.The name of my controller is RegisterController ..
public class RegisterController : Controller
{
public ActionResult Register()
{
return View();
}
//To check that user entered is already present or not.
public bool CheckUser(string user)
{
bool Exists = false;
using (HalifaxDatabaseEntities context = new HalifaxDatabaseEntities())
{
var uName = context.UserLogins.Where(x => x.UserName == user).ToList();
if (uName.Count != 0)
{
Exists = true;
}
}
return Exists;
}
//For saving the user details in database table.
public string AddUser(UserLogin usr)
{
if (usr != null)
{
if (CheckUser(usr.UserName) == false)
{
using (HalifaxDatabaseEntities context = new HalifaxDatabaseEntities())
{
UserLogin createUser = new UserLogin();
createUser.UserName = usr.UserName;
createUser.Firstname = usr.Firstname;
createUser.Lastname = usr.Lastname;
createUser.Email = usr.Email;
createUser.DateTimeCreated = DateTime.Now;
createUser.Password = Utility.Encryptpassword(usr.Password);
context.UserLogins.Add(createUser);
context.SaveChanges();
}
return "User created !";
}
else
{
return "User already present !";
}
}
else
{
return "Invalid Data !";
}
}
}
}
Here is HTML CODE ...
#{
Layout = null;
}
<html ng-app="myApp">
<head>
<title>Register</title>
<script src="~/Scripts/MyScript/Module.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div class="container" ng-controller="myCntrl">
<br />
<div class="row">
<img src="~/Content/Images/user.png" /><h4>Register User</h4>
<hr />
<br />
<div class="col-md-6">
<form name="userForm" novalidate>
<div class="form-horizontal">
<div class="form-group">
<div class="row">
<div class="col-md-3" style="margin-left: 15px; color: #5bc0de;">
First Name :
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First Name" name="fName" ng-model="fName" required autofocus />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3" style="margin-left: 15px; color: #5bc0de;">
Last Name :
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Last Name" name="lName" ng-model="lName" required autofocus />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3" style="margin-left: 15px; color: #5bc0de">
Email :
</div>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="User's Email" name="uEmail" ng-model="uEmail" required autofocus />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3" style="margin-left: 15px; color: #5bc0de;">
Username :
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Username" name="uName" ng-model="uName" required autofocus />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-3" style="margin-left: 15px; color: #5bc0de;">
Password :
</div>
<div class="col-md-6">
<input type="password" class="form-control" placeholder="Password" name="uPwd" ng-model="uPwd" required autofocus />
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-3">
<input type="button" value="Save" ng-click="SaveUser();" class="btn btn-success" />
</div>
<div class="col-md-3">
#Html.ActionLink("Sign in", "Login", "Register", new { #class = "btn btn-info" })
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: #666666; z-index: 30001; opacity: .8; filter: alpha(opacity=70); display: none">
<p style="position: absolute; top: 30%; left: 45%; color: White;">
please wait...<img src="~/Content/images/load.png">
</p>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Here is Screen Shot when I run the application Click here ]1
Any one help me to solved this Error

remove the first var app;
It is like you are declaring the app twice, try this
var app = angular.module("myApp", [])
.controller('myCntrl',['$scope',function($scope){
// your code here
}])
.service();
UPDATE
In the Module.js, you have defined the name of your controller app.controller("Ctrl",), but in the html File when you're calling it, you wrote ng-controller='myCntrl'
You have to give them the same name, that's it

How to differentiate between selection and save in MVC post

I have a form which has a DropDownList to select users and a form for user data. All controls are nested inside a form.
Cureently user DropDownList submits the form to notify about user selection to fetch appropriate data.
I want have a Button type(submit) which saves the data for the current user. Since both controls are in the same form and they both do submit, how can I differentiate if I am trying to select the user or saving the data in my action?
I have tried creating two forms as follows:
#model MyApp.Models.UserModel
#{
ViewBag.Title = "Profiles";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript" src="chosen.jquery.js"></script>
<script type="text/javascript" src="bootstrap-switch.js"></script>
<link rel="stylesheet" href="chosen.css" />
<link rel="stylesheet" href="bootstrap-switch.css" />
<style type="text/css">
.chosen-search{
display: none;
}
.form-group label{
margin-top: 10px;
}
.row{
margin-bottom: 20px;
}
th{
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#CurrentUserId').chosen({placeholder_text_single: "Select a user"});
$('#CurrentGroupId').chosen({placeholder_text_single: "Select a group"});
$('#CurrentRoleId').chosen({placeholder_text_single: "Select a role"});
$('#IsActive').bootstrapSwitch({
onColor: "success",
offColor: "danger",
onText: "ACTIVE",
offText: "PASSIVE",
animate: false,
handleWidth: 60
});
$('.authorizationCheckBox').bootstrapSwitch({
onColor: "success",
offColor: "danger",
onText: "Y",
offText: "N",
animate: false,
size: "mini"
});
});
</script>
#using (Html.BeginForm("Profile", "User"))
{
#Html.AntiForgeryToken()
<div class="row">
<div class="col-sm-3">
<div class="row">
<label class="control-label">Selected user :</label>
</div>
</div>
<div class="col-sm-9">
<div class="row">
#Html.DropDownListFor(x => x.CurrentUserId, new SelectList(Model.AllUsers, "Id", "Username"), "", new { #class = "form-control", onchange = #"this.form.submit();" })
</div>
</div>
</div>
}
#using (Html.BeginForm("SaveProfile", "User"))
{
if (!string.IsNullOrWhiteSpace(Model.CurrentUser))
{
<div class="row">
<div class="col-sm-3">
<div class="row">
#if (string.IsNullOrWhiteSpace(Model.UserImageUrl))
{
<img src="no-user.png" class="img-circle" alt="..." style="width: 35%; display: block; margin: auto;">
<button type="button" class="btn btn-primary" style="display: block; margin: auto; margin-top: 10px;">
<span class="glyphicon glyphicon-upload"></span> Upload avatar
</button>
}
else
{
<img src="#Model.UserImageUrl" class="img-circle" alt="..." style="width: 35%; display: block; margin: auto;">
<button type="button" class="btn btn-primary" style="display: block; margin: auto; margin-top: 10px;">
<span class="glyphicon glyphicon-retweet"></span> Change avatar
</button>
}
</div>
<div class="row">
<div class="input-group" style="margin: 0 auto;">
<div class="switch-button xlg showcase-switch-button">
#Html.CheckBoxFor(x => x.IsActive)
</div>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-2">Username :</label>
<div class="col-sm-10">
<input id="CurrentUser" name="CurrentUser" class="form-control form-control-flat" value="#Model.CurrentUser" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-2">E-mail :</label>
<div class="col-sm-10">
<input id="EMail" name="EMail" class="form-control form-control-flat" value="#Model.EMail" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-2">Membership :</label>
<div class="col-sm-10">
#Html.DropDownListFor(x => x.CurrentGroupId, new SelectList(Model.AllGroups, "Id", "Name"), "", new { #class = "form-control" })
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-2">Role :</label>
<div class="col-sm-10">
#Html.DropDownListFor(x => x.CurrentRoleId, new SelectList(Model.AllRoles, "Id", "Name"), "", new { #class = "form-control" })
</div>
</div>
</div>
</div>
</div>
<button id="btnSave" type="submit" class="btn btn-info" style="float: right; margin-right: 10px; margin-bottom: 40px;">
<span class="glyphicon glyphicon-trash"></span>Save changes
</button>
}
}
[HttpGet]
public ActionResult Profile()
{
return View(CreateInitialUserModel());
}
[HttpPost]
public ActionResult Profile(UserModel model)
{
model = GetUserModel(model.CurrentUserId.Value);
ModelState.Clear();
return View(model);
}
[HttpPost]
public ActionResult SaveProfile(UserModel model)
{
SaveModel(model)
return RedirectToAction("Profile");
}
But the problem is, at HttpPost of Profile action works well. But when I click the Save button and the HttpPost SaveProfile action is called, input parameter model does not have the values set on the screen.

I would actually use two forms. Not only does it relieve your problem here, as you can just add a hidden field or something to each form to indicate which was submitted, but it prevents other issues you're likely to run into, like failing validation on any required user fields in the create form, when you just select a user, because no data was submitted for those fields.
Short of that, just use whatever JavaScript you're already using to automatically submit when an option is selected from the drop down to change a value of a hidden field or otherwise modify the post data before it's submitted.

Why not use jquery for data retrieval? You could switch you dropdown to instead call a jquery function that performs an ajax call to a controller method that retrieves the relevant user data. Then, you can bind the data to the appropriate fields on the page using jquery. You would then only have one submit button on your view, handled through the normal mvc form process.

-in drop downdown list change event ,you should store UserID to a variable like global variable or hiddenfields.
-Create a Button
in function=
function submitvalues()
{
//get stored userID here from variable
//perform submit here
}

MVC bootstrap popup opens multiple times

When I click in a button to open my popup form, it seems that it is being opened multiple times and in the browser console I get the error "(3) Uncaught TypeError: Cannot read property 'find' of null". What am I missing?
View containing the button:
<script src="~/Scripts/myscripts/JobOffers/JobOfferPopup.js"></script>
<div id="createJobOfferModal"></div>
<div id="jobOfferButtonsBar">
<div style="float:left; padding: 0px 5px 5px 5px;">
<a class="btn btn-default" id="createJobOfferBtn" href="" data-url="#Url.Action("CreateOrUpdate", "JobOffers", new { jobOfferId = 0 })">Create</a>
</div>
</div>
Popup View Code:
<div class="modal fade bs-example-modal-lg jobOfferForm" tabindex="-1" role="dialog" aria-labelledby="createJobOffer" aria-hidden="true">
<div class="modal-dialog modal-lg" style="overflow-y:auto; max-height:70vh">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="createJobOfferLabel"> #Model.PopupTitle </h4>
</div>
<div class="modal-body" data-val="5">
<form class="form-horizontal" role="form">
<div class="form-group" style="display:none;">
<label class="col-sm-2 control-label">#Html.LabelFor(model => model.Id)</label>
<div class="col-sm-10">
#Html.HiddenFor(model => model.Id, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">#Html.LabelFor(model => model.Client) </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Client" value="#Model.Client" style="width:25%;">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveJobOfferBtn" data-url="#Url.Action("CreateOrUpdate", "JobOffers" )">Save changes</button>
</div>
</div>
</div>
</div>
Jquery Code:
$(document).ready(function () {
$('#createJobOfferBtn').click(function () {
$.ajax({
url: $(this).data("url"),
type: 'GET',
cache: false,
success: function (result) {
console.log("opened");
$("#createJobOfferModal").html(result).find('.modal').modal({
show: true
});
}
});
return false;
});
});