Develop Reference

Blazor Dynamic Root Variables

I'm looking to build a website that works in the same manner that I have put together in this video, that isn't based on JS ( like it is in this video ), that can utilize C# in order to interop with JS and get windowWidth and windowHeight, and then dynamically change all of the CSS variables so that all of the content, images, and font size/shading/border/shadows, etc... will all scale as the page is zoomed in or out.
The end result is, to make a size that works for a single resolution and then scales all the way down to the 320w to 3200w resolutions out there. That means, one website, one template, no messing around with a thousand different iterations of the way the site should look.
I spent about a week trying to develop some C# code that could in fact change and set the variables, however, I'm not a seasoned C# veteran, I prefer to write everything in PS.
I understand the limitations of Blazor, and how it 'diffs' the state changes upon rendering, but if BlazorStyled can modify the CSS, then I see no reason why it would be impossible for the window width/height to directly influence the variables that the site runs off of.
I did study drafting and design, I left the field before I was able to study programming and C#/.Net in order to further what I could do with HTML and CSS more than a decade ago... same goes for the MCSE/MCSA curriculum that I also gave up on...
...but I've spent the last year 'catching up' on all of it.
https://youtu.be/Z99zsCwYhWk <- this is what I am attempting to perform in Blazor. This is utilizing javascript and document.queryselector, document.setproperty... I am not certain that it is possible to do these things either with or without JSInterop, and yes... i know how to change the css types with media queries... I'm attempting to build a forloop that captures every possible resolution out there and scales for every pixel within that loop.
But also, considers the fact that the layouts can have multiple formats that correspond to these dynamic variables. So as I've showcased in the video, below 720w the navigation bar will shift to the top, which can be done with native CSS media queries, but what can't be done is changing the DOM elements without screwing up the way Blazor works. I've tried. Even spent a week trying to write the C# code that would use JSInterop and the custom classes and dimensions and change the properties accordingly...
Upon compile... it said "I have failed." It said it a few times... So I was like damn. Spent a whole week trying to do something super cool... and this program looked at me and said "Bro. I don't like this input..."
But what can I do?
Given the nature of ASP.Net/Blazor, I won't post the code because there's a lot of content. I can give you a run down of what I have tried so far...
I found Chris Sainty's old project on github called "browserResize". But I think this breaks the rules of Blazor component [quantization and hyperspeed time space continuum effect displacement of the thermodynamic laws of physics ... everything in these brackets is comic relief]
I already had a fully blown javascript file that had all of the operations I needed inside, but, how do you get Blazor to work when the official Microsoft Blazor FAQ says
"Don't use JS for all that... cause that's lame." -Microsoft
After I read that quote that Microsoft put into the official FAQ... I thought... well, it's time to give it a grade A try anyway ... so I then implemented some classes that create objects in a similar manner to
```
# Heroes in a half 'Shell #
[PSCustomObject]#{
width = "window.innerWidth"
height = "window.innerHeight"
}
```
...only it is a lot more than that.
I made some JSInterop calls based on Nick Chapas' videos about it, and I'm pretty sure that I wrote all that correctly...? Not certain.
Then I made a service that could, upon resizing the window, set all of the corresponding CSS elements, and theoretically change the CSS styling of everything on the page given the conditions I showcase in the video link above.
I'm sure I may have overexplained what I'm attempting to do...? But, I'm burning a lot of time theorizing, not enough 'actually getting work done'. And, there comes a point in time where you may in fact be learning a great deal on new ways to get nowhere... but the case could also be made that 'there are better ways to make use of your time...'
Plz help. Thx bros.
(Edit: At the request of Iraklis, here are the two bits of code I made)
.\ - represents the base repo folder.
.\Data\Controller.cs
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.JSInterop;
namespace ShellBlaze.Data
{
public class Controller
{
public static readonly IJSRuntime JSR;
public class Window
{
public async Task<int> Height()
{
return await JSR.InvokeAsync<int>( "getHeight" );
}
public async Task<int> Width()
{
return await JSR.InvokeAsync<int>( "getWidth" );
}
public async Task<object> QuerySelect( string Tag )
{
return await JSR.InvokeAsync<object>( "querySelect" , Tag );
}
public async Task SetProperty( object ID , string Property , string Value )
{
await JSR.InvokeVoidAsync( "setProperty" , ID , Property , Value );
}
}
public class Stage
{
Controller.Window Windex = new Controller.Window();
Model.Window Win = new Model.Window();
Model.Layout Lay = new Model.Layout();
public async Task<Model.Layout> Action()
{
Win.Height = await Windex.Height();
Win.Width = await Windex.Width();
Win.Side = Win.Width * 0.15f;
Win.Main = Win.Width * 0.85f;
Win.Pixel = Win.Width / 1920;
var Root = Windex.QuerySelect( ":root" );
int[] Ct = { 0, 1, 2, 3 };
string[] Element = { "root" , "side" , "main" , "pixel" };
double[] Unit = { Win.Width , Win.Side , Win.Main , Win.Pixel };
string[] Name = { "#top", "#side", "body" , "#main" };
string[] Property = { "display", "display", "flex-direction", "--content" };
string[] Value = new string[3];
string[] Value1 = { "flex", "none", "column", Win.Width + "px" };
string[] Value2 = { "none", "flex", "row", Win.Main + "px" };
if (Win.Width < 720)
{
Value = Value1;
}
else
{
Value = Value2;
}
foreach (int i in Ct)
{
await Windex.SetProperty( Root, "--" + Element[i], Unit[i] + "px" );
await Windex.SetProperty( Windex.QuerySelect( Name[i] ), Property[i], Value[i] );
}
if (Win.Width > 720)
{
Lay.Type = "top";
Lay.Logo = "toplogo";
Lay.ID = "ti";
Lay.Class0 = "t0";
Lay.Class1 = "t1";
Lay.Class2 = "t2";
Lay.Class3 = "t3";
Lay.Class4 = "t4";
Lay.Class5 = "t5";
Lay.Class6 = "t6";
Lay.String0 = "Home";
Lay.String1 = "App Development";
Lay.String2 = "Network Security";
Lay.String3 = "Enterprise";
Lay.String4 = "OS Management";
Lay.String5 = "Hardware";
Lay.String6 = "Data Management";
return Lay;
}
else
{
Lay.Type = "side";
Lay.Logo = "sidelogo";
Lay.ID = "si";
Lay.Class0 = "t0";
Lay.Class1 = "t1";
Lay.Class2 = "t2";
Lay.Class3 = "t3";
Lay.Class4 = "t4";
Lay.Class5 = "t5";
Lay.Class6 = "t6";
Lay.String0 = "Home";
Lay.String1 = "App<br/>Development";
Lay.String2 = "Network<br/>Security";
Lay.String3 = "Enterprise";
Lay.String4 = "OS<br/>Management";
Lay.String5 = "Hardware";
Lay.String6 = "Data<br/>Management";
return Lay;
}
}
}
public class State
{
public static event Func<Task> Trip;
[JSInvokable]
public static async Task Set()
{
Controller.Stage Stage = new Controller.Stage();
await Stage.Action();
await JSR.InvokeAsync<object>( "setEvent" );
await Trip?.Invoke();
}
}
}
}
.\Data\Model.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace ShellBlaze.Data
{
public class Model
{
public class Layout
{
public string Type { get; set; }
public string Logo { get; set; }
public string ID { get; set; }
public string Class0 { get; set; }
public string Class1 { get; set; }
public string Class2 { get; set; }
public string Class3 { get; set; }
public string Class4 { get; set; }
public string Class5 { get; set; }
public string Class6 { get; set; }
public string String0 { get; set; }
public string String1 { get; set; }
public string String2 { get; set; }
public string String3 { get; set; }
public string String4 { get; set; }
public string String5 { get; set; }
public string String6 { get; set; }
public Layout()
{
Type = null;
Logo = null;
ID = null;
Class0 = null;
Class1 = null;
Class2 = null;
Class3 = null;
Class4 = null;
Class5 = null;
Class6 = null;
String0 = null;
String1 = null;
String2 = null;
String3 = null;
String4 = null;
String5 = null;
String6 = null;
}
public Layout(
string _Type,
string _Logo,
string _ID,
string _Class0,
string _Class1,
string _Class2,
string _Class3,
string _Class4,
string _Class5,
string _Class6,
string _String0,
string _String1,
string _String2,
string _String3,
string _String4,
string _String5,
string _String6
)
{
Type = _Type;
Logo = _Logo;
ID = _ID;
Class0 = _Class0;
Class1 = _Class1;
Class2 = _Class2;
Class3 = _Class3;
Class4 = _Class4;
Class5 = _Class5;
Class6 = _Class6;
String0 = _String0;
String1 = _String1;
String2 = _String2;
String3 = _String3;
String4 = _String4;
String5 = _String5;
String6 = _String6;
}
}
public class Sheet
{
public object ID { get; set; }
public string Tag { get; set; }
public string Property { get; set; }
public string Value { get; set; }
public Sheet()
{
ID = null;
Tag = null;
Property = null;
Value = null;
}
public Sheet( object _ID , string _Tag , string _Property , string _Value )
{
ID = _ID;
Tag = _Tag;
Property = _Property;
Value = _Value;
}
}
public class Window
{
public int Height { get; set; }
public int Width { get; set; }
public double Side { get; set; }
public double Main { get; set; }
public double Pixel { get; set; }
public Window()
{
Height = 0;
Width = 0;
Side = 0.00f;
Main = 0.00f;
Pixel = 0.00f;
}
public Window( int _Height , int _Width , double _Side , double _Main , double _Pixel )
{
Height = _Height;
Width = _Width;
Side = _Side;
Main = _Main;
Pixel = _Pixel;
}
}
}
}
.\Scripts\script.js
function querySelect(Tag)
{
return document.querySelector( '"' + Tag + '"' );
}
function setProperty(ID, Property, Value )
{
ID.style.setProperty( "'" + Property + "'" , "'" + Value + Unit + "'" );
}
function getHeight()
{
return window.innerHeight;
}
function getWidth()
{
return window.innerWidth;
}
function setEvent()
{
DotNet.invokeMethodAsync( "Resize" , "Set" ).then(data => data);
window.addEventListener( "resize" , setEvent() );
}

