Develop Reference

Set DeserializeObject in anonymous property of a class

I have this:
public class ComponentData
{
public dynamic CdHtml { get; set; }
public dynamic CdJson { get; set; }
public dynamic CdSection { get; set; }
public dynamic CdContainer { get; set; }
public dynamic CdRow { get; set; }
public dynamic CdContainerId { get; set; }
public dynamic CdColsJson { get; set; }
}
And i want to set the ComponentData Class with these values but i get an error:
var componentData = new ComponentData()
{
CdHtml = obj.htmlCD,
CdJson = JsonConvert.DeserializeObject<dynamic>(obj.jsonCD),
CdContainerId = "SECTION" + obj.CD_Container_Id,
CdSection = JsonConvert.DeserializeObject<dynamic>(pc.Build_CDxxxJson("xxx" + obj.CD_Container_Id, "width:" + tlj.width.ToString() + "%;padding-left:30px;padding-right:30px;padding-top:30px;padding-bottom:30px;" + sectionCenterStyle, "section")),
CdContainer = JsonConvert.DeserializeObject<dynamic>(pc.Build_CDxxxJson("xxx" + obj.divGUID2, containerStyle, "container")),
CdRow = JsonConvert.DeserializeObject<dynamic>(pc.Build_CDxxxJson("xxx" + obj.divGUID3, "", "row")),
CdColsJson = JsonConvert.DeserializeObject<dynamic>(pc.Build_CDxxxJson(obj.divGUID4, "", string.Format("col-xs-{0} col-sm-{1} col-md-{2} col-lg-{3} hoversel colregion{4}", bsc.xs, bsc.sm, bsc.md, bsc.lg, obj.divGUID4), bsc.xs, bsc.sm, bsc.md, bsc.lg))
};
return Json(new { componentData = componentData, html = obj.html });
how would i return this class with the json objects inside and pass it back to the client using ajax?

Change your code to this:
var componentData = new ComponentData()
{
CdHtml = obj.htmlCD,
CdJson = JsonConvert.DeserializeObject<ExpandoObject>(obj.jsonCD),
CdContainerId = "SECTION" + obj.CD_Container_Id,
CdSection = JsonConvert.DeserializeObject<ExpandoObject>(pc.Build_CDxxxJson("xxx" + obj.CD_Container_Id, "width:" + tlj.width.ToString() + "%;padding-left:30px;padding-right:30px;padding-top:30px;padding-bottom:30px;" + sectionCenterStyle, "section")),
CdContainer = JsonConvert.DeserializeObject<ExpandoObject>(pc.Build_CDxxxJson("xxx" + obj.divGUID2, containerStyle, "container")),
CdRow = JsonConvert.DeserializeObject<ExpandoObject>(pc.Build_CDxxxJson("xxx" + obj.divGUID3, "", "row")),
CdColsJson = JsonConvert.DeserializeObject<ExpandoObject>(pc.Build_CDxxxJson(obj.divGUID4, "", string.Format("col-xs-{0} col-sm-{1} col-md-{2} col-lg-{3} hoversel colregion{4}", bsc.xs, bsc.sm, bsc.md, bsc.lg, obj.divGUID4), bsc.xs, bsc.sm, bsc.md, bsc.lg))
};
If you want to convert to dynamic you need to use ExpandoObject just as you would use when you want to create one with your hands.

KnockoutJS observable not accessible via Controller MVC

