ASP.NET Core MVC app : I want to show the same view after submit and render the same data but having problems - view

I am new to ASP.NET Core MVC but I do have some experience working with ASP.NET webforms. I am creating an ASP.NET Core MVC project for practice in this I have a controller which has [http post] Create and Http Get Create action methods.
When user is on the Create page after entering the data user can click the submit button and once the data is saved, the view for http post Create() is render (reloading same view) and I am trying to show the data that user has filled prior to submit but data is not binding to the input controls. I am passing the same model to the view which was sent to be saved. During the debug and I am able to see the expected value under the Locals window in Visual Studio.
I want to understand what I am doing wrong or what changes I should be doing in order to work. If I need to take the different approach then why this the approach (mentioned below in code) I am taking is not correct?
Below is the code and explanation in the comments.
[HttpGet]
public async Task<IActionResult> Create()
{
// I am creating a viewModel object because wanted to include the logic for List<users> for dropdown.
var createView = await _chloramine.ChloramineSaveViewModel();
return View(createView);
}
[HttpPost]
// At page submit this Action method is called and data is saved.
public async Task<IActionResult> Create(ChloramineLogEditSaveViewModel clEditSaveViewModel)
{
_chloramine.CreateChloramineLog(clEditSaveViewModel);
// After data is saved I am adding a user list to the model because I was getting Object null error.
clEditSaveViewModel.User = await _chloramine.GetUser();
// Passing the same model object which was received in order to show what was filled or selected by the user.
return View(clEditSaveViewModel);
}
Below is the Create view html.
#model EquipmentMVC.Models.ChloramineLogEditSaveViewModel
#{
ViewData["Title"] = "Create";
}
<hr />
<div>
<form asp-action="Create">
<div class="form-group row">
#foreach (var item in Model.User)
{
#Html.HiddenFor(model => item)
}
<label asp-for="TimeDue" class="col-sm-2 col-form-label control-label"></label>
<div class="col-sm-8">
<input asp-for="TimeDue" value="" class="form-control" />
</div>
</div>
<div class="form-group row">
<label asp-for="PostPrimaryCarbanTankTp1" class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" asp-for="PostPrimaryCarbanTankTp1" />
</label>
</div>
</div>
</div>
<div class="form-group row">
<label asp-for="Comments" class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<input asp-for="Comments" class="form-control" />
</div>
</div>
<div class="form-group row">
<label asp-for="IsCompleted" class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<div class="form-check">
<input class="form-check-input" asp-for="IsCompleted" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Technician</label>
<div class="col-sm-8">
<select asp-for="Selected" asp-items=#(new SelectList(Model.User,"Id","Name"))>
<option value="">Select...</option>
</select>
#*<span asp-validation-for="Selected" class="text-danger"></span>*#
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">RN</label>
<div class="col-sm-8">
<select asp-for="RnSelected" asp-items=#(new SelectList(Model.User,"Id","Name"))>
<option value="">Select...</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<input type="submit" value="Create" class="btn btn-secondary" />
</div>
</div>
<div><span asp-validation-for="TimeDue" class="text-danger"></span></div>
<div><span asp-validation-for="Comments" class="text-danger"></span></div>
<div><span asp-validation-for="IsCompleted" class="text-danger"></span></div>
</form>
</div>

