image browser imageBrowser_listUrl not working - asp.net-mvc

i have tried to get the plugin Image-Browser to work, but i cant figure out, what im missing here.
im using this class:
public class GetImagesToJsonClass
{
public string image { get; set; }
public string thumb { get; set; }
public string folder { get; set; }
}
and this JsonResult
public JsonResult GetFiles()
{
List<GetImagesToJsonClass> GetFiles = new List<GetImagesToJsonClass>();
DirectoryInfo GetDIR = new DirectoryInfo(System.Web.HttpContext.Current.Server.MapPath("~/Content/Images/"));
foreach (FileInfo item in GetDIR.GetFiles())
{
GetImagesToJsonClass NewFile = new GetImagesToJsonClass();
NewFile.image = string.Format("/Content/Images/{0}", item.Name);
NewFile.thumb = string.Format("/Content/Images/{0}", item.Name);
NewFile.folder = "Test";
GetFiles.Add(NewFile);
}
string GetJson = JsonConvert.SerializeObject(GetFiles);
return Json(GetJson, JsonRequestBehavior.AllowGet);
}
using this on a "test" site
<script>
var myURL = '#Url.Action("GetFiles", "Sales")';
var Getfiles = $.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: myURL,
data: "",
datatype: "Json",
});
Getfiles.done(function () {
try {
var tempdata = (Getfiles.responseText);
var data = JSON.parse(tempdata);
document.write(data);
}
catch (e) {
alert("fejl:" + e);
}
});</script>
and the output is:
[{"image":"/Content/Images/testimage2.jpg","thumb":"/Content/Images/testimage2.jpg","folder":"Test"}]
and ofc this to activat it
CKEDITOR.replace('editor1', {
"extraPlugins": 'imagebrowser',
"imageBrowser_listUrl": "/Sales/Test"
});
And get an error
parsererror: invalid JSON file: "/Sales/Test/": Unexpected token <
and if i set the feed directly in i get a [object, object] error?
what am i doing wrong here?

Related

Why this ajax post request does not work in mvc app

i have js file with ajax request
this is part of its text
$.ajax({
url: '/Points/Addpoint', // также '#Url.Action("Addpoint", "PointsController")'
type: "POST",
dataType: "json",
data: JSON.stringify({ firstx: ev._x, firsty: ev._y, secondx: ev._x, secondy: ev._y }),
success: function () {
alert();
}
});
i also have mvc controller with this method which should be called in ajax
[HttpPost]
public void Addpoint(JSON po)
{
var pointslist = this.Getpoints();
var obj = po;
pointslist.Add(new Point());
}
But somehow this doesnt work. idk why?it gives me 500 error and message
There are no parameterless constructors defined for this object.
what should i do to solve this problem and send this json obj?
Change the JSON to class and change your post
public class YourClass
{
public string firstx { get; set; }
public string firsty { get; set; }
public string secondx { get; set; }
public string secondy { get; set; }
}
[HttpPost]
public void Addpoint([FromBody] YourClass po)
{
var pointslist = this.Getpoints();
var obj = po;
pointslist.Add(new Point());
}
$.ajax({
url: '/Points/Addpoint',
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({ firstx: ev._x, firsty: ev._y, secondx:ev._x,secondy: ev._y }),
success: function () {
}
});

How to post json object with multiple values to the Controller from Ajax

