Okay, so i am new to ajax and mvc. i have a form which requires me to enter an id in the field and after clicking the search button it retrieves and populates data from the database and displays it in the textfields.
Controller Code
public ActionResult LoadVendorInfo(string vendornumber)
{
var query = from c in db.Vendors
where c.VendorNumber == vendornumber
select c;
return Json(query.FirstOrDefault());
}
Ajax
<script type="text/javascript">
$(document).ready(function () {
$("#searchvendor").click(function () {
var vendornumber = $('#vendornumber').val();
$.ajax({
cache: 'false',
type: "POST",
data: { "vendornumber": vendornumber },
url: '#Url.Action("LoadVendorInfo", "Vendors")',
datatype: 'json',
"success": function (data) {
if (data != null) {
var vdata = data;
$("#companyname").val(vdata[0].companyname);
$("#regnum").val(vdata[0].regnum);
$("#email").val(vdata[0].email);
$("#contactnum").val(vdata[0].contactnum);
$("#refnum").val(vdata[0].refnum);
}
}
})
})
})
I try to use ng-tags-input with a returned Json list by an api controller .net Mvc 6. My list is created in json but when try to display this list with the autocompletion , nothing works. My autocomplete list isn't displayed and I don't have error in chrome console.
So this is an object of my list :
[{
"ShopID":1,
"CompanyID":1,
"RegionID":1,
"Name":"Les Pieux",
"Town":"Les Pieux",
"Address":null,
"ZipCode":null,
"CreateDate":"2006-01-01T00:00:00",
"ModificationDate":"2006-09-29T00:00:00",
"LastModificationUserID":1,
"PhoneNumber":null,
"Fax":null,
"Email":null,
"CEmployeeShop":null
}]
This is my method in my controller:
$scope.tokenShops = [];
$scope.loadJsonShops = function(query)
{
//$scope.shops contains my list of shops in json format.
return $scope.shops;
}
And the tag in Html:
<div ng-controller="EmployeesCtrl">
<tags-input ng-model="tokenShops"
display-property="Name"
Placeholder="Ajouter un magasin"
add-from-autocomplete-only="true">
<auto-complete resource="loadJsonShops($query)"></auto-complete>
</tags-input>
</div>
This is my code that populates $scope.shops
Api Controller:
public IEnumerable<Shop> Get()
{
using (LSContext db = new LSContext())
{
var listShop = db.Shops.ToList();
return listShop;
}
}
angular shopCtrl:
function ShopsCtrl($scope, $http, $rootScope) {
function getShopsList() {
var reqGetShops = $http({ url: 'api/Shops' });
reqGetShops.success(function (data) {
$scope.shops = data;
$rootScope.$broadcast("getListShops", { list: data });
});
}
//with api controller the list is returned in json format. I tried an another method to fill my list with an convertion that I do and it doesn't work.
angularjs EmployeeCtrl :
$scope.$on("getListShops", function (event, args) {
$scope.shops = args.list;
$scope.selectShop = args.list[0];
})
But I don't think that my problem from my json list.
I hope someone can help me . Have a nice day.
I resolve my problem with a directive:
angular.module('TagsDirective', ['myResources', 'resourcesManagerGet', 'translateI18n'])
.directive('tags', function ($http, $q) {
return {
restrict: 'E',//restraint pour les éléments du dom
template: '<tags-input ng-model="SShops" key-property="ShopID" display-property="Name" placeholder="{{\'AddShop\' | i18n}}" add-from-autocomplete-only="true"><auto-complete source="loadTags($query)"></auto-complete></tags-input>',
scope: false,
link: function (scope, el) {
scope.loadTags = function (query) {
var deferred = $q.defer();
var reqGetShops = $http({ url: 'api/Shops/GetListShopFiltered', params: { 'query': query } });
reqGetShops.success(function (data) {
deferred.resolve(data);
});
return deferred.promise;
}
}
}
});
and in Html:
<tags></tags>
g0loob : thanks for your help, but now you can put an array of objects and use the attribute display-property to choose the text property to display.
example:http://mbenford.github.io/ngTagsInput/demos and look the tags input with custom object.
auto-complete requires array of objects with at least one property named "text" (just like tags-input), if you are not using your template for auto-complete or tags-input. And you also need to filter your result for auto-complete in order to work properly. Also see this link.
angular.module('TagsDirective', ['myResources', 'resourcesManagerGet', 'translateI18n'])
.directive('tags', function ($http, $q) {
return {
restrict: 'E',//restraint pour les éléments du dom
template: '<tags-input ng-model="SShops" key-property="ShopID" display-property="Name" placeholder="{{\'AddShop\' | i18n}}" add-from-autocomplete-only="true"><auto-complete source="loadTags($query)"></auto-complete></tags-input>',
scope: false,
link: function (scope, el) {
scope.loadTags = function (query) {
var deferred = $q.defer();
var reqGetShops = $http({ url: 'api/Shops/GetListShopFiltered', params: { 'query': query } });
reqGetShops.success(function (data) {
deferred.resolve(data);
});
return deferred.promise;
}
}
}
I would like to display data returned from service call into view:
Service Code :
.service('HomeExchangeList', function ($rootScope, $http, $log) {
this.getHomeExchange = function() {
var rates = $http({
method: 'GET',
url: 'http://localhost:8080/feeds/homerates_android.php'
}).success(function (data) {
$log.log(data);
return data;
});
return homeRates;
};
})
JSON Data returned by service
{
"record":[
{
"Name":"GBP\/USD",
"Ticker":"GBP\/USD",
"Price":"0.5828",
"Open":"0.5835",
"High":"0.5848",
"Low":"0.5828",
"PercentagePriceChange":"0.1371",
"Movement":"0.0800",
"DateStamp":"2014\/07\/09",
"TimeStamp":"22:15:00"
},
{
"Name":"EUR\/USD",
"Ticker":"EUR\/USD",
"Price":"0.7330",
"Open":"0.7344",
"High":"0.7351",
"Low":"0.7327",
"PercentagePriceChange":"0.2585",
"Movement":"0.1900",
"DateStamp":"2014\/07\/09",
"TimeStamp":"22:15:00"
},
{
"Name":"GHS\/USD",
"Ticker":"GHS\/USD",
"Price":"3.3350",
"Open":"3.2650",
"High":"3.3500",
"Low":"3.2650",
"PercentagePriceChange":"0.8915",
"Movement":"3.0000",
"DateStamp":"2014\/07\/09",
"TimeStamp":"22:15:00"
},
{
"Name":"KES\/USD",
"Ticker":"KES\/USD",
"Price":"87.7000",
"Open":"86.2970",
"High":"87.6500",
"Low":"86.1800",
"PercentagePriceChange":"0.0661",
"Movement":"5.8000",
"DateStamp":"2014\/07\/09",
"TimeStamp":"22:15:00"
},
{
"Name":"MUR\/USD",
"Ticker":"MUR\/USD",
"Price":"30.2925",
"Open":"29.1460",
"High":"29.4300",
"Low":"29.0500",
"PercentagePriceChange":"-0.0909",
"Movement":"-2.7500",
"DateStamp":"2014\/07\/09",
"TimeStamp":"22:15:00"
},
{
"Name":"MWK\/USD",
"Ticker":"MWK\/USD",
"Price":"393.5000",
"Open":"393.3900",
"High":"393.3900",
"Low":"385.0000",
"PercentagePriceChange":"-0.2548",
"Movement":"-100.0000",
"DateStamp":"2014\/07\/09",
"TimeStamp":"22:15:00"
},
{
"Name":"NGN\/USD",
"Ticker":"NGN\/USD",
"Price":"162.3000",
"Open":"160.0600",
"High":"162.4000",
"Low":"160.0600",
"PercentagePriceChange":"0.2459",
"Movement":"40.0000",
"DateStamp":"2014\/07\/09",
"TimeStamp":"22:15:00"
},
{
"Name":"ZAR\/USD",
"Ticker":"ZAR\/USD",
"Price":"10.6659",
"Open":"10.6751",
"High":"10.7162",
"Low":"10.6523",
"PercentagePriceChange":"0.9840",
"Movement":"10.6000",
"DateStamp":"2014\/07\/09",
"TimeStamp":"22:15:00"
},
{
"Name":"ZMK\/USD",
"Ticker":"ZMK\/USD",
"Price":"47.7014",
"Open":"47.3850",
"High":"47.7000",
"Low":"46.8900",
"PercentagePriceChange":"0.0067",
"Movement":"0.3165",
"DateStamp":"2013\/07\/27",
"TimeStamp":"01:55:00"
}
]
}
Controller code
function HomeCtrl($scope, Page, $location, HomeExchangeList) {
$scope.rates = HomeExchangeList.getHomeExchange();
$scope.$on('HomeExchangeList', function (event, data) {
$scope.exchangeRates = data;
});
}
View
<ul id="home-rates" ng-repeat="rate in exchangeRates">
<li><span class='rate-symbol'>{{rate.Name}}</span><span class='rate-amount'>{{rate.Price}}</span></li>
</ul>
I would like to display the data returned by in the service in the view but it doesn't seem to be working. Please help
First, $http invocations all return a promise, not the result of your request. Your service should just return the result of the $http call, and your controller needs to attach a .success handler to receive the data and set it on the scope of your controller.
.service('HomeExchangeList', function ($rootScope, $http, $log) {
this.getHomeExchange = function() {
var rates = $http({
method: 'GET',
url: 'http://localhost:8080/feeds/homerates_android.php'
}).success(function (data) {
$log.log(data);
// removed your return data; it doesn't do anything, and this success is only added to log the result. if you don't need the log other than for debugging, get rid of this success handler too.
});
return rates;
};
})
function HomeCtrl($scope, Page, $location, HomeExchangeList) {
HomeExchangeList.getHomeExchange().success(function(data) {
$scope.exchangeRates = data;
});
}
Second, the root of your JSON is not an array, so you can't enumerate through just exchangeRates alone. Perhaps you meant exchangeRates.record.
try to assign data.record to $scope.exchangeRates instead of data... as data doesnt hold the array of records... it holds record which then holds the array
First of all, your service function always returns undefined:
var rates = ...,
return homeRates;
It should be
return rates;
Second, once that is fixed, the service doesn't return data. It returns a promise, and you can't iterate on a promise. What you need in the controller is:
HomeExchangeList.getHomeExchange().then(function(data) {
$scope.rates = data.record;
}
The call to $scope.$on doesn't make any sense. $scope.$on is used to listen for events. Not to get data from a promise.
And finally, your view must iterate over these retes, and not over exchangeRates:
ng-repeat="rate in rates">
I have below ajax query which returns me json from controller
$(document).ready(function () {
$.getJSON(
"api/OutletPOC/GetHomeTab?bizId=1",
function (data) {
$("#homeTabDesc").append(data.HomeDesc);
$(".test").hide();
$("#hometabcontent").show();
});
});
the controller action is as below
[System.Web.Http.ActionName("GetHomeTab")]
public HomeTabModel GetHomeTab(int bizId)
{
var outlet = db.Info.Where(t => t.BizId == bizId).SingleOrDefault();
return new HomeTabModel
{
HomeDesc = outlet.BizHomeDesc,
HomeTabText = outlet.BizHomeTabText
};
}
Now my question is: curently i am sending hard coded value of bizId to web api. I want to send this value dynamically. How can i achieve this? I have that value in my route config file. The code is as below-
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{bizId}",
defaults: new { controller = "Home", action = "Index", bizId = 1 }
);
}
I am new to this. Please help! Thanks in advance!
no, actually after much research, i came up with this solution and this works fine for me....
In controller,
public ActionResult Index(int bizId)
{
ViewBag.BizId = bizId;
return View();
}
and in View,
$(document).ready(function () {
$.getJSON(
"api/OutletPOC/GetHomeTab?bizId=#ViewBag.BizId",
function (data) {
$("#homeTabDesc").append(data.HomeDesc);
$(".test").hide();
$("#hometabcontent").show();
});
});
You can pass a data object as part of the GetJson call.
$(document).ready(function () {
$.getJSON(
"api/OutletPOC/GetHomeTab",{bizId : 1},
function (data) {
$("#homeTabDesc").append(data.HomeDesc);
$(".test").hide();
$("#hometabcontent").show();
});
});
Taking this one step further you could wrap this in a function.
function makeCall(id)
{
$.getJSON("api/OutletPOC/GetHomeTab",{bizId : id},
function (data) {
$("#homeTabDesc").append(data.HomeDesc);
$(".test").hide();
$("#hometabcontent").show();
});
}
Also look into using promises.
$.getJSON().then().done();
I have a very complicated post using jquery validation and an AJAX post that gets a JSON response back from the server and puts it in a jqGrid... But it seems as though my onsuccess is never being called at any point...
$(document).ready(function () {
$("#formSearchByMRN").validate({
rules: {
MRN: { required: true, minLength: 6 }
},
messages: {
MRN: 'Please Enter a Valid MRN'
},
submmitHandler: function (form) {
e.preventDefault();
animateLoad();
debugger;
var theURL = form.action;
var type = form.methd;
var data = $(this).serialize();
$.ajax({
url: theURL,
type: type,
data: data,
dataType: "json",
success: function (result) {
debugger;
var data = result;
if (data.split(':')[0] == "Empty record") {
$("#list").unblock();
$('#resultDiv').html('<b><p style="color: #ff00ff">' + data + '</p></b>');
setTimeout(function () {
$('#resultDiv').html("");
}, 10000);
}
else {
binddata(data);
}
}
});
return false;
}
});
});
It would seem I never get into the submmitHandler. Event though I manage to get to my server side function and it does return, it prompts my UI to save a file which contains the JSON results...
No good.
Am I going about validating my form before my AJAX post the wrong way? Does anybody have any advice about best practices in validating AJAX posts?
UPDATE... MARK R. This is what I attempted. It seems as though I never get in to the success function... My suspicion is that I am not really posting via ajax, but instead doing a full post. I don't understand why.
$('#submitMRN').click(function () {
$("#formSearchByMRN").validate({
rules: {
MRN: { required: true, minLength: 6 }
},
messages: {
MRN: 'Please Enter a Valid MRN'
}
});
if ($('#submitMRN').valid()) {
$("#list").block({ message: '<img src="../../Images/ajax-loader.gif" />' });
$.ajax({
url: $('#submitMRN').action,
type: $('#submitMRN').method,
data: $('#submitMRN').serialize(),
dataType: "json",
success: function (result) {
debugger;
var data = result;
if (data.split(':')[0] == "Empty record") {
$("#list").unblock();
$('#resultDiv').html('<b><p style="color: #ff00ff">' + data + '</p></b>');
setTimeout(function () {
$('#resultDiv').html("");
}, 10000);
}
else {
binddata(data);
}
}
});
}
});
$('#SubmitButton').click(function (){
//Check that the form is valid
$('#FormName').validate();
//If the Form is valid
if ($('#FormName').valid()) {
$.post(...........
}
else {
//let the user fix their probems
return false;
}
});//$('#SubmitButton').click(function (){