I tested your code and found that it runs very well in my project.
Except for TimeDue, the field is not successfully bound, the rest of the fields are bound successfully.
I don’t know if you have the same problem. The TimeDue is not successful binding is because you set the Value in the view.
Please delete the value in this field in the view:
<input asp-for="TimeDue" class="form-control" />
Result:
By the way,your User is null only because your User is not successfully bound, you can modify your loop code as follows:
#for (int i = 0; i < Model.User.Count(); i++)
{
<input type="hidden" name="User[#i].Id" value=#Model.User[i].Id />
<input type="hidden" name="User[#i].Name" value=#Model.User[i].Name />
}
Then in your Create action:
[HttpPost]
public IActionResult Create(ChloramineLogEditSaveViewModel clEditSaveViewModel)
{
return View(clEditSaveViewModel);
}
Result:
Edit:
My codes:
Controller:
public IActionResult Create()
{
var model = new ChloramineLogEditSaveViewModel
{
Id = 1,
Comments = "aaaa",
PostPrimaryCarbanTankTp1 = "fjsdgk",
TimeDue = "bbbbbb",
IsCompleted=true,
RnSelected="gggg",
Selected="sgs",
User=new List<User>
{
new User{
Id=1,
Name="aa"
},
new User
{
Id=2,
Name="bb"
}
}
};
return View(model);
}
[HttpPost]
public IActionResult Create(ChloramineLogEditSaveViewModel clEditSaveViewModel)
{
return View(clEditSaveViewModel);
}
View:
<form asp-action="Create">
<div class="form-group row">
#for (int i = 0; i < Model.User.Count(); i++)
{
<input type="hidden" name="User[#i].Id" value=#Model.User[i].Id />
<input type="hidden" name="User[#i].Name" value=#Model.User[i].Name />
}
<label asp-for="TimeDue" class="col-sm-2 col-form-label control-label"></label>
<div class="col-sm-8">
<input asp-for="TimeDue" class="form-control" />
</div>
</div>
<div class="form-group row">
<label asp-for="PostPrimaryCarbanTankTp1" class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" asp-for="PostPrimaryCarbanTankTp1" />
</label>
</div>
</div>
</div>
<div class="form-group row">
<label asp-for="Comments" class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<input asp-for="Comments" class="form-control" />
</div>
</div>
<div class="form-group row">
<label asp-for="IsCompleted" class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<div class="form-check">
<input class="form-check-input" asp-for="IsCompleted" />
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Technician</label>
<div class="col-sm-8">
<select asp-for="Selected" asp-items=#(new SelectList(Model.User,"Id","Name"))>
<option value="">Select...</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">RN</label>
<div class="col-sm-8">
<select asp-for="RnSelected" asp-items=#(new SelectList(Model.User,"Id","Name"))>
<option value="">Select...</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-8">
<input type="submit" value="Create" class="btn btn-secondary" />
</div>
</div>
<div><span asp-validation-for="TimeDue" class="text-danger"></span></div>
<div><span asp-validation-for="Comments" class="text-danger"></span></div>
<div><span asp-validation-for="IsCompleted" class="text-danger"></span></div>
</form>

Related

Method Illuminate\Database\Eloquent\Collection::save does not exist