Is it possible to have a method in C# that implicitly deserializes an argument if it's passed as a JSON string?

Question
I have a handful of ViewComponents that look like so:
public IViewComponentResult Invoke(BuyerViewModel buyer)
I'd like them to be able to accept either a BuyerViewModel, or a JSON string representing a BuyerViewModel. For example, when you pass JSON to a controller method from JavaScript, if that method expects an argument of type Dog, the controller automatically attempts to deserialize the JSON to an instance of Dog. I'm trying to mimic that behavior.
The goal would be that both of these examples work:
var buyer = new BuyerSummaryViewModel() { FirstName = "John" };
ViewComponent("Buyer", buyer);
ViewComponent("Buyer", "{\"Name\":\"John Smith\"}");
Why?
I'm trying to make a generic JavaScript method that can fetch a ViewComponent on the fly:
const fetchViewComponent = async (viewComponentName, viewModel) => {
let data = { viewComponentName, viewModel };
let html = await $.get(`/Order/FetchViewComponent`, data);
return html;
}
//Get a BuyerViewComponent (example)
(async () => {
let component = await fetchViewComponent("Buyer", `#Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Buyer))`);
console.log(component);
})();
What I've Tried
If I specify that the ViewModel is a BuyerViewModel, it works. The JSON string is automatically deserialized into a BuyerViewModel.
public class FetchViewComponentRequest
{
public string ViewComponentName { get; set; }
public BuyerViewModel ViewModel { get; set; }
// ^^^^^^^^^^^^^^
}
[HttpGet]
public IActionResult FetchViewComponent(FetchViewComponentRequest request)
{
return ViewComponent(request.ViewComponentName, request.ViewModel);
}
The Issue
However, I don't want to specify the type; I want this to be generic. So I tried this:
public class FetchViewComponentRequest
{
public string ViewComponentName { get; set; }
public string ViewModel { get; set; }
// ^^^^^^
}
[HttpGet]
public IActionResult FetchViewComponent(FetchViewComponentRequest request)
{
return ViewComponent(request.ViewComponentName, request.ViewModel);
}
But as expected, request.ViewModel isn't the correct type; it ends up null in the Invoke method. I was hoping there was a flag or something more global I could specify so that it tries to implicitly deserialize this string into the expected type.
Is there an easier way to do this that I haven't considered? Or, if not, is the way I'm envisioning even possible?
(I'm using .NET Core 2.2)

Maybe make your FetchViewComponentRequest generic?
public class FetchViewComponentRequest<T>
{
public string ViewComponentName { get; set; }
public T ViewModel { get; set; }
// ^^^^^^^^^^^^^^
}
[HttpGet]
public IActionResult FetchViewComponent(FetchViewComponentRequest<BuyerViewModel> request)
{
return ViewComponent(request.ViewComponentName, request.ViewModel);
}

The method needs to have some knowledge of what type to make the object coming in.
public T Convert<T>(dynamic obj) where T:class,new()
{
T myob = null;
if (obj !=null && obj is T)
{
myob = obj as T;
}
else if (obj is string)
{
//convert to type
myob = JsonConvert.DeserializeObject<T>(obj);
}
return myob;
}

Ok, im not sure about what you need.
But here is a dynamic way to do it, without specifying <T>.
//Assume that the namespace is DynamicTypeDemo
public class DynamicType {
// eg "DynamicTypeDemo.Cat, DynamicTypeDemo"
public string TypeName { get; set; } // the full path to the type
public string JsonString { get; set; }
}
Now you could simple DeserializeObject
public object ToObject(DynamicType dynamicType){
var type = Type.GetType(dynamicType.TypeName);
// Here you could check if the json is list, its really upp to you
// but as an example, i will still add it
if (dynamicType.JsonString.StartsWith("[")) // its a list
type =(List<>).MakeGenericType(type);
return JsonConvert.DeserializeObject(dynamicType.JsonString, type);
}
And here is how it work
var item = new DynamicType(){
TypeName = "DynamicTypeDemo.Cat, DynamicTypeDemo", // or typeof(Cat).AssemblyQualifiedName
JsonString = "{CatName:'Test'}"; // And for a list "[{CatName:'Test'}]"
}
object dynamicObject= ToObject(item); // return it to the javascript
Cat cat = dynamicObject as Cat; // Cast it if you want

Error posting record to db asp.net mvc

I am building a scheduling system using fullcalendar for MVC, my get event retrieves from a view for a specific location.
However, my post / save event inserts into the table that the view is made from, containing all locations.
I am getting an error when I try to add the new event to the data connection.
"The field Location must be a string or array type with a maximum length of '1'." string
PropertyName "Location" string
I tried to set the string for the event manually before adding it to the data connection but this isn't working for some reason. Could it be me not declaring the string correctly?
//Actions for Calendar 5
public JsonResult GetEvents5()
{
using (CalgaryNEEntities dc = new CalgaryNEEntities())
{
var events = dc.CalgaryNEEvents.ToList();
return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
}
[HttpPost]
public JsonResult SaveEvent5(EventsAllLocation e)
{
var status = false;
using (InsertEntities dc = new InsertEntities())
{
if (e.EventID > 0)
{
//Update the event
var v = dc.EventsAllLocations.Where(a => a.EventID == e.EventID).FirstOrDefault();
if (v != null)
{
var locationstring = "Calgary NE Kitchens";
v.CompanyName = e.CompanyName;
v.Start = e.Start;
v.End = e.End;
v.KitchenNumber = e.KitchenNumber;
v.Location = locationstring;
}
}
else
{
var locationstring = "Calgary NE Kitchens";
e.Location = locationstring;
dc.EventsAllLocations.Add(e);
}
dc.SaveChanges();
status = true;
}
return new JsonResult { Data = new { status = status } };
}
Here is the EventsAllLocation definition:
public partial class EventsAllLocation
{
public int EventID { get; set; }
public string Location { get; set; }
public string CompanyName { get; set; }
public System.DateTime Start { get; set; }
public Nullable<System.DateTime> End { get; set; }
public string KitchenNumber { get; set; }
}
Any tips or help would be greatly appreciated, thanks!

The answer is staring you in the face !! LOL
"The field Location must be a string or array type with a maximum
length of '1'." string PropertyName "Location" string

dropdownlist not showing data properly

i have this dropdown list which get the data from db but does not display the data properly n the view
The codes are as follows:
View:
#Html.DropDownListFor(m=> Model.SystemRAteModel.Role, new SelectList(Model.SystemRAteModel.GetRole.Items),"Value","Text")
Model:
public class SystemRolesModel
{
public static RoleProvider Provider { get; internal set; }
public int ID { get; set; }
public String Role { get; set; }
public Boolean Status { get; set; }
public SelectList GetRole { get; set; }
}
Controller
public ActionResult Index()
{
IApplicationLogic app = new ApplicationLogic(session);
RateManagementModel RTM = new RateManagementModel();
var value = app.GetVatValue();
var freight = app.GetFreightValue();
// var systemrolemodel = new SystemRolesModel();
//var currency = new List<SelectList>();
// currency= app.GetListOfRoles();
//IList<string> ERModel = new List<string>();
//foreach (var _currency in currency)
//{
// var curent = _currency.ToString();
// ERModel.Add(curent);
//}
var sysmodel = new SystemRolesModel();
sysmodel.GetRole = getRoleSelectList();
RTM.SystemRAteModel = sysmodel;
ViewData["ViewVatValue"] = value;
//ViewData["ViewCurrency"] = new SelectList(currency);
//ViewBag.LocationList = freight;
ViewData["ViewFreightValue"] = freight;
return View("Index",RTM);
}
public SelectList getRoleSelectList()
{
IApplicationLogic app = new ApplicationLogic(session);
var roles = app.GetListOfRoles();
SystemRoles sr = new SystemRoles();
sr.Id = -1;
sr.Role = "--select role--";
roles.Add(sr);
IEnumerable<SystemRoles> sortedRoles = roles.OrderBy(d => d.Id);
IList<SystemRoles> _sortedRoles = sortedRoles.ToList();
return new SelectList(_sortedRoles, "Id", "Role");
}
i have tried everything on the net but cant get a hand on it. Please any help will do.OutPut of my System At the moment

You don't need to create a new SelectList again in View, as you are already creating that in controller side and passing it via Model, you should be able to directly use it in View like:
#Html.DropDownListFor(m=> Model.SystemRAteModel.Role,Model.SystemRAteModel.GetRole)
This should populate the dropdown with the values, but it would display same values for all the items for now, as your code is setting hard-coded same values for all properties here:
SystemRoles sr = new SystemRoles();
sr.Id = -1;
sr.Role = "--select role--";
roles.Add(sr);
You would need to change it to have proper values.
Another easy way can be to use the constructor of SelectList this way:
public SelectList getRoleSelectList()
{
IApplicationLogic app = new ApplicationLogic(session);
var roles = app.GetListOfRoles().OrderBy(x=> x.RoleID);
return new SelectList(roles.ToList(), "RoleID", "Role");
}
you will just need to replace RoldID and Role property name with the proerty names you have in the DTO.
Hope it helps.

See this example:
#Html.DropDownList("Name", Model.Select(modelItem => new SelectListItem
{
Text = modelItem.Name,
Value = modelItem.Id.ToString(),
Selected = modelItem.Id == "12314124"
}))