I have this Ajax post working for a single value but I need it to work with multiple values. What am I missing?
I have already tried to make the public class 'Value' a List AND Guid[]. I have tried to adjust the method parameter to List AND Value[]. Not sure what else to try.
Class:
public class Value
{
public Guid TimeId { get; set; }
}
Method:
public IActionResult ApproveAllTimesheets([FromBody]Value information)
View JS:
function SubAll() {
var selectedValues = $('#timesheet').DataTable().column(0).checkboxes.selected().toArray();
var instructions = {};
for (var TimeId in selectedValues) {
instructions[TimeId] = { TimeId: selectedValues[TimeId] };
}
var inst = JSON.stringify(instructions);
$.ajax({
url: "/Admin/ApproveAllTimesheets",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: inst,
success: function (result) {
alert(result);
},
error: function (xhr, textStatus) {
if (xhr.status == 401) { alert("Session Expired!"); window.location = "/Account"; }
else {
alert('Content load failed!', "info");
}
}
});
};
If I send through this object it works but I need to send through multiple values like my ajax post will do.
var instructions = { TimeId: "13246578-1234-7894-4562-456789123456" };
UPDATE #1
I found a structure that works for me by extending the class, now I just need to figure out how to create the correct object and array combination.
New Classes:
public class ValueContainer
{
public List<Value> MasterIds { get; set; }
}
public class Value
{
public Guid TimeId { get; set; }
}
Method:
public IActionResult ApproveAllTimesheets([FromBody]ValueContainer information)
Structure I need now (this works hard coded):
var jsonObject = {
"MasterIds": [{ TimeId: "13246578-1234-7894-4562-456789123450" }, { TimeId: "13246578-1234-7894-4562-456789123451" }, { TimeId: "13246578-1234-7894-4562-456789123452" }]
};
I'm still new to this stuff but what I see is that jsonObject is an object with a Key 'MasterIds' and the corresponding values are an array of objects with the key 'TimeId'...is this a correct evaluation?...and how to create it in code please?
You neec to create an array of objects and then set it in the container object :
var instructions = []; // an array
for (var i = 0; i < selectedValues.length; i++) {
instructions.push({ TimeId: selectedValues[i] };
}
var Value = {TimeId: instructions}; // creating object with property TimeId as array of guid
var inst = JSON.stringify(Value);
.......
....... your ajax code
and your class property should also be of type array:
public Guid[] TimeId { get; set; }

500 error Sending JSON to Controller MVC

I am trying to send JSON data to the controller and use the data to modify the database.
This is my ajax call:
var ajaxresult = [];
var table = $('<table>').addClass('table ');
$('button').on('click', function () {
$.ajax({
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
type: 'GET',
url: 'https://api.github.com/search/repositories?q=repos+topic:' + $(this).attr('id') + '&sort=stars&order=desc&per_page=10',
success: function (data) {
ajaxresult.push(data);
debugger;
table.empty();
table.append("<thead><tr><th>Avatar</th><th>Name</th><th>Score</th><th>URL</th><th>Updated at</th></tr></thead>");
$.each(data.items, function (i, object) {
var row = $('<tr>').addClass('table-primary');
row.append('<td><img src=' + object.owner.avatar_url + 'height=50px width=50px/></td>');
row.append('<td>' + object.name + '</td>' + '<td>' + object.score + '</td>' + '<td>' + object.url + '</td>' + '<td>' + object.updated_at + '</td>');
table.append(row);
});
table.append('</table>');
$('table').replaceWith(table);
}
});
});
$('#save').on('click', function () {
debugger;
$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'json',
type: 'POST',
url: 'http://localhost:60294/Git/Updateto',
data: ajaxresult,
success: function (data) {
alert('done');
},
error: function (data) {
alert('error');
}
});
});
This is the controller to which I am trying to POST the data:
[HttpPost]
public async Task<IActionResult> Updateto(List<gitd> obj,gitd gitd )
{
if (ModelState.IsValid)
{
foreach (var item in obj)
{
item.AvatarURL = gitd.AvatarURL;
item.Name = gitd.Name;
item.Score = gitd.Score;
item.Updatedat = gitd.Updatedat;
}
await _context.SaveChangesAsync();
}
return View(gitd);
}
}
This is the model which I want to use and save data to the database:
public class gitd
{
public int ID { get; set; }
public string AvatarURL { get; set; }
public string Name { get; set; }
public decimal Score { get; set; }
public DateTime Updatedat { get; set; }
}
I am getting a 500 Internal error, when I looked using the debugger, whenever the POST request is called. the control moves directly to the close of the ajax function. In the JQUERY XML, I could see that data is undefined and handleobj is undefined and all the post data becomes NULL.How do I resolve this?
As ajaxresult is a global variable,shoudl not the json data be there in the #save button ajax call?Why is the data NULL.
I also tried giving data inside the POST request as:
data:{
"name":"John",
"age":30,
"cars":[ "Ford", "BMW", "Fiat" ]
}
but still the error persists.

how to pass knockoutjs view model into a mvc controller