i have a problem when updating the database
error: Method Illuminate\Database\Eloquent\Collection::save does not exist.
controller:
public function actualizar(Request $request){
$nuevoIngreso = \App\Models\Servicio::all();
$nuevoIngreso->costo = $request->costo;
$nuevoIngreso->duracion = $request->duracion;
$nuevoIngreso->mantenimiento = $request->mantenimiento;
$nuevoIngreso->save();
return redirect('servicios')->with('mensaje', 'Ficha Actualizada.');
}
blade.php
<form method="POST" action="{{ route('actualizar') }}">
{{method_field('PUT')}}
#csrf
#foreach ($servicios as $costo)
<h1 class="text-center text-primary"> {{$costo->tipo}} </h1>
<div class="form-group row">
<label for="example-text-input" class="col-md-2 col-form-label form-control-label">Costo</label>
<div class="col-md-10">
<input class="form-control" type="text" value="{{$costo->costo}}">
</div>
<label for="example-text-input" class="col-md-2 col-form-label form-control-label">Duración</label>
<div class="col-md-10">
<input class="form-control" type="text" value="{{$costo->duracion}}" id="example-text-input">
</div>
<label for="example-text-input" class="col-md-2 col-form-label form-control-label">Mantenimiento</label>
<div class="col-md-10">
<input class="form-control" type="text" value="{{$costo->mantenimiento}}" id="example-text-input">
</div>
</div>
<hr>
#endforeach
<button type="submit" class="btn btn-success float-right" float-rightdata-toggle="sweet-alert" data-sweet-alert="success">SAVE</button>
</form>
help please
Error is clear.you are calling static method all().So it should be
$nuevoIngreso =new \App\Models\Servicio();
$nuevoIngreso->costo = $request->costo;
$nuevoIngreso->duracion = $request->duracion;
$nuevoIngreso->mantenimiento = $request->mantenimiento;
$nuevoIngreso->save();
So if you are thinking to update particular record then find by id or any column
$nuevoIngreso =new \App\Models\Servicio::find($id);
$nuevoIngreso->costo = $request->costo;
$nuevoIngreso->duracion = $request->duracion;
$nuevoIngreso->mantenimiento = $request->mantenimiento;
$nuevoIngreso->save();
Updated
<form method="POST" action="{{ route('actualizar') }}">
{{method_field('PUT')}}
#csrf
#foreach ($servicios as $key=>$costo)
<h1 class="text-center text-primary"> {{$costo->tipo}} </h1>
<input class="form-control" type="hidden" value="{{$costo->id}}" name="service[{{$key}}][id]">
<div class="form-group row">
<label for="example-text-input" class="col-md-2 col-form-label form-control-label">Costo</label>
<div class="col-md-10">
<input class="form-control" type="text" value="{{$costo->costo}}" name="service[{{$key}}][costo]">
</div>
<label for="example-text-input" class="col-md-2 col-form-label form-control-label">Duración</label>
<div class="col-md-10">
<input class="form-control" type="text" value="{{$costo->duracion}}" id="example-text-input" name="service[{{$key}}][duracion]">
</div>
<label for="example-text-input" class="col-md-2 col-form-label form-control-label">Mantenimiento</label>
<div class="col-md-10">
<input class="form-control" type="text" value="{{$costo->mantenimiento}}" id="example-text-input" name="service[{{$key}}][mantenimiento]">
</div>
</div>
<hr>
#endforeach
<button type="submit" class="btn btn-success float-right" float-rightdata-toggle="sweet-alert" data-sweet-alert="success">SAVE</button>
</form>
Then in controller
foreach($request->service as $key=>$value){
$nuevoIngreso =new \App\Models\Servicio::find($value['id']);
if($nuevoIngreso){
$nuevoIngreso->costo = $value['costo'];
$nuevoIngreso->duracion = $value['duracion'];
$nuevoIngreso->mantenimiento = $value['mantenimiento'];
$nuevoIngreso->save();
}
}

How can I hide and display part of the form on a condition?

I want to use the same form to perform two different operations, and hide and display part of the form on a condition. Let's say if the text of the submit button is "SAVE" admissionNumber input field will not display but if the button text of the submit button is "UPDATE" admissionNumber input field will display. Below is the code sample
registerForm.html the same for being used to register and update student information
<div layout:fragment="content" class="container mySpace">
<form method="post" th:object="${student}" th:action="#{/register}">
<div class="card cardspace">
<h5 class="card-header" th:text="${chead}"></h5>
<div class="card card-body">
<div class="form-row">
<div class="col-9">
<div class="row">
i want to be able hide admissionNumber field if the btname is save and display it if the btname changes to update
<div class="form-group col" th:if="${btnname} == 'Submit'">
<label for="admissionNumber">Admission Number</label> <input
type="text" class="form-control" id="admissionNumber"
th:field="*{admissionNumber}">
<div class="text text-danger"
th:if="${#fields.hasErrors('admissionNumber')}"
th:errors="*{admissionNumber}"></div>
</div>
<div class="form-group col" th:unless="${btnname} == 'Update'">
<label for="admissionNumber">Admission Number</label> <input
type="text" class="form-control" id="admissionNumber"
th:field="*{admissionNumber}">
<div class="text text-danger"
th:if="${#fields.hasErrors('admissionNumber')}"
th:errors="*{admissionNumber}"></div>
</div>
<div class="form-group col">
<label for="firstName">First Name</label> <input type="text"
class="form-control" id="firstName" th:field="*{firstName}">
<div class="text text-danger"
th:if="${#fields.hasErrors('firstName')}"
th:errors="*{firstName}"></div>
</div>
<div class="form-group col">
<label for="lastName">Last Name</label> <input type="text"
class="form-control" id="lastName" th:field="*{lastName}">
<div class="text text-danger"
th:if="${#fields.hasErrors('lastName')}"
th:errors="*{lastName}"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" th:text="${btnname}"></button>
</form>
student controller class
#Controller
public class StudentController {
#Autowired
private StudentServices studentServices;
displays the registration form
#GetMapping("/register")
public String showStudentRegistrationForm(Model model ) {
model.addAttribute("student", new Student());
model.addAttribute("chead", "Student Enrollment");// for card-header title h5 tag
model.addAttribute("btnname", "Submit"); // for button text
return "views/studentRegistrationForm";
}
displays the edit or update form
#GetMapping("/editStudent")
public String showStudentRegistrationEditForm(Model model ) {
model.addAttribute("student", new Student());
model.addAttribute("chead", "Edit Student Enrollment");
model.addAttribute("btnname", "Update");
return "views/studentRegistrationForm";
}
}
what you want is th:if tag, you got it almost right but whole wxpression needs to be in brackets th:if="${btnname == 'Submit'}"

In the contact creation I want to assign a customer or supplier from a dropdown

I have two problems.
1. Problem: When I add my selection to the razor page all required fields validation from the model do not work anymore.
Validation from model without selection
No Validation when I add my selection
When dropdown are in the Razor html no validation works and it crashes with NULL Values which I want to prevent. Like it is without select options.
Why is that?
2. Problem: When I select a customer from my drop down (CustomerDropDown.CusId) I would like to fill the ID into my ID field of contacts (contacts.CustomerId). How can I reach the selected value from dropdown and post it to my contact contacts.CustomerId?
== c# code ==
using System;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Mvc.Rendering;
using WorkCollaboration.Data;
using WorkCollaboration.Models;
namespace WorkCollaboration.Pages.Contacts
{
public class CreateModel : PageModel
{
private readonly WorkCollaboration.Data.WorkCollaborationContext _context;
public CreateModel(WorkCollaboration.Data.WorkCollaborationContext context)
{
_context = context;
}
public async Task<IActionResult> OnGetAsync()
{
CustomerDropDownDisp = await _context.CustomerDropDown.ToListAsync(); // Added for DropDown
SupplierDropDownDisp = await _context.SupplierDropDown.ToListAsync(); // Added for DropDown
return Page();
}
[BindProperty]
public Contact Contact { get; set; }
public IEnumerable<CustomerDropDown> CustomerDropDownDisp { get; set; }
public IEnumerable<SupplierDropDown> SupplierDropDownDisp { get; set; }
// To protect from overposting attacks, enable the specific properties you want to bind to, for
// more details, see https://aka.ms/RazorPagesCRUD.
public async Task<IActionResult> OnPostAsync()
{
if (!ModelState.IsValid)
{
return Page();
}
_context.Contact.Add(Contact);
await _context.SaveChangesAsync();
return RedirectToPage("/ContactsOverview/Index");
}
}
}
== Razor Page Code ==
#page
#using WorkCollaboration.Models
#model WorkCollaboration.Pages.Contacts.CreateModel
#{
ViewData["Title"] = "Create";
ViewData["RandomId"] = Guid.NewGuid().GetHashCode();
}
<h1>Create</h1>
<h4>Contact</h4>
<p>
<a asp-page="/ContactsOverview/Index">Back to Index</a>
</p>
<hr />
<div class="row">
<div class="col-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Contact.ContactId" class="control-label"></label>
<input asp-for="Contact.ContactId" value='#ViewData["RandomId"]' readonly="readonly" class="form-control" />
<span asp-validation-for="Contact.ContactId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.LastName" class="control-label"></label>
<input asp-for="Contact.LastName" class="form-control" />
<span asp-validation-for="Contact.LastName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.FirstName" class="control-label"></label>
<input asp-for="Contact.FirstName" class="form-control" />
<span asp-validation-for="Contact.FirstName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.CustomerId" class="control-label"></label>
</div>
<select id="CusId" asp-for="CustomerDropDownDisp" asp-items="#(new SelectList(Model.CustomerDropDownDisp,"CusId","CusName"))">
<option value="">--Choose Customer--</option>
<option value="1" selected>None</option>>
</select>
<div class="form-group">
<input asp-for="Contact.CustomerId" class="form-control" />
<span asp-validation-for="Contact.CustomerId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.SupplierId" class="control-label"></label>
</div>
<select id="SupId" asp-for="SupplierDropDownDisp" asp-items="#(new SelectList(Model.SupplierDropDownDisp,"SupId","SupName"))">
<option value="">--Choose Supplier--</option>
<option value="1" selected>None</option>>
</select>
<div class="form-group">
<input asp-for="Contact.SupplierId" class="form-control" />
<span asp-validation-for="Contact.SupplierId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreet" class="control-label"></label>
<input asp-for="Contact.PrivateStreet" class="form-control" />
<span asp-validation-for="Contact.PrivateStreet" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreetNo" class="control-label"></label>
<input asp-for="Contact.PrivateStreetNo" class="form-control" />
<span asp-validation-for="Contact.PrivateStreetNo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreetAdditionalInfo" class="control-label"></label>
<input asp-for="Contact.PrivateStreetAdditionalInfo" class="form-control" />
<span asp-validation-for="Contact.PrivateStreetAdditionalInfo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateZip" class="control-label"></label>
<input asp-for="Contact.PrivateZip" class="form-control" />
<span asp-validation-for="Contact.PrivateZip" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateTown" class="control-label"></label>
<input asp-for="Contact.PrivateTown" class="form-control" />
<span asp-validation-for="Contact.PrivateTown" class="text-danger"></span>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Contact.PrivateCountry, htmlAttributes: new { #class = "form-group" })
<div class="form-group">
#Html.DropDownListFor(model => model.Contact.PrivateCountry, new List<SelectListItem>
{
new SelectListItem {Text = "CH", Value = "CH", Selected = true },
new SelectListItem {Text = "D", Value = "D" },
new SelectListItem {Text = "FL", Value = "FL" },
}, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Contact.PrivateCountry, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<label asp-for="Contact.PrivatePhone" class="control-label"></label>
<input asp-for="Contact.PrivatePhone" class="form-control" />
<span asp-validation-for="Contact.PrivatePhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.BusinessPhone" class="control-label"></label>
<input asp-for="Contact.BusinessPhone" class="form-control" />
<span asp-validation-for="Contact.BusinessPhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.MobilePhone" class="control-label"></label>
<input asp-for="Contact.MobilePhone" class="form-control" />
<span asp-validation-for="Contact.MobilePhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.Mail" class="control-label"></label>
<input asp-for="Contact.Mail" class="form-control" />
<span asp-validation-for="Contact.Mail" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
Back to List
</div>
</form>
</div>
</div>
Thank you for your help on how to get selected value (dropdown) to the corresponding contacts Id field.
Here is a demo:
<div class="row">
<div class="col-md-4">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Contact.ContactId" class="control-label"></label>
<input asp-for="Contact.ContactId" value='#ViewData["RandomId"]' readonly="readonly" class="form-control" />
<span asp-validation-for="Contact.ContactId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.LastName" class="control-label"></label>
<input asp-for="Contact.LastName" class="form-control" />
<span asp-validation-for="Contact.LastName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.FirstName" class="control-label"></label>
<input asp-for="Contact.FirstName" class="form-control" />
<span asp-validation-for="Contact.FirstName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.CustomerId" class="control-label"></label>
</div>
<select id="CusId" asp-for="CustomerDropDownDisp" asp-items="#(new SelectList(Model.CustomerDropDownDisp,"CusId","CusName"))">
<option value="">--Choose Customer--</option>
<option value="1" selected>None</option>>
</select>
<div class="form-group">
<input asp-for="Contact.CustomerId" class="form-control" />
<span asp-validation-for="Contact.CustomerId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.SupplierId" class="control-label"></label>
</div>
<select id="SupId" asp-for="SupplierDropDownDisp" asp-items="#(new SelectList(Model.SupplierDropDownDisp,"SupId","SupName"))">
<option value="">--Choose Supplier--</option>
<option value="1" selected>None</option>>
</select>
<div class="form-group">
<input asp-for="Contact.SupplierId" class="form-control" />
<span asp-validation-for="Contact.SupplierId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreet" class="control-label"></label>
<input asp-for="Contact.PrivateStreet" class="form-control" />
<span asp-validation-for="Contact.PrivateStreet" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreetNo" class="control-label"></label>
<input asp-for="Contact.PrivateStreetNo" class="form-control" />
<span asp-validation-for="Contact.PrivateStreetNo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateStreetAdditionalInfo" class="control-label"></label>
<input asp-for="Contact.PrivateStreetAdditionalInfo" class="form-control" />
<span asp-validation-for="Contact.PrivateStreetAdditionalInfo" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateZip" class="control-label"></label>
<input asp-for="Contact.PrivateZip" class="form-control" />
<span asp-validation-for="Contact.PrivateZip" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.PrivateTown" class="control-label"></label>
<input asp-for="Contact.PrivateTown" class="form-control" />
<span asp-validation-for="Contact.PrivateTown" class="text-danger"></span>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Contact.PrivateCountry, htmlAttributes: new { #class = "form-group" })
<div class="form-group">
#Html.DropDownListFor(model => model.Contact.PrivateCountry, new List<SelectListItem>
{
new SelectListItem {Text = "CH", Value = "CH", Selected = true },
new SelectListItem {Text = "D", Value = "D" },
new SelectListItem {Text = "FL", Value = "FL" },
}, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Contact.PrivateCountry, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<label asp-for="Contact.PrivatePhone" class="control-label"></label>
<input asp-for="Contact.PrivatePhone" class="form-control" />
<span asp-validation-for="Contact.PrivatePhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.BusinessPhone" class="control-label"></label>
<input asp-for="Contact.BusinessPhone" class="form-control" />
<span asp-validation-for="Contact.BusinessPhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.MobilePhone" class="control-label"></label>
<input asp-for="Contact.MobilePhone" class="form-control" />
<span asp-validation-for="Contact.MobilePhone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Contact.Mail" class="control-label"></label>
<input asp-for="Contact.Mail" class="form-control" />
<span asp-validation-for="Contact.Mail" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
Back to List
</div>
</form>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script>
$("#CusId").on("change", function () {
$("#Contact_CustomerId").val($("#SupId").val());
});
$("#SupId").on("change", function () {
$("#Contact_SupplierId").val($("#SupId").val());
});
</script>
result:

Get dealership under a company

I have branch index page it contains 2 drop-down menu called company and dealership when i click on company it contains a company i created when click on a company the corresponding dealership should list in the dealership dropdown. i used eloqent straightly into index page i did that because the i can't access the company and dealership in the index page
Index
#include('theme.header')
<?php use Illuminate\Support\Facades\DB;?>
<div class="page-content-wrapper ">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<div class="btn-group float-right">
</div>
<h4 class="page-title">Branch Management</h4>
</div>
</div>
</div>
<!-- end page title end breadcrumb -->
<div class="row">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title">Branch</h4>
<br>
<br>
<form id="form" method="post" action="{{route('branch.store')}}">
{{csrf_field()}}
<div class="form-group row">
<label class="col-sm-2 col-form-label">Company</label>
<div class="col-sm-10">
<select class="form-control" id="company" name="company">
<option>Select Company</option>
#foreach(\App\Company::all()->where('status','0') as $company)
<option value="{{$company->comp_id}}">{{$company->name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Dealership</label>
<div class="col-sm-10">
<select class="form-control" id="dealer" name=" dealer">
<option>Select Dealership</option>
#foreach(\App\Dealership::join('companies','comp_id','=','dealerships.comp_id')->where('status','0') as $dealership)
<option value="{{$dealership->dlr_id}}">{{$dealership->name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group row">
<label for="example-text-input" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input class="form-control" type="email" id="email" name="email" required>
</div>
</div>
<div class="form-group row">
<label for="example-text-input" class="col-sm-2 col-form-label">Branch Name</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="branch" name="branch" required>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<div class="btn-group float-right">
<button class="btn btn-primary" id="btn_save" data-toggle="modal"
data-target="#create" type="submit">Save
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
#include('theme.footer')
First thing first. You need to change queries.
Company::where(‘status’, 0)->get();
And next you missed the tailing get() in the next dropdown.
And why are you not using relationships to query?
Like Muhammad Naumann already said you have to use the get() method to get the actual data:
Company::where(‘status’, 0)->get();
On the company select field you could add an event listener like onChange. In this listener you run a ajax get request to fetch the dealerships for the selected company.
I figured it out with Ajax.
Create a custom function in controller file. In this case Branch controller, this function contains query builder to retrieve the data
Write Ajax, in the index file, the dealership dropdown is hidden default when you select the company the dropdown will show corresponding data.
Index File
#include('theme.header')
<?php use Illuminate\Support\Facades\DB;?>
<script language="javascript">
/*--- Fliter dealership corressponging company---*/
$(document).ready(function () {
$('#dealership_div').hide();
$('#company').change(function () {
alert('hello');
$('#dealership_div').show();
let id = this.value;
$.ajax({
url: '/filter_dealer',
type: "post",
data: {option: id},
success: function (data) {
$('#dealer')
.find('option')
.remove()
.end()
.append(" <option value=''>--- Select dealership ---</option>")
$.each(data, function (key, value) {
$('#dealer')
.append($("<option></option>")
.attr('value', value['dlr_id'])
.text(value['name'])
);
});
},
error: function () {
alert("Error occurred While Processing");
}
});
});
});
</script>
<div class="page-content-wrapper ">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<div class="btn-group float-right">
</div>
<h4 class="page-title">Branch Management</h4>
</div>
</div>
</div>
<!-- end page title end breadcrumb -->
<div class="row">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body">
<h4 class="mt-0 header-title">Branch</h4>
<br>
<br>
<form id="form" method="post" action="{{route('branch.store')}}">
{{csrf_field()}}
<div class="form-group row">
<label class="col-sm-2 col-form-label">Company</label>
<div class="col-sm-10">
<select class="form-control" id="company" name="company">
<option>Select Company</option>
#foreach(\App\Company::all()->where('status','0') as $company)
<option value="{{$company->comp_id}}">{{$company->name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group row" id="dealership_div">
<label class="col-sm-2 col-form-label">Dealership</label>
<div class="col-sm-10">
<select class="form-control" id="dealer" name=" dealer">
<option></option>
</select>
</div>
</div>
<div class="form-group row">
<label for="example-text-input" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input class="form-control" type="email" id="email" name="email" required>
</div>
</div>
<div class="form-group row">
<label for="example-text-input" class="col-sm-2 col-form-label">Branch Name</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="branch" name="branch" required>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="page-title-box">
<div class="btn-group float-right">
<button class="btn btn-primary" id="btn_save" data-toggle="modal"
data-target="#create" type="submit">Save
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Branch Controller File With a custom function
public function filter_dealer(Request $request)
{
$company_id=$request->input('option');
$dealership=DB::table('dealerships')->select('dlr_id','name')->where([['comp_id','=',$company_id],['status','=','0']])->get();
return response()->json($dealership);
}
Route File
Route::post('filter_dealer', 'BranchController#filter_dealer')->name('filter_dealer');
If you want to dynamically change the contents of dealership dropdown, on the event of changing the company dropdown, you should use javascript, jquery or similar javascript framework, because PHP is a server side scripting language and require page refresh to change the contents of a web page.

Displaying List entries as Checkboxes - Neither BindingResult nor plain available

I have the following object.
public class Anonymization {
#Id
#GeneratedValue(strategy = GenerationType.AUTO)
private long id;
#OneToMany(mappedBy = "anonymization")
private List<Host> hosts;
#OneToMany(mappedBy = "anonymization")
private List<Item> items;
The objects Host and Item have several boolean Fields. I want to display a form, where all Host and Item objects are displayed as checkboxes, so that the boolean fields can be edited. I wrote a controller to display the form
#RequestMapping("monitoringsystem/{mId}/anonymization")
public String editAnonymisatzion(Model model, #PathVariable Long mId){
model.addAttribute("mId", mId);
model.addAttribute("anonymization", monitoringSystemRepository.findOne(mId).getAnonymization());
return "monitoringsystem/anonymizationForm";
}
The anonymizationForm should display the checkboxes in a for-each-loop
<!-- more code --->
<form class="form-horizontal" th:modelAttribute="anonymization" th:object="${anonymization}" th:action="#{'monitoringsystem/' + ${mId} + '/anonymisatzion/save'}" method="post">
<input type="hidden" th:field="*{id}"/>
<fieldset>
<legend>Set Anonymization</legend>
<div class="panel panel-default">
<div class="panel-heading">Anonymizie Hostnames</div>
<div class="panel-body">
<div class="form-group" th:each="host : ${anonymization.hosts}">
<label class="col-md-4 control-label" for="checkboxes" th:text="${host.name}"></label>
<div class="col-md-4">
<div class="checkbox">
<label for="checkboxes-0">
<input th:field="${host.anonymizeName}" type="checkbox" />
anonymizie
</label>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Anonymizie Items</div>
<div class="panel-body">
<div class="form-group" th:each="item : ${anonymization.items}">
<label class="col-md-4 control-label" for="checkboxes" th:text="${item.name}"></label>
<div class="col-md-4">
<div class="checkbox">
<label for="checkboxes-0">
<input th:field="${item.anonymizeName}" type="checkbox" />
anonymizie name
</label>
</div>
<div class="checkbox">
<label for="checkboxes-0">
<input th:field="${item.anonymizeData}" type="checkbox" />
anonymizie data
</label>
</div>
</div>
</div>
</div>
</div>
<!-- more code --->
Unfortunatly when i call the View I'm getting the following error
Caused by: java.lang.IllegalStateException: Neither BindingResult nor plain target object for bean name 'host' available as request attribute
I checkt my Database all Relationsships are set correctly. The List<Host> should contain 1 and the List<Item> 2 entries.
I can't find my mistake.
UPDATE 1:
I debuged the anonymization object which is passed to the form. It's is complete. Which means all listentries are present. So I guess the error has something to to do with my view - how I call the object.
I found the solution by myselfe. Fist of all i changes the way the list-objects are called in my form
<form class="form-horizontal" th:modelAttribute="anonymization" th:object="${anonymization}" th:action="#{'monitoringsystem/' + ${mId} + '/anonymisatzion/save'}" method="post">
<input type="hidden" th:field="*{id}"/>
<fieldset>
<legend>Set Anonymization</legend>
<div class="panel panel-default">
<div class="panel-heading">Anonymizie Hostnames</div>
<div class="panel-body">
<div class="form-group" th:each="host, statHost : *{hosts}">
<label class="col-md-4 control-label" for="checkboxes" th:text="*{hosts[__${statHost.index}__].name}"></label>
<div class="col-md-4">
<div class="checkbox">
<label for="checkboxes-0">
<input th:field="*{hosts[__${statHost.index}__].anonymizeName}" type="checkbox" />
anonymizie
</label>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Anonymizie Items</div>
<div class="panel-body">
<div class="form-group" th:each="item, statItem : *{items}">
<label class="col-md-4 control-label" for="checkboxes" th:text="*{items[__${statItem.index}__].name}"></label>
<div class="col-md-4">
<div class="checkbox">
<label for="checkboxes-0">
<input th:field="*{items[__${statItem.index}__].anonymizeName}" type="checkbox" />
anonymizie name
</label>
</div>
<div class="checkbox">
<label for="checkboxes-0">
<input th:field="*{items[__${statItem.index}__].anonymizeData}" type="checkbox" />
anonymizie data
</label>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton"></label>
<div class="col-md-4">
<a th:href="#{/monitoringsystem}" class="btn btn-default btn-small">Cancel</a> <button id="singlebutton" name="singlebutton" class="btn btn-primary btn-small">Submit</button>
</div>
</div>
</div>
</div>
</fieldset>
</form>
Futhermore there seems to be a problem with the naming of the getter and setter. Mine were like:
setBoolean(boolean b){
this.b = b;
}
isBoolean(){
return b;
}
Spring or thymeleaf (i don't know which component is responsible) seems to need the getter starting with get. After changing this it's working now.
setBoolean(boolean b){
this.b = b;
}
getBoolean(){
return b;
}

Resources