Pass multiple values of the same parameter for search method - ajax

I would like to update my search function, so that it would accept additional parameters, which will be builed dinamically with checkboxes(let's say for a location NY AND Tokio AND Berlin). For now, my controller accepts page number and a search string, which are called with Ajax for infinate pagination.
So my search link is now like: /TopEventsul?searchString=HouseParty
and would like to add more search functions like: /TopEventsul?searchString=HouseParty&Location=London&Location=Tokio
Can u please point me to the right direction or maybe give me some examples?
Bellow is my controller function
// GET: Ul
public ActionResult Index(int? pageNum, string searchString)
{
pageNum = pageNum ?? 0;
ViewBag.IsEndOfRecords = false;
if (Request.IsAjaxRequest())
{
var customers = GetRecordsForPage(pageNum.Value);
ViewBag.IsEndOfRecords = (customers.Any()) && ((pageNum.Value * RecordsPerPage) >= customers.Last().Key);
return PartialView("_TopEventLi", customers);
}
else
{
LoadAllTopEventsToSession(searchString);
ViewBag.TopEvents = GetRecordsForPage(pageNum.Value);
return View("Index");
}
}
public void LoadAllTopEventsToSession(string searchString)
{
var students = from s in db.TopEvents
select s;
if (!String.IsNullOrEmpty(searchString))
{
students = students.Where(s => s.Location.Contains(searchString)
|| s.Title.Contains(searchString));
}
var customers = students.ToList();
int custIndex = 1;
Session["TopEventi"] = customers.ToDictionary(x => custIndex++, x => x);
ViewBag.TotalNumberCustomers = customers.Count();
}
public Dictionary<int, TopEvents> GetRecordsForPage(int pageNum)
{
Dictionary<int, TopEvents> customers = (Session["TopEventi"] as Dictionary<int, TopEvents>);
int from = (pageNum * RecordsPerPage);
int to = from + RecordsPerPage;
return customers
.Where(x => x.Key > from && x.Key <= to)
.OrderBy(x => x.Key)
.ToDictionary(x => x.Key, x => x.Value);
}
Regards!

Here you have Location as fixed parameter, so you can simply do like these,
public ActionResult Index(int? pageNum, string searchString, IEnumerable<string> Location)
{
// Your code
}
if you have any other parameters you can also add them, for exa.
your parameter is param and it's type is int then
public ActionResult Index(int? pageNum, string searchString, int param)
{
// Your code
}
//Ajax Call for Index
function testAjax() {
$.ajax({
url: "#Url.Content("~/Your-Controller/Index")",
data: "pageNum=" + your data for pageNum + "&searchString=" + your searchString + "&param=" + param,
dataType: "json",
type: "Post",
contentType: "application/json; charset=utf-8",
beforeSend: function () {
//Code for before send whatever you have to do.
},
success: function (data) {
//Your code when all ok
},
error: function (response) {
//Your code when error ocure
alert(response.responseText);
},
failure: function (response) {
//your code for failure
alert(response.responseText);
}
})
return false;
}

Related

Post ajax values to MVC Action Result

Ok, so I have the following Ajax get request going to a [HttpPost] controller method in an ASP.NET MVC 5 application.
The javascript function shown here successfully posts the values to the server side:
<script>
function get_row() {
var one = document.getElementById("data_table").rows[1].cells[0].innerHTML;
var two = document.getElementById("data_table").rows[1].cells[1].innerHTML;
var result = one + "," + two;
//var result = {};
//result.one = document.getElementById("data_table").rows[1].cells[0].innerHTML;
//result.two = document.getElementById("data_table").rows[1].cells[1].innerHTML;
if (result != null) {
$.ajax({
type: 'get',
url: "/Manage/CreateGroupRoleRestriction",
//url: '#Url.RouteUrl(new{ action= "CreateGroupRoleRestriction", controller= "Manage", one = "one", two = "two"})',,
data: { one, two },
//params: { one, two }
/*dataType: String,*/
//success: alert(result)
});
}
else {
alert("Error");
}
}
</script>
However, the issue is that the string values will not post to the Action Result, see below.
The values "one" and "two" are null.
[Authorize(Roles = "Admin")]
[HttpPost]
[Route("/Manage/CreateGroupRoleRestriction?{one,two}")]
[ValidateAntiForgeryToken]
public ActionResult CreateGroupRoleRestriction(FormCollection formCollection, string message2, string one, string two)
{
UserDataBusinessLayer userDataBusinessLayer = new UserDataBusinessLayer();
userDataBusinessLayer.Restrict1(message2);
UserDataBusinessLayer userDataBusinessLayer2 = new UserDataBusinessLayer();
userDataBusinessLayer2.Restrict2();
try
{
UserData userData = new UserData();
TryUpdateModel(userData);
if (ModelState.IsValid)
{
userData.RoleName = formCollection["RoleName"];
UserDataBusinessLayer userDataBusinessLayer3 = new UserDataBusinessLayer();
userDataBusinessLayer3.CreateGroupRestriction(userData, message2, one.ToString(), two.ToString());
return RedirectToAction("CreateGroupRoleRestriction");
}
else
{
userData.RoleName = formCollection["RoleName"];
UserDataBusinessLayer userDataBusinessLayer4 = new UserDataBusinessLayer();
userDataBusinessLayer4.CreateGroupRestriction(userData, message2, one.ToString(), two.ToString());
return RedirectToAction("CreateGroupRoleRestriction");
}
}
catch (Exception ex)
{
Logger.Log(ex);
return RedirectToAction("CreateGroupRoleRestriction");
}
}
Please try changing 'type' in ajax to 'post'.
type: 'post'

Trouble accessing the property of a class in Ajax

In index.cshtml I am using Ajax. In click event of .removelink to get changes from action controller as follows:
$(".RemoveLink").click(function () {
// Get the id from the link
var recordToDelete = $(this).attr("data-id");
if (recordToDelete != '' || recordToDelete != null) {
// Perform the ajax post
$.ajax({
//contentType: 'application/json',
//dataType: 'text',
type: 'post',
dataType: 'JSON',
url: '/ShoppingCart/RemoveFromCart/',
data: { id: recordToDelete },
success: function (data) {
if (data.ItemCount == 0) {
$('#row-' + data.DeleteId).fadeOut('slow');
}
else {
$('#item-count-' + data.DeleteId).text(data.ItemCount);
}
$('#cart-total').text(data.CartTotal);
$('#update-message').text(data.Message);
$('#cart-status').text('Cart (' + data.CartCount + ')');
}
});
}
});
And in controller:
//AJAX: /ShoppingCart/RemoveFromCart/5
[HttpPost]
public IActionResult RemoveFromCart(int id)
{
//Remove the item from the cart
var cart = ShoppingCart.GetCart(this.HttpContext);
// Get the name of the album to display confirmation
//string albumName = _context.Carts
//.Single(item => item.RecordId == id).Album.Title;
Cart cartt = ShoppingCart.getCartForGetalbumName(id);
// Remove from cart
int itemCount = cart.RemoveFromCart(id);
// Display the confirmation message
var results = new ShoppingCartRemoveViewModel
{
Message = HtmlEncoder.Default.Encode(cartt.Album.Title) +
" has been removed from your shopping cart.",
CartTotal = cart.GetTotal(),
//CartCount = cart.GetCount(),
ItemCount = itemCount,
DeleteId = id
};
return Json(results);
}
However, it does not work. Additionally, the text of the tags does not change and fadeOut() does not work.
When I send a unit field (eg, a string or an integer) Jason reads it well.
However, when I send a class containing some properties (like the example above), its value in the data parameter is problematic.
Please modify your property to lowercase , try to use :
success: function (data)
{
if (data.itemCount == 0) {
$('#row-' + data.deleteId).fadeOut('slow');
}
else {
$('#item-count-' + data.deleteId).text(data.itemCount);
}
$('#cart-total').text(data.cartTotal);
$('#update-message').text(data.message);
$('#cart-status').text('Cart (' + data.cartCount + ')');
}
i add The following code to convert data to json in RemoveFromCart controller action:
var resulTtoJson = Newtonsoft.Json.JsonConvert.SerializeObject(results);
and return json type :
[HttpPost]
public IActionResult RemoveFromCart(int id)
{
//Remove the item from the cart
var cart = ShoppingCart.GetCart(this.HttpContext);
// Get the name of the album to display confirmation
//string albumName = _context.Carts
//.Single(item => item.RecordId == id).Album.Title;
Cart cartt = ShoppingCart.getCartForGetalbumName(id);
// Remove from cart
int itemCount = cart.RemoveFromCart(id);
// Display the confirmation message
var results = new ShoppingCartRemoveViewModel
{
Message ="محصول"+ cartt.Album.Title +
"از سبد خریدتان حذف گردید.",
CartTotal = cart.GetTotal(),
//CartCount = cart.GetCount(),
ItemCount = itemCount,
DeleteId = id
};
var resulTtoJson = Newtonsoft.Json.JsonConvert.SerializeObject(results);
return Json(resulTtoJson);
also add the following code in view to convert data to javascript type:
var data =JSON.parse(dataa);
and use it:
$(".RemoveLink").click(function () {
// Get the id from the link
var recordToDelete = $(this).attr("data-id");
// alert(recordToDelete);
if (recordToDelete != '' || recordToDelete != null) {
// Perform the ajax post
$.post("/ShoppingCart/RemoveFromCart/", { id: recordToDelete},
function (dataa) {
// Successful requests get here
// Update the page elements
var data =JSON.parse(dataa);
if (data.ItemCount == 0) {
$('#row-' + data.DeleteId).fadeOut('slow');
} else {
$('#item-count-' + data.DeleteId).text(data.ItemCount);
}
$('#cart-total').text(data.CartTotal);
$('#update-message').text(data.Message);
$('#cart-status').text('Cart (' + data.CartCount + ')');
}
});
}
});

ASP.net cascading dropdown list

trying to implement country state dropdown in mvc but couldn't..
conotroller :-
[HttpGet]
public ActionResult GetCities(int StateId)
{
Business.Services.City cityService = new Business.Services.City();
List<Business.Models.City> stateList = cityService.GetCityByStateId(StateId);
//var jsonSerialiser = new JavaScriptSerializer();
//var json = jsonSerialiser.Serialize(stateList);
return Json(new { stateList }, JsonRequestBehavior.AllowGet);
}
method:
public List<Models.City> GetCityByStateId(int StateId)
{
try
{
var list = new List<SelectListItem>();
Collection<DBParameters> parameters = new Collection<DBParameters>();
parameters.Add(new DBParameters() { Name = "StateId", DBType = DbType.Int32, Value = StateId });
var city = this.ExecuteProcedure<Models.City>("GetCityByState", parameters).ToList();
//if (city != null && city.Count > 0)
//{
// list = city.Select(x => new SelectListItem { Text = x.CityName, Value = x.StateId.ToString() }).ToList();
//}
return city;
}
catch (Exception ex)
{
throw;
}
}
change event:
$('.ddlstate').change(function () {
debugger;
$.ajax({
url: '#Url.Action("GetCities", "User")',
type: "GET",
data: { StateId: $(this).val() },
dataType: "json",
success: function (result) {
debugger;
//alert(result.stateList[0].CityId);
$.each(result.stateList, function () {
debugger;
$('.cityddl').append($("<option></option>").val(CityId).html(CityName));
});
},
error: function (result, status, jQxhr) {
alert("Error: " + result + "-" + status + "-" + jQxhr);
}
});
});
i get count of the citites in method and controller but when i run project and change state dropdown i got blank city dropdown. what is wrong?
It looks like you're missing a couple of things in the $.each() call.
You should pass the JSON result from the ajax call to the $.each
You also need to provide a parameter to the callback function so that the callback function has something to work with
It could look something like this:
$.each(result.stateList, function(index, city) {
$('.cityddl').append($("<option></option>").val(city.CityId).html(city.CityName));
});

json response in ajax undefined

so here is my problem, I am returning a list of my model List from a controller through ajax. In response I am getting List but when i try to fill my datatable with this response it shows undefined everywhere
My View:
function GetData() {
pid = $(this).data('id');
var singleValues = $("#network").val();
var id = $(this).find(":selected").val();
var network = { "network": id };
$.ajax({
type: 'POST',
url: '/Home/GetData',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(network),
success: function (response) {
// console.log(response);
alert(response);
for (var i = 0; i < response.d.length; i++) {
$("#example").append("<tr><td>" + response.d[i].ACCOUNT_TYPE_ID + "</td><td>" + response.d[i].ACCOUNT_ISO_CODE + "</td><td>" + response.d[i].ACCOUNT_DESC + "</td></tr>");
debugger;
}
}
});
MY Controller:
[HttpPost]
public DbDataModel[] GetData(string network)
{
List<DbDataModel> l = new List<DbDataModel>();
DataTable db = GetDataSource(network);
foreach (DataRow row in db.Rows)
{
DbDataModel model = new DbDataModel();
model.Account_type_id = row["ACCOUNT_TYPE_ID"].ToString();
model.Account_iso_code = row["ACCOUNT_ISO_CODE"].ToString();
model.Account_desc = row["ACCOUNT_DESC"].ToString();
l.Add(model);
}
return l.ToArray();
}
My Model:
public class DbDataModel
{
public string Account_type_id { get; set; }
public string Account_iso_code { get; set; }
public string Account_desc { get; set; }
}
Change your method to return JSON
[HttpGet]
public JsonResult GetData(string network)
{
List<DbDataModel> l = new List<DbDataModel>();
.....
return Json(l, JsonRequestBehavior.AllowGet);
}
and in the script
...
$.ajax({
type: 'GET',
...
This is how i got it right.
function GetData() {
pid = $(this).data('id');
var singleValues = $("#network").val();
var id = $(this).find(":selected").val();
var network = { "network": id };
$.ajax({
type: 'POST',
url: '/Home/GetData',
dataType:"json",
traditional: true,
data: jQuery.param( network ),
success: function (response) {
debugger;
var oTable = $('#example').dataTable();//get the DataTable
oTable.fnClearTable();//clear the DataTable
for (var i = 0; i < response.length; i++) {
// $("#example").append("<tr><td>" + response[i].Account_type_id + "</td><td>" + response[i].Account_iso_code + "</td><td>" + response[i].Account_desc + "</td></tr>");
oTable.fnAddData([
response[i].Account_type_id,
response[i].Account_iso_code,
response[i].Account_desc
]);
}
}
});
};
[HttpPost]
public ActionResult GetData(string network)
{
List<DbDataModel> l = new List<DbDataModel>();
DataTable db = GetDataSource(network);
foreach (DataRow row in db.Rows)
{
DbDataModel model = new DbDataModel();
model.Account_type_id = row["ACCOUNT_TYPE_ID"].ToString();
model.Account_iso_code = row["ACCOUNT_ISO_CODE"].ToString();
model.Account_desc = row["ACCOUNT_DESC"].ToString();
l.Add(model);
}
return Json(l.ToArray(), JsonRequestBehavior.AllowGet);
}
Doing exactly what I wanted.

returning different javascript object from controller

my controller action:
[HttpPost]
public ActionResult AddPointAndCopyOtherSongToPlaylist(int id)
{
if (CheckIfAddPointToSelf(User.Identity.Name, id))
{
var song = repository.GetSong(id);
foreach (var item in song.Points)
{
if (User.Identity.Name == item.UsernameGavePoint)
{
var data1 = 1;
return Json(new {data1}, JsonRequestBehavior.AllowGet);
}
}
var originalSong = repository.GetSong(id);
var newSong = new Song();
newSong.UserName = User.Identity.Name;
newSong.Title = originalSong.Title;
newSong.YoutubeLink = originalSong.YoutubeLink;
newSong.GenreId = 38;
newSong.Date = DateTime.Now;
repository.AddSong(newSong);
var point = new Point();
point.UsernameGotPoint = originalSong.UserName;
point.UsernameGavePoint = User.Identity.Name;
point.Date = DateTime.Now;
point.Score = 1;
point.OtherSongId = id;
repository.AddPoint(point);
repository.Save();
int data = 2;
//process here
return Json(new { data }, JsonRequestBehavior.AllowGet);
}
else
{
return null;
}
}
based on different scenarios I want to return a javascript and somehow notify the client of what was returned and based in the result do something in the success part of my ajax call:
$.ajax({
beforeSend: function () { ShowAjaxLoader(); },
url: "/Home/AddPointAndCopyOtherSongToPlaylist/",
type: "POST",
data: { id: songId },
success: function (data,one) {
if (data && !one) {
HideAjaxLoader(), ShowMsg("Song Added Successfully");
}
else if(!data) {
HideAjaxLoader(), ShowMsg("you cannot add your own songs");
}
else if (data && one) {
HideAjaxLoader(), ShowMsg("You cannot add the same song twice");
}
},
error: function () { HideAjaxLoader(), ShowMsg("Song could not be added, please try again") }
});
});
I tried many different variations but I think i need something like data.property1 returned and in the client to check if that property exists or soemthing like that.. please help
You need to return your status code within the object.
return Json( new { data1 = "Some Other Data", status = 1} );
Then in your success handler check data.status.
if (data.status === 1) {
alert(data.data1);
}

Resources