I have the following function in a MVC controller
public class XyzController:Controller
{
public ActionResult Index(){...}
[HttpPost]
public bool Save(string jsondata)
{
//parse json data to insert into the database
}
}
I want to pass this view model into the Save function
var myObj = function (id) {
var self = this;
self.myId = id;
self.parameters = ko.observableArray();
}
var ViewModel = function () {
var self = this;
self.myObjList = ko.observableArray();
self.sendItems = function() {
$.ajax({
type: "POST",
url: '/Xyz/Save',
data: ko.toJSON(self),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response);
},
error: function (request, status, error) {
alert(request.statusText);
}
});
}
}
var vm = new ViewModel()
ko.applyBindings(vm);
I do get the data if I pass the data as JSON.stringify({jsondata:ko.toJSON(self)}), but how do I then convert it into a object so that I can iterate over the myObjList and the parameters?
First of all try changing your Model to something like this :-
[JsonObject(MemberSerialization.OptIn)]
public class Test
{
[JsonProperty("myId")]
public string Id { get; set; }
[JsonProperty("parameters")]
public List<string> Parameters { get; set; }//List<string> or whatever it takes int of string
}
if it doesn't work, the please post your Ajax request data... Else....
I follow approach like this:-
MODEL:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
namespace MvcApplication4.Models
{
[JsonObject(MemberSerialization.OptIn)]
public class Test
{
[JsonProperty("id")]
public string Id { get; set; }
[JsonProperty("name")]
public string Name { get; set; }
}
}
CONTROLLER
//
// POST: /Testing/
[HttpPost]
public void Post(MvcApplication4.Models.Test request)
{
try
{
//DO YOUR STUFF
}
catch (Exception ex)
{
throw (ex);
}
}
AJAX Call:-
var json = {};
json = data.id;
json = data.name;
$.ajax({
type: "POST",
url: ""//Your URL,
dataType: "json",
contentType: 'application/json; charset=utf-8',
data: ko.toJSON(json)
}).done(function (data) {
}).fail(function (request, error) {
});
OR make your AJAX call like
$.ajax({
type: "POST",
url: ""//Your URL,
dataType: "json",
contentType: 'application/json; charset=utf-8',
data: ko.toJSON({ id: value1, name: value2 }),//Get value1 and value2 from you ko varables
}).done(function (data) {
}).fail(function (request, error) {
});

How to update Chosen dropdownlist's items(cascade dropdownlist)?

I use Chosen plugin. I want to refresh Category (Chosen) dropdownlist, when change Section dropdownlist.
Here is view:
#model CategoryInputModel
#Html.DropDownListFor(model => model.SectionId, ViewBag.SectionList as IEnumerable<SelectListItem>, new { id = "SectionId" })
#Html.ListBoxFor(model => model.CategoryIdSet, ViewBag.AllCategoryList as MultiSelectList
, new
{
#class = "chzn-select",
data_placeholder = "Choose Categories...",
#style = "width : 500px;",
id = "CategoryIdSet"
})
CategoryInputModel is like:
public class CategoryInputModel
{
public string Name { get; set; }
public int SectionId{ get; set; }
public List<int> CategoryIdSet{ get; set; }
}
I can create cascade dropdownlist for simple lists, but could not create it for multiple select. I tried this :
<script type="text/javascript">
$(function () {
$("#SectionId").change(
function () {
loadLevelTwo(this);
});
loadLevelTwo($("#SectionId"));
});
function loadLevelTwo(selectList) {
var selectedId = $(selectList).val();
$.ajax(
{
url: "#Url.Action("GetCategoriesBySectionId", "Project")",
type: "GET",
data: { id: selectedId },
success: function (data) {
$("#CategoryIdSet").html($(data).html());
},
error: function (xhr) {
alert("Something went wrong, please try again");
}
});
}
</script>
In controller:
public ActionResult GetCategoriesBySectionId(int id)
{
var result = MyService.GetCategoriesBySectionId(id);
// **its problem to create partial view that return chosen dropdownlist I need**
}
How can I create cascade Chosen dropdownlist?
I think you need to add a little more to your ajax callback. I replaced success method with done. Try this, it works for me:
function loadLevelTwo(selectList) {
var selectedId = $(selectList).val();
$.ajax(
{
url: "#Url.Action("GetCategoriesBySectionId", "Project")",
type: "GET",
data: { id: selectedId },
error: function (xhr) {
alert("Something went wrong, please try again");
}
}).done(function (data) {
$("#CategoryIdSet").children().each(function (index, option) {
$(option).remove();
});
//blank option
var items = "<option selected value=\"\"></option>";
$.each(data,
function () {
items += "<option value=\"" + this[0] + "\">" + this[1] + "</option>";
});
$("#CategoryIdSet").html(items)
$("#CategoryIdSet").trigger("liszt:updated");
$("#CategoryIdSet").change();
});
}
controller action could look like this:
public ActionResult GetCategoriesBySectionId(int id)
{
var result = MyService.GetCategoriesBySectionId(id);
//build JSON.
var modelDataStore = from m in result
select new[] { m.YourValueProperty.ToString(),
m.YourTextProperty };
return Json(modelDataStore, JsonRequestBehavior.AllowGet);
}

Resources