I'm stuck on an issue. I am trying to access an observable Value from my controller. The data is stored in a JSON object. What's the best way to access it from a controller.
This is my VM
var urlPath = window.location.pathname;
var CreateSalesVM = {
Image :ko.observable({
base64StringArray: ko.observableArray()
}),
btnCreateSales: function () {
console.log("Ko is ", ko.toJSON(this));
$.ajax({
url: urlPath,
type: 'post',
dataType: 'json',
data: ko.toJSON(this),
contentType: 'application/json',
success: function (result) {
console.log("This was a success");
// window.location.href = urlPath + '/';
alert(ko.toJSON(this));
console.log("Ko is ", ko.toJSON(this));
},
error: function (err) {
console.log("Ko is ", ko.toJSON(this));
if (err.responseText == "success")
{
console.log("This was an error success", urlPath);
// window.location.href = urlPath + '';
}
else {
alert(err.responseText);
// console.log("This was an error ", urlHostPath );
}
},
complete: function () {
}
});
}
};
ko.applyBindings(CreateSalesVM);
This is the controller
public ActionResult Create()
{
return View();
}
// POST: Sales/Create
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
public string Create(SALE_ITEMS sALE_ITEMS)
{
//used for testing since image won't come over
byte[] test = Encoding.ASCII.GetBytes("1232434234");
try
{
var sALE_ITEM_IMAGES = new SALES_ITEM_IMAGES();
Debug.Write("SALES DATA is", sALE_ITEMS);
db.SALE_ITEMS.Add(sALE_ITEMS);
db.SaveChanges();
// Getting id from primary to store record in foreign
decimal newID = sALE_ITEMS.SALE_ID;
Debug.Write("SALES DATA is", newID.ToString());
sALE_ITEM_IMAGES.SALE_ITEM_ID = newID;
//This is where I need to grab the base64 and store it inside sALE_ITEM_IMAGES.IMAGE
sALE_ITEM_IMAGES.IMAGE = sALE_ITEMS.IMAGE;
// Do whatever you need to here
db.SALES_ITEM_IMAGES.Add(sALE_ITEM_IMAGES);
db.SaveChanges();
}
catch (DbEntityValidationException ex)
{
string errorMessages = string.Join("; ", ex.EntityValidationErrors.SelectMany(x => x.ValidationErrors).Select(x => x.PropertyName + ": " + x.ErrorMessage));
Debug.Write(errorMessages);
}
return "success";
}
Here are my Models
public partial class SALE_ITEMS
{
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
public SALE_ITEMS()
{
this.SALES_ITEM_IMAGES = new HashSet<SALES_ITEM_IMAGES>();
}
public decimal SALE_ID { get; set; }
public string USERID { get; set; }
public string NAME { get; set; }
public string PHONE { get; set; }
public string EMAIL { get; set; }
public string ITEM { get; set; }
public string DESCRIPTION { get; set; }
public string ADMIN_APPROVAL { get; set; }
public Nullable<System.DateTime> CREATED_AT { get; set; }
public Nullable<System.DateTime> UPDATED_AT { get; set; }
[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
public virtual ICollection<SALES_ITEM_IMAGES> SALES_ITEM_IMAGES { get; set; }
}
}
and
public partial class SALES_ITEM_IMAGES
{
public decimal ID { get; set; }
public decimal SALE_ITEM_ID { get; set; }
public byte[] IMAGE { get; set; }
public Nullable<System.DateTime> CREATED_AT { get; set; }
public virtual SALE_ITEMS SALE_ITEMS { get; set; }
}
Again, all I'm trying to do is access the base64 IMAGE bind from my Controller.

your view model CreateSalesVM at the client should match the same property names with server side model.
i modified your code, try this
// client side
var urlPath = window.location.pathname;
var CreateSalesVM = {
SALES_ITEM_IMAGES: ko.observableArray([{ //same as ICollection at server side
IMAGE: ko.observableArray([]) // same as byte[] at server side
}]),
btnCreateSales: function() {
var data = ko.toJSON(this);
console.log("Ko is ", data);
$.ajax({
url: urlPath,
type: 'post',
dataType: 'json',
data: data,
contentType: 'application/json',
success: function(result) {
console.log("This was a success");
// window.location.href = urlPath + '/';
console.log(result);
},
error: function(err) {
console.log("Ko is ", data);
if (err.responseText == "success") {
console.log("This was an error success", urlPath);
// window.location.href = urlPath + '';
} else {
alert(err.responseText);
// console.log("This was an error ", urlHostPath );
}
},
complete: function() {}
});
}
};
ko.applyBindings(CreateSalesVM);
and
// server side
[HttpPost]
public string Create(SALE_ITEMS item)
{
try
{
Debug.Write("SALES DATA is", item);
db.SALE_ITEMS.Add(item);
db.SaveChanges();
// Getting id from primary to store record in foreign
decimal newID = item.SALE_ID;
Debug.Write("SALES DATA is", newID.ToString());
// loop Images
foreach (var image in item.SALE_ITEM_IMAGES)
{
image.SALE_ITEM_ID = newID;
// Do whatever you need to here
db.SALES_ITEM_IMAGES.Add(image);
db.SaveChanges();
}
}
catch (DbEntityValidationException ex)
{
string errorMessages = string.Join("; ", ex.EntityValidationErrors.SelectMany(x => x.ValidationErrors).Select(x => x.PropertyName + ": " + x.ErrorMessage));
Debug.Write(errorMessages);
}
return "success";
}