JSON.parse for array of object

Server returns the array of object in JSON. It looks so:
{"d":"[
{\"Id\":1,\"IsGood\":true,\"name1\":\"name1dsres\",\"Name2\":\"name2fdsfd\",\"name3\": \"name3fdsgfd\",\"wasBorn\":\"\\/Date(284011000000)\\/\"},
{\"Id\":2,\"IsGood\":false,\"name1\":\"fdsfds\",\"name2\":\"gfd3im543\",\"name3\":\"3543gfdgfd\",\"WasBorned\":\"\\/Date(281486800000)\\/\"}
]"}
I need to parse using JSON.parse function. I'm doing this this way:
function myFunction(dataFromServer){
var parsedJSON = JSON.parse(dataFromServer.d);
for (var item in parsedJSON.d) {
// how do I get the fields of current item?
}
This code is not working, it returns undefined
for (var item in parsedJSON) {
alert(item.Id);
}

This works perfectly
function myFunction(dataFromServer){
var parsedJSON = JSON.parse(dataFromServer.d);
for (var i=0;i<parsedJSON.length;i++) {
alert(parsedJSON[i].Id);
}
}
But this doens't
function myFunction(dataFromServer){
var parsedJSON = JSON.parse(dataFromServer.d);
for (var item in parsedJSON) {
alert(item.Id);
}
}

You can just access them as you would any object:
var id = item.Id;
if (item.IsGood) { ... }
If you wish to enumerate them to use somehow, have a look at this SO question.

You can access them as you do oridinary javascript objects,
that is either as item.id or item['id']

class Program
{
static void Main(string[] args)
{
var jsonString = #"{
""data"": [
{
""uid"": ""100001648098091"",
""first_name"": ""Payal"",
""last_name"": ""Sinha"",
""sex"": ""female"",
""pic_big_with_logo"": ""https://m.ak.fbcdn.net/external.ak/safe_image.php?d=AQAi8VLrTMB-UUEs&bust=1&url=https%3A%2F%2Fscontent-a.xx.fbcdn.net%2Fhprofile-ash2%2Fv%2Ft1.0-1%2Fs200x200%2F10018_433988026666130_85247169_n.jpg%3Foh%3Dc2774db94dff4dc9f393070c9715ef65%26oe%3D552CF366&logo&v=5&w=200&h=150"",
""username"": ""payal.sinha.505"",
},
]
}";
dynamic userinfo = JValue.Parse(jsonString);
IList<FacebookUserDetail> userDeatils = new List<FacebookUserDetail>();
// 1st method
foreach (dynamic userinfoItr in userinfo.data)
{
FacebookUserDetail userdetail= userinfoItr.ToObject<FacebookUserDetail>();
userDeatils.Add(userdetail);
}
// 2nd Method
var userDeatils1 = JsonConvert.DeserializeObject<FacebookUserDetails>(jsonString);
}
}
public class FacebookUserDetail
{
public string username { get; set; }
//Password = EncryptionClass.Md5Hash(Guid.NewGuid().ToString()),
public string first_name { get; set; }
public string last_name { get; set; }
public string sex { get; set; }
public string pic_big_with_log { get; set; }
}
enter code here
public class FacebookUserDetails
{
public IList<FacebookUserDetail> data { get; set; }
}
}