I tried to edit the modul tailwind, like in a tutorial. I followd the instructions but still got the same problem.
Problem:
Unknown at rule #tailwind
Unknown at rule #apply
#tailwind base;
#tailwind components;
#tailwind utilities;
body {
#apply bg-gray-50;
}
#layer components {
.btn {
#apply bg-[#12b488] text-white px-3 py-2 rounded-md text-sm text-white;
}
}
Related
I am trying to display a subject name for a course where I saved the subject from a database driven dropdown list in a client-side Blazor app. The value returns as a Guid instead of the subject name. Has anyone accomplished this with Blazor? I couldn't find anything in the Blazor documentation or any tutorials that could solve the issue I'm having. This is in Blazor client-side and I am using Entity Framework Core
This is what my Course model looks like in the Shared project:
public class Course
{
public Guid CourseID { get; set; }
[Required]
public string CourseCode { get; set; }
[Required]
public string CourseName { get; set; }
public string CourseSubject { get; set; }
public string CourseCredits { get; set; }
}
This is what my Subject model looks like in the Shared project:
public class Subject
{
public Guid SubjectID { get; set; }
public string SubjectName { get; set; }
}
This is my CourseData Data Access Model in the Server project:
ApplicationDbContext db = new ApplicationDbContext ();
public IEnumerable<Course> GetAllCourses()
{
try
{
return db.Courses.ToList();
}
catch
{
throw;
}
}
public void AddCourse(Course course)
{
try
{
db.Courses.Add(course);
db.SaveChanges();
}
catch
{
throw;
}
}
This is my SubjectData Data Access Model in the Server project:
ApplicationDbContext db = new ApplicationDbContext ();
public IEnumerable<Subject> GetAllSubjects()
{
try
{
return db.Subjects.ToList();
}
catch
{
throw;
}
}
public void AddSubject(Subject subject)
{
try
{
db.Subjects.Add(subject);
db.SaveChanges();
}
catch
{
throw;
}
}
This is my Course Controller in the Server project:
CourseData objcourse = new CourseData();
[HttpGet]
[Route("api/Courses/Courses")]
public IEnumerable<Course> Index()
{
return objcourse.GetAllCourses();
}
[HttpPost]
[Route("api/Courses/Create")]
public void Create([FromBody] Course course)
{
if (ModelState.IsValid)
objcourse.AddCourse(course);
}
This is how I save the value in my Course creation page in my Client project:
#page "/Courses/Create"
#inject HttpClient Http
#inject Microsoft.AspNetCore.Components.NavigationManager NavigationManager
<h1>Add Course</h1>
<hr />
<div class="row">
<div class="col-md-4">
<div>
<div class="form-group">
<label for="CourseCode" class="control-label">Course Code</label>
<input for="CourseCode" class="form-control" #bind="#course.CourseCode" />
</div>
<div class="form-group">
<label for="CourseName" class="control-label">Course Name</label>
<input for="CourseName" class="form-control" #bind="#course.CourseName" />
</div>
<div class="form-group">
<label for="CourseSubject" class="control-label">Subject</label>
<select class="form-control" #bind="#course.CourseSubject">
<option></option>
#foreach (var subject in subjectList)
{
<option value="#subject.SubjectID">#subject.SubjectName</option>
}
</select>
</div>
<div class="form-group">
<label for="CourseCredits" class="control-label">Course Credits</label>
<input for="CourseCredits" class="form-control" #bind="#course.CourseCredits" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" #onclick="#CreateCourse">Save</button>
<button class="btn" #onclick="#cancel">Cancel</button>
</div>
</div>
</div>
</div>
#functions {
List<Subject> subjectList = new List<Subject>();
Course course = new Course();
protected override async Task OnInitializedAsync()
{
subjectList = await Http.GetJsonAsync<List<Subject>>("api/Subjects/Subjects");
}
protected async Task CreateCourse()
{
await Http.SendJsonAsync(HttpMethod.Post, "/api/Courses/Create", course);
NavigationManager.NavigateTo("/Courses/Courses");
}
void cancel()
{
NavigationManager.NavigateTo("/Courses/Courses");
}
}
And finally this is my Courses list page in my Client project where it returns the Guid for the subject name, for which I would like to show the subject name instead of it's Guid:
#page "/Courses/Courses"
#inject HttpClient Http
<h1>Courses</h1>
<p>
Create New
</p>
#if (courseList == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class='table'>
<thead>
<tr>
<th>Course Code</th>
<th>Course Name</th>
<th>Subject</th>
<th>Credits</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach (var course in courseList)
{
<tr>
<td>#course.CourseCode</td>
<td>#course.CourseName</td>
<td>#course.CourseSubject</td>
<td>#course.CourseCredits</td>
<td>
<a href='/Courses/Edit/#course.CourseID'>Edit</a> |
<a href='/Courses/Delete/#course.CourseID'>Delete</a>
</td>
</tr>
}
</tbody>
</table>
}
#functions {
Course[] courseList;
protected override async Task OnInitializedAsync()
{
courseList = await Http.GetJsonAsync<Course[]>
("/api/Courses/Courses");
}
}
Database Context as requested:
public class ApplicationDbContext : DbContext
{
public virtual DbSet<Course> Courses { get; set; }
public virtual DbSet<Subject> Subjects { get; set; }
protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
{
if (!optionsBuilder.IsConfigured)
{
optionsBuilder.UseSqlServer(#"REMOVED-FOR-SECURITY");
}
}
}
Help would be much appreciated.
Other answers are good but let me give you something else to think about...
When writing Blazor apps try to think in terms of components more often than of code.
For example, let's say that the Subjects are static data that doesn't change a lot. So if every time you show a list, or want to build a dropdown for them, you're potentially going to have to make a database call or a SQL JOIN? So my first thought would be to create a lookup cache for GUID-to-Subject-name. And since this is Blazor if it's cached on the client you no longer need to make a database or API call - it's loaded once.
Then, since we're in Blazor, I'd create a <SubjectName> component, e.g.
Subject: <SubjectName Id="#Model.SubjectId" />
The component uses the cache to get the value, it can handle a null value, it can handle an invalid subject ID. You've encapsulated a lot of behaviour and error handling in a single place, and can re-use that every time you need to map an ID to a subject name.
Similarly I'd create a <SubjectDropdown> component to show a list of subjects, again using the cache.
You set CourseSubject with the SubjectID with is a Guid, so you get a Guid.
If you want to display the subject name either, request the subject by its Guid, or return the Subject in your course:
public class Course
{
public Guid CourseID { get; set; }
[Required]
public string CourseCode { get; set; }
[Required]
public string CourseName { get; set; }
public string CourseSubject { get; set; }
public string CourseCredits { get; set; }
public virtual Subject Subject { get; set; }
}
public IEnumerable<Course> GetAllCourses()
{
try
{
return db.Courses
.Include(c => c.Subject)
.ToList();
}
catch
{
throw;
}
...
}
#foreach (var course in courseList)
{
<tr>
<td>#course.CourseCode</td>
<td>#course.CourseName</td>
<td>#course.Subject.SubjectName</td>
<td>#course.CourseCredits</td>
<td>
<a href='/Courses/Edit/#course.CourseID'>Edit</a> |
<a href='/Courses/Delete/#course.CourseID'>Delete</a>
</td>
</tr>
}
I am working on Angular 5 and I have a form with a field username. I want to integrate a custom validation for minimum character length and avoid blank space.
<input type="text" class="form-control " id="account-details-username" placeholder="" formControlName="username" >
<div *ngIf="form.get('accountDetails.username').touched && form.get('accountDetails.username').invalid" class="alert alert-danger">
<div *ngIf="form.get('accountDetails.username').errors.required">Username is required.</div>
<div *ngIf="form.get('accountDetails.username').errors.minimumSix">Username must contain at least 6 characters</div>
<div *ngIf="form.get('accountDetails.username').errors.blankSpace">Username does not contain blank space.</div>
</div>
I tried to create a custom method for that. But invoking the first condition only.
test(control: any) {
console.log(control.value);
let minimumSix = new RegExp("^[a-zA-Z0-9!##$%^&*]{6,}");
if (!minimumSix.test(control.value)) {
return { 'minimumSix': true };
}
if(control.value.match("^\\s+$")) {
console.log("blank");
return { 'blankSpace': true };
}
return null;
}
Not checking the blank space validation.
I'd suggest the following solution, when it comes to blanks.
const blankSpace = /^\S*$/;
if (!blankSpace.test(control.value)) {
console.log("blank");
return { 'blankSpace': true };
}
So your full method should look like this:
test(control: any) {
const minimumSix = new RegExp("^[a-zA-Z0-9!##$%^&*]{6,}");
const blankSpace = /^\S*$/;
if (!minimumSix.test(control.value)) {
return { 'minimumSix': true };
}
if (!blankSpace.test(control.value)) {
console.log("blank");
return { 'blankSpace': true };
}
return null;
}
I created an Entity Listener to upload pictures.
Entity Listener
<?php
namespace AppBundle\Listener;
use ...
class PictureListener
{
private $manager;
public function __construct(PictureManager $manager)
{
$this->manager = $manager;
}
public function prePersist(PictureInterface $entity, LifecycleEventArgs $event)
{
$this->uploadFile($entity);
}
public function preUpdate(PictureInterface $entity, LifecycleEventArgs $event)
{
$this->uploadFile($entity);
}
public function postLoad(PictureInterface $entity, LifecycleEventArgs $event)
{
$fileName = $entity->getPicture();
if($fileName == NULL) {
return;
}
$file = new File($this->manager->getUploadDir().'/'.$fileName);
$entity->setPicture($file);
}
private function uploadFile($entity)
{
$file = $entity->getPicture();
if (!$file instanceof UploadedFile) {
return;
}
$fileName = $this->manager->upload($file);
$entity->setPicture($fileName);
}
}
Picture Manager
<?php
namespace AppBundle\Utils;
use Symfony\Component\HttpFoundation\File\UploadedFile;
class PictureManager
{
private $uploadDir;
public function __construct($uploadDir)
{
$this->uploadDir = $uploadDir;
}
public function upload(UploadedFile $file)
{
$fileName = md5(uniqid()).'.'.$file->guessExtension();
$file->move($this->uploadDir, $fileName);
return $fileName;
}
public function getUploadDir()
{
return $this->uploadDir;
}
}
I use the postLoad to get the absolute path of my pic and just call:
<img class="img-thumbnail" src="{{ category.picture }}" alt="{{ category.name }}">
to display it.
The generating src is
/Users/*******/Projects/*******/app/../web/uploads/pictures/8fcdaf996f1a30c5b64423ebc1284391.jpeg
and Symfony seems to not like absolute path because it does not work. 404 error. The upload file is in the right place.
Please try asset() in twig. It will target web folder of your application.
Syntax:
{{ asset('<File Name>') }}
Replace:
<img class="img-thumbnail" src="{{ category.picture }}" alt="{{ category.name }}">
With
<img class="img-thumbnail" src="{{ asset('uploads/pictures/'~category.picture) }}" alt="{{ category.name }}">
I have used it in symfony 2.3. Hope it will solve your issue
I writing some code with C# and MVC and I have button for sorting a list of data by asc and desc. The logic works in my controller, I am able to call the method that sorts the list and in the breakpoint I can see that it has been sorted.
But it's weird because when I loop through my list in the partial view it never works. I use a breakpoint in my view to make sure it's the same order of items which it is. But it's like the new values don't render to the screen.
TeamManagement.cshtml
#model Website.Models.modelTeamSelect
#{
ViewBag.Title = "Football App";
}
#section featured {
}
#using (Ajax.BeginForm("_PartialTeams",
new
{
model = this.Model
},
new AjaxOptions
{
HttpMethod = "POST",
UpdateTargetId = "divCreatedTeams",
InsertionMode = InsertionMode.Replace
}))
{
<div id="divTeams" style="float: left; padding: 10px;">
<h3>Create a new team:</h3>
#Html.LabelFor(m => m.team.TeamName)
#Html.TextBoxFor(m => m.team.TeamName)
<input type="submit" value="Add Team" name="btnSubmit" />
</div>
Html.RenderPartial("~/Views/Partials/_PartialTeams.cshtml");
}
_PartialTeams.cshtml
#model Website.Models.modelTeamSelect
<div id="divCreatedTeams" style="float: left; padding: 10px;">
<h3>Your created teams:</h3>
<input type="submit" value="Asc" name="btnSubmit" />
<input type="submit" value="Desc" name="btnSubmit" />
<br />
#if (Model.teams.Count > 0)
{
for (int i = 0; i < Model.teams.Count; i++)
{
#Html.EditorFor(m => m.teams[i].TeamName)
<input type="button" value="Update team name" name="btnSubmit"/>
<input type="button" value="Remove team" name="btnSubmit"/>
<br />
}
}
</div>
Sorting logic in my controller
[HttpPost]
public PartialViewResult _PartialTeams(string BtnSubmit, modelTeamSelect modelTeamSelect)
{
switch (BtnSubmit)
{
case "Add Team":
modelTeamSelect.teams.Add(modelTeamSelect.team);
break;
case "Asc":
FootballRepository = new Repository.FootballRepository();
modelTeamSelect.teams = FootballRepository.Sort(modelTeamSelect, BtnSubmit);
break;
case "Desc":
FootballRepository = new Repository.FootballRepository();
modelTeamSelect.teams = FootballRepository.Sort(modelTeamSelect, BtnSubmit);
break;
}
return PartialView("~/Views/Partials/_PartialTeams.cshtml", modelTeamSelect);
}
public List<Models.modelTeam> Sort(Models.modelTeamSelect modelTeamSelect, string sort)
{
switch (sort)
{
case "Asc":
modelTeamSelect.teams = modelTeamSelect.teams.OrderBy(t => t.TeamName).ToList();
break;
case "Desc":
modelTeamSelect.teams = modelTeamSelect.teams.OrderByDescending(t => t.TeamName).ToList();
break;
}
return modelTeamSelect.teams;
}
My main model with team collection
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Website.Models
{
public class modelTeamSelect
{
public modelTeamSelect()
{
teams = new List<modelTeam>();
team = new modelTeam();
}
public List<modelTeam> teams { get; set; }
public modelTeam team { get; set; }
}
}
My method Sort does it's job but in the view it never displays correctly. e.g. always wrong order.
Anyone have any ideas because I am stuck.
Screenshots
In the screenshots I click sort by Asc and you can see it says Newcastle as the first item in the list. But when the page renders it will say West Ham first even though it is iterating using the for loop.
All the Html helpers are preferring to use the ModelState values over the actual model values.
So even you have sorted in place your modelTeamSelect.teams in your action in the view #Html.EditorFor(m => m.teams[i].TeamName) call will use the original (before sorting) values form the ModelState.
The solution: if you are updating your action parameters in-place then just clear the ModelState before returning the View/PartialView:
[HttpPost]
public PartialViewResult _PartialTeams(string BtnSubmit,
modelTeamSelect modelTeamSelect)
{
// ... Do the sorting, etc.
ModelState.Clear();
return PartialView("~/Views/Partials/_PartialTeams.cshtml", modelTeamSelect);
}
You can read more about why the helpers are working like this in this article: ASP.NET MVC Postbacks and HtmlHelper Controls ignoring Model Changes
So, I'm following this article to customise the Html.EditorForModel template. Had it working - fine.
I tried converting it to Razor (Object.cshtml) and get:
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: CS0115: 'ASP._Page_Views_Shared_EditorTemplates_Object_cshtml.Execute()': no suitable method found to override
Source Error:
Line 44: }
Line 45:
Line 46: public override void Execute() {
Line 47:
Line 48:
Here's the code
#inherits System.Web.Mvc.ViewUserControl
#{ var count = 0; }
#if (ViewData.TemplateInfo.TemplateDepth > 1) {
#ViewData.ModelMetadata.SimpleDisplayText
}
else {
<table class="form">
<tr>
#foreach (var prop in ViewData.ModelMetadata.Properties.Where(pm => pm.ShowForEdit && !ViewData.TemplateInfo.Visited(pm))) {
if(prop.HideSurroundingHtml) {
#Html.Editor(prop.PropertyName)
}
else {
if(count == 2) {
count = 0;
#:</tr><tr>
}
else {
count++;
}
<td>hi
<div class="editor-label" style="text-align: right;">
#prop.IsRequired ? "*" : ""
#Html.Label(prop.PropertyName)
</div>
</td>
<td>
<div class="editor-field">
#Html.Editor(prop.PropertyName)
#Html.ValidationMessage(prop.PropertyName, "*")
</div>
</td>
}
}
</tr>
</table>
}
I'm out of guesswork.
"Interestingly" when the template is called "_Object.cshtml", #Html.EditorForModel("~/Views/Shared/EditorTemplates/_Object.cshtml") is completely ignored and the default template is used, so knowing why is has to be called "Object" would be a nice to know.
Try removing the first line (the #inherits stuff):
#{ var count = 0; }
#if (ViewData.TemplateInfo.TemplateDepth > 1) {
#ViewData.ModelMetadata.SimpleDisplayText
}
else {
<table class="form">
<tr>
#foreach (var prop in ViewData.ModelMetadata.Properties.Where(pm => pm.ShowForEdit && !ViewData.TemplateInfo.Visited(pm))) {
if(prop.HideSurroundingHtml) {
#Html.Editor(prop.PropertyName)
}
else {
if(count == 2) {
count = 0;
#:</tr><tr>
}
else {
count++;
}
<td>hi
<div class="editor-label" style="text-align: right;">
#if (prop.IsRequired)
{
#:*
}
#Html.Label(prop.PropertyName)
</div>
</td>
<td>
<div class="editor-field">
#Html.Editor(prop.PropertyName)
#Html.ValidationMessage(prop.PropertyName, "*")
</div>
</td>
}
}
</tr>
</table>
}
Also notice the way I rewrote the #prop.IsRequired test.