storing and retrieving images from database using asp.net web api and knockout js

my entity
public class Agent
{
[Key]
[JsonProperty(PropertyName = "agentId")]
public int AgentId { get; set; }
[JsonProperty(PropertyName = "codeName")]
public string CodeName { get; set; }
[JsonProperty(PropertyName = "firstName")]
public string FirstName { get; set; }
[JsonProperty(PropertyName = "lastName")]
public string LastName { get; set; }
[JsonProperty(PropertyName = "imagePath")]
public string ImagePath { get; set; }
[JsonProperty(PropertyName = "description")]
public string Description { get; set; }
}
my Viewmodel
public class AgentVm
{
public int AgentId { get; set; }
public string CodeName { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string ImagePath { get; set; }
public string Description { get; set; }
}
my Get web api controller
public IQueryable<AgentVm> GetAgents()
{
var agents = from b in db.Agents
select new AgentVm()
{
AgentId = b.AgentId,
FirstName = b.FirstName,
LastName = b.LastName,
CodeName = b.CodeName,
ImagePath = b.ImagePath
};
return agents;
}
my post web api controller
public async Task<HttpResponseMessage> PostAgent(Agent agent)
{
if (agent != null)
{
// Extract the image from the image string
string regEx = "data:(.+);base64,(.+)";
Match match = Regex.Match(agent.ImagePath, regEx);
if (match.Success)
{
// Get the content-type of the file and the content
string imageType = match.Groups[1].Value;
string base64image = match.Groups[2].Value;
if (imageType != null && base64image != null)
{
// Verify the content-type is an image
string imageRegEx = "image/(.+)";
match = Regex.Match(imageType, imageRegEx);
if (match.Success)
{
// Get the file extension from the content-type
string fileExtension = match.Groups[1].Value;
// Get the byte-array of the file from the base64 string
byte[] image = Convert.FromBase64String(base64image);
string path = HttpContext.Current.Server.MapPath("~/images");
string fileName = agent.FirstName + agent.LastName;
// Generate a unique name for the file (add an index to it if it already exists)
string targetFile = fileName + "." + fileExtension;
int index = 0;
while (File.Exists(Path.Combine(path, targetFile)))
{
index++;
targetFile = fileName + index + "." + fileExtension;
}
// Write the image to the target file, and update the agent with the new image path
File.WriteAllBytes(Path.Combine(path, targetFile), image);
agent.ImagePath = "images/" + targetFile;
db.Agents.Add(agent);
await db.SaveChangesAsync();
// Create the Location http header
var response = Request.CreateResponse(HttpStatusCode.Created, agent);
string uri = Url.Link("GetAgent", new { id = agent.AgentId});
response.Headers.Location = new Uri(uri);
return response;
}
}
}
}
throw new HttpResponseException(Request.CreateErrorResponse(
HttpStatusCode.BadRequest, "Could not deserialize agent"));
}
and this is my js
var ViewModel = function() {
var self = this;
self.agents = ko.observableArray();
self.error = ko.observable();
self.agent = ko.observableArray();
self.newAgent = {
FirstName: ko.observable(),
LastName: ko.observable(),
CodeName: ko.observable(),
Description: ko.observable(),
ImagePath: ko.observable()
}
var agentsUrl = "/api/agents/";
function ajaxHelper(uri, method, data) {
self.error(""); // Clear error message
return $.ajax({
type: method,
url: uri,
dataType: "json",
contentType: "application/json",
data: data ? JSON.stringify(data) : null
}).fail(function (jqXHR, textStatus, errorThrown) {
self.error(errorThrown);
});
}
function getAllAgents() {
ajaxHelper(agentsUrl, "GET").done(function (data) {
self.agents(data);
});
}
self.addAgent = function (formElement) {
var agent = {
AgentId: self.newAgent.Agent().AgentId,
FirstName: self.newAgent.FirstName(),
LastName: self.newAgent.LastName(),
CodeName: self.newAgent.CodeName(),
Description: self.newAgent.Description(),
ImagePath: self.newAgent.ImagePath()
};
ajaxHelper(agentsUrl, 'POST', agent).done(function (item) {
self.agents.push(item);
});
}
getAllAgents();
};
ko.applyBindings(new ViewModel());
and this is my image element
<img data-bind="attr:{ src: ImagePath }"/>
but the image is not displaying and i can't figure out to add an upload,
please someone help , i don't need angular , just a simple mvvm such as knockout js but am relative new in it.

Look at the generated <img> element with Chrome console, or Firebug from firefox (specially the src property). Then copy the URL in a new tab and check if its displayed. I think your problem is that the element is rendered correctly, but your project cannot render direct images, as MVC will try to use the route logic to find the controller/action you are requesting, returning an HTTP 404. Check this response for a solution
You can create a simple form to upload files, or perhaps you can use jquery $.post, if you want to use ajax. Here is a sample for that

Cannot pass KeyValuePair to controller, values null

im trying pass a object since View to controller as ViewModel. But some arrive field empty to controller. This fields are KeyValuePair and have not idea for pass it correctly to Controller.
This is my code:
Controller:
public ActionResult Index(SearchResultsViewModel searchResultsViewModel)
{
PassengerDataViewModel viewModel = new PassengerDataViewModel()
{
Request = searchResultsViewModel,
PassengerType = GetPassengerTypes(),
NumberPeople = GetNumberPeople()
};
return View("PassengerData", viewModel);
}
ViewModel:
public class SearchResultsViewModel
{
public SearchViewModel Request { get; set; }
public string SearchFlightDatesText { get; set; }
public string SearchPaxSelectionText { get; set; }
public KeyValuePair<string, string> DepartureStation { get; set; }
public KeyValuePair<string, string> ArrivalStation { get; set; }
public DateTime BeginDate { get; set; }
public DateTime EndDate { get; set; }
public DateTime SelectedDate { get; set; }
public int SelectedDay { get; set; }
public List<FlightsResponseDTO> Days { get; set; }
public KeyValuePair<string, string> DepartureStation2 { get; set; }
public KeyValuePair<string, string> ArrivalStation2 { get; set; }
public List<FlightsResponseDTO> Days2 { get; set; }
public DateTime BeginDate2 { get; set; }
public DateTime EndDate2 { get; set; }
public DateTime SelectedDate2 { get; set; }
public int SelectedDay2 { get; set; }
}
View Code
Post = function (path, params, method) {
method = method || "post"; // Set method to post by default if not specified.
// The rest of this code assumes you are not using a library.
// It can be made less wordy if you use one.
var form = document.createElement("form");
form.setAttribute("method", method);
form.setAttribute("action", path);
debugger;
for (var key in params) {
if (params.hasOwnProperty(key)) {
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", params[key]);
form.appendChild(hiddenField);
}
}
debugger;
document.body.appendChild(form);
form.submit();
}
$("a.baseButton.yellowButton.mediumButton").click(function (event) {
//Comprobamos si esta seleccionado un vuelo
if(!checkIfFlightSelected()){
$('#error-dialog').dialog({
modal: true,
height: 130,
width: 360
});
event.preventDefault();
return false;
}
//--------------Inicio SearchViewModel ------------------------------
debugger;
var departureStation = "#Model.Request.SelectedOrigin1";
var arrivalStation = "#Model.Request.SelectedDestination1";
var departureDate = "#Model.Request.SelectedFlightDate1";
var departureStation2 = "#Model.Request.SelectedOrigin2";
var arrivalStation2 = "#Model.Request.SelectedDestination2";
var departureDate2 = "#Model.Request.SelectedFlightDate2";
var adults = "#Model.Request.NumAdults";
var childs = "#Model.Request.NumChilds";
var infants = "#Model.Request.NumInfants";
var residentOrFamily ="#Model.Request.SelectedResidentOrLargueFamilyDiscount";
var PassengersWithDiscount = "#Model.Request.NumPassengersWithSpecialDiscount";
var tipo = "#Model.Request.SelectedSearchType";
var searchViewModelRequest = {
SelectedSearchType: tipo,
SelectedOrigin1: departureStation,
SelectedDestination1: arrivalStation,
SelectedFlightDate1: departureDate,
Tipo:tipo,
//SelectedOrigin2: departureStation2,
//SelectedDestination2: arrivalStation2,
//SelectedFlightDate2: departureDate2,
NumAdults: adults,
NumChilds: childs,
NumInfants: infants,
SelectedResidentOrLargueFamilyDiscount: residentOrFamily,
NumPassengersWithSpecialDiscount: PassengersWithDiscount
};
//-------------------Fin SearchViewModel---------------------------------
//Inicio SearchResultsViewModel
//-----------Datos para obtenr datos seleccioandos------------------
var partsId = $("#availabilityTable0 :input:checked")[0].id.split('_');
var day = calendariCarregat.Days[partsId[1]];
var journey=day.Journeys[partsId[2]];
var departureDate = new Date(journey.JourneySellKey.split('~')[5].split(' ')[0]);
//var arrivalDate = new Date(journey.JourneySellKey.split('~')[7].split(' ')[0]);
var departureHourDate = journey.DepartureTimeString;
var arrivalHourDate = journey.ArrivalTimeString;
var departureDay;
var departureMonth;
if (departureDate.getUTCDate() + 1 < 10) {
departureDay = "0" + (departureDate.getUTCDate() + 1);
} else {
departureDay = (departureDate.getUTCDate() + 1);
}
if (departureDate.getUTCDate() + 1 < 10) {
departureMonth = "0" + (departureDate.getUTCMonth() + 1);
} else {
departureMonth = (departureDate.getUTCMonth() + 1);
}
var normalDepartureDate = (departureDay) + "/" + (departureMonth) + "/" + departureDate.getUTCFullYear();
//----------------------Fin datos seleccionados--------------
var searchFlightDatesText = "#Model.SearchFlightDatesText";
var searchPaxSelectionText = "#Model.SearchPaxSelectionText";
var departureStation = {
"Key": "#Model.DepartureStation.Key",
"Value": "#Model.DepartureStation.Value"
};
var arrivalStation = {
"Key": "#Model.ArrivalStation.Key",
"Value": "#Model.ArrivalStation.Value"
};
var beginDate = "#Model.BeginDate";
var endDate = "#Model.EndDate";
var selectedDate = normalDepartureDate;
var selectedDay = "#Model.SelectedDay";
var days = "#Model.Days";
//var departureStation2 = null;
//var arrivalStation2 = null;
//var days2 = null;
//var beginDate2 = null;
//var endDate2 = null;
//var selectedDate2 = null;
//var selectedDay2 = null;
var searchResultsViewModel = {
//Request: searchViewModelRequest.toString(),
"Request.SelectedOrigin1": searchViewModelRequest.SelectedOrigin1,
"Request.SelectedSearchType": searchViewModelRequest.Tipo,
"Request.SelectedDestination1": searchViewModelRequest.SelectedDestination1,
"Request.SelectedFlightDate1": searchViewModelRequest.SelectedFlightDate1,
"Request.NumAdults": searchViewModelRequest.NumAdults,
"Request.NumChilds": searchViewModelRequest.NumChilds,
"Request.NumInfants": searchViewModelRequest.NumInfants,
"Request.IncrementSelectedFlightDate1": 0,
"Request.SelectedResidentOrLargueFamilyDiscount": searchViewModelRequest.SelectedResidentOrLargueFamilyDiscount,
"Request.NumPassengersWithSpecialDiscount": searchViewModelRequest.NumPassengersWithSpecialDiscount,
SearchFlightDatesText: searchFlightDatesText,
SearchPaxSelectionText: searchPaxSelectionText,
"DepartureStation.Key": "test",
"DepartureStation.Value": "test",
"ArrivalStation": "{ [test, test]}",
BeginDate: beginDate,
EndDate: endDate,
SelectedDate: selectedDate,
SelectedDay: selectedDay,
Days: days,
"DepartureStation2.Key": "test",
"DepartureStation2.Value": "test",
};
//--------------Fin SearchResultsViewModel
MICESearcher.Post('#Url.Action("Index", "PassengerData")', (searchResultsViewModel));
});
i have tried it pass values of many ways to the KeyValuePair but i could not achieve it
Edit(solved):
finally thanks to #Daniel J.G, I could solve the problem by following this website ASP MVC.NET - how to bind KeyValuePair?
thank you all for the help!!

How do I capture a specific value from a POST ajax response?

Refer to the comment inside the ajax success function:
function CreateProjectTree(sc)
{
$.ajax({
type: "POST",
url: "../api/projects/SearchProjects",
data: sc,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data)
{
if ($(data).length === 1)
{
window.location.replace("../ViewProjectDetails.aspx?ProjectId=" + //here's where I need to get the id;
}
else
{
buildTree(data);
}
},
});
}
This is what the controller looks like for the post:
public class ProjectsController : ApiController
{
public List<Item> SearchProjects(GBLProjectSearchCriteria searchCriteria)
{
var ProjectSearchResult = new ProjectSearchResultController();
searchCriteria.SearchType = "P";
searchCriteria.QueryString = "?ProjectId=";
var GBLProjectSearchResultListData = ProjectSearchResult.GetProjectSearchResultList(searchCriteria);
var projectList = (from GBLProjectSearchResult item in GBLProjectSearchResultListData
select new Item
{
Id = item.Id,
Title = item.Title,
Url = item.NavigateUrl + item.QueryString
}).ToList();
foreach (var project in projectList)
{
//seasons
project.Items = new List<Item>();
var SeasonSearchResult = new ProjectSearchResultController();
searchCriteria.Id = project.Id;
searchCriteria.SearchType = "S";
searchCriteria.QueryString = "?ProjectId=" + project.Id + "&SeasonId=";
var GBLSeasonSearchResultListData = SeasonSearchResult.GetProjectSearchResultList(searchCriteria);
foreach (var season in from GBLProjectSearchResult item in GBLSeasonSearchResultListData
select new Item
{
Id = item.Id,
Title = item.Title,
Url = item.NavigateUrl + item.QueryString
})
{
project.Items.Add(season);
project.HasChildren = (project.Items.Count > 0);
}
foreach (var season in project.Items)
{
//episodes
season.Items = new List<Item>();
var episodeSearchResult = new ProjectSearchResultController();
searchCriteria.Id = season.Id;
searchCriteria.SearchType = "E";
searchCriteria.QueryString = "?ProjectId=" + project.Id + "&SeasonId=" + season.Id + "&EpisodeId=";
var GBLEpisodeSearchResultListData = episodeSearchResult.GetProjectSearchResultList(searchCriteria);
foreach (GBLProjectSearchResult item in GBLEpisodeSearchResultListData)
{
var episode = new Item
{
Id = item.Id,
Title = item.Title,
Url = item.NavigateUrl + item.QueryString
};
season.Items.Add(episode);
season.HasChildren = (season.Items.Count > 0);
}
}
}
return projectList;
}
public class Item
{
readonly string take2Root = ConfigurationManager.AppSettings["Take2Root"];
private string url;
public int Id
{
get;
set;
}
public string Title
{
get;
set;
}
public bool HasChildren
{
get;
set;
}
public List<Item> Items
{
get;
set;
}
public string Url
{
get
{
return url;
}
set
{
url = take2Root + value.Replace("..", "");
}
}
}
}
I need to get the ID of the parent node returned by this controller.
I would know how to work with a GET request, however, I have to do a POST here and I'm unsure on how to extract the ID inside the ajax success function.
Can someone give me a hand?
Thanks!

inside your if ($(data).length === 1) statement you can add debugger; (or set a break-point) then examine the data object using chrome's developer tools. The id you're after will be something like data.objects[0].id