I am trying to populate a dropdown on my razor page with info from the database(My website is for document upload/download). When they are uploading a file, it asks for vendor Id as this is the foreign key linking my 'Files' and 'Vendor(user)' together.
In the dropdown I want them to be able to select the vendor name, but in the files db - the vendorId gets entered.
I could populate it manually with the following code:
<select asp-for="Files.VendorId">
<option value="3950">Girvan Early Growers Ltd</option>
</select>
But at one point we may have anything up to 50 vendors, so not ideal.
Below I will include my page model and my cshtml page for this to see if it helps.
PageModel:
using FarmersPortal.Data;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.EntityFrameworkCore.Storage.ValueConversion.Internal;
namespace FarmersPortal.Pages
{
[Authorize(Roles ="Admin")]
public class CreateModel : PageModel
{
private readonly FarmersPortal.Data.filedbContext _context;
public CreateModel(FarmersPortal.Data.filedbContext context)
{
_context = context;
}
public IQueryable<Data.Vendor> VendorList { get; set; }
[BindProperty]
public List<Data.Vendor> Vendores { get; set; }
public void OnGet()
{
Vendores = _context.Vendors.ToList();
}
[BindProperty]
public Data.File Files { get; set; }
public Data.Vendor Vendors { 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.Files.Add(Files);
await _context.SaveChangesAsync();
return RedirectToPage("./Index");
}
}
}
.cshtml:
#page
#model FarmersPortal.Pages.CreateModel
#{
ViewData["Title"] = "Create";
}
<style>
body {
background-image: url('hero-range-1.jpg');
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<h1 style="color: white">Create</h1>
<h4 style ="color: white">Files</h4>
<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="Files.Number" class="control-label" style="color: white"></label>
<input asp-for="Files.Number" class="form-control" />
<span asp-validation-for="Files.Number" class="text-danger"></span>
</div>
<div class="form-group">
<div class="form-group">
<label asp-for="Files.FileType" class="control-label" style="color: white"></label>
<input asp-for="Files.FileType" class="form-control" />
<span asp-validation-for="Files.FileType" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Files.VendorId" class="control-label" style="color: white"></label>
<input asp-for="Files.VendorId" class="form-control" />
<span asp-validation-for="Files.VendorId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Files.Haulier" class="control-label" style="color: white"></label>
<input asp-for="Files.Haulier" class="form-control" />
<span asp-validation-for="Files.Haulier" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Files.Comments" class="control-label" style="color: white"></label>
<input asp-for="Files.Comments" class="form-control" />
<span asp-validation-for="Files.Comments" class="text-danger"></span>
</div>
<select asp-for="Files.VendorId">
<option value="3950">Girvan Early Growers Ltd</option>
</select>
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-page="Index">Back to List</a>
</div>
#section Scripts {
#{
await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
}
How would I go about this?
From your description, In Vendor table, There are Id, Name and other properties, So If you want DropdownList show 'Name' as text, 'Id' as value, You can refer to this code:
public void OnGet()
{
List<SelectListItem> test = new List<SelectListItem>();
Vendores = _context.Vendors.ToList();
foreach (var item in Vendores)
{
test.Add(new SelectListItem {Text=item.Name,Value = item.Id.ToString() });
}
ViewData["demo"] = test;
}
In the View
<select asp-for="Files.VendorId" asp-items="#ViewData["demo"]"></select>
Then the dropdownlist will show name but pass id.
You can refer to this link to learn more.
Related
I have a simple MVC app that is consuming a web api via REST. The controller in the MVC app makes http calls to the web api to populate views within the MVC app with razor syntax.
I am trying to figure out how to populate a drop down list on one of the 'create' actions. I'm currently just using the scaffolded page:
#model ComicBookInventory.Shared.ComicBookWithAuthorsAndCharactersViewModel
#{
ViewData["Title"] = "CreateComicBook";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>CreateComicBook</h1>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="CreateComicBook">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Id" class="control-label"></label>
<input asp-for="Id" class="form-control" />
<span asp-validation-for="Id" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Description" class="control-label"></label>
<input asp-for="Description" class="form-control" />
<span asp-validation-for="Description" class="text-danger"></span>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" asp-for="IsRead" /> #Html.DisplayNameFor(model => model.IsRead)
</label>
</div>
<div class="form-group">
<label asp-for="DateRead" class="control-label"></label>
<input asp-for="DateRead" class="form-control" />
<span asp-validation-for="DateRead" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Rating" class="control-label"></label>
<input asp-for="Rating" class="form-control" />
<span asp-validation-for="Rating" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Genre" class="control-label"></label>
<input asp-for="Genre" class="form-control" />
<span asp-validation-for="Genre" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CoverUrl" class="control-label"></label>
<input asp-for="CoverUrl" class="form-control" />
<span asp-validation-for="CoverUrl" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
#{
await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
}
Which gets populated from this action in the controller:
public async Task<IActionResult> CreateComicBook(ComicBookWithAuthorsAndCharactersViewModel model)
{
string uri = $"https://localhost:5001/api/comicbook/add-book/";
HttpClient client = _httpClientFactory.CreateClient(
name: "ComicBookInventory.Api");
var postTask = await client.PostAsJsonAsync<ComicBookWithAuthorsAndCharactersViewModel>(uri, model);
if (postTask.IsSuccessStatusCode)
{
return RedirectToAction("GetAllComics");
}
else
{
return View(model);
}
}
Here is the view model definition:
namespace ComicBookInventory.Shared
{
public class ComicBookWithAuthorsAndCharactersViewModel
{
public int Id { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public bool IsRead { get; set; }
public DateTime? DateRead { get; set; }
public int? Rating { get; set; }
public string Genre { get; set; }
public string? CoverUrl { get; set; }
/// <summary>
/// Navigation properties
/// </summary>
/// a book can have many authors
public ICollection<string>? AuthorNames { get; set; }
public ICollection<string>? CharacterNames { get; set; }
}
}
My question is, I want to add a drop down checklist to the view, so that when I am creating a comic book, I can select Authors that currently exist in the database. The same for characters.
Here is the entire code base in case anyone is interested: https://github.com/rnemeth90/ComicBookInventoryApp
I normally try and figure things out on my own (I'm relatively new to EF Core, and have very little experience with many-to-many relationships in EF core). I have tried various things and struggled with this for most of my weekend. I feel like this should be relatively simple but cannot figure it out. Please help.
In your Code, I noticed that you used #Html.DropDownList to realzie the selector element, and using form submit to handle the data. So I did a test in my side:
#{
List<SelectListItem> listItems= new List<SelectListItem>();
listItems.Add(new SelectListItem
{
Text = "Exemplo1",
Value = "Exemplo1_v"
});
listItems.Add(new SelectListItem
{
Text = "Exemplo2",
Value = "Exemplo2_v",
Selected = true
});
listItems.Add(new SelectListItem
{
Text = "Exemplo3",
Value = "Exemplo3_v"
});
}
<form asp-action="Create">
<div class="form-group">
AuthorNames
<div class="col-md-10">
#Html.DropDownListFor(model => model.Author, listItems, "-- Select author --")
</div>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
My model contains a public string? Author { get; set; } property, and when I click the submit button, the select value will be submitted, so when you want to pass the FullName to your controller, you need to set it as the Value of the SelectListItem.
I'm using a regular html form instead of #html.BeginForm and I have these 2 form tags in my Create.cshtml view file.
I was experimenting with routing, but my post doesn't seem to get the values even if I bind the properties. I've tried in vain but I can't seem to make this work, and can't find the answer from googling.
Create.cshtml
#model Actor
#{
ViewData["Title"] = "Add";
}
<section class="container-xl justify-content-center col-lg-5 col-md-8 col-sm-10">
<div class="row">
<span class="text-center mb-3">
<h5>Add a new record</h5>
</span>
<div>
<form>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
</form>
<div class="form-group">
<label class="form-label" asp-for="ProfilePictureUrl">Profile Picture</label>
<input class="mb-2 form-control" type="text" asp-for="ProfilePictureUrl" placeholder="Profile picture" />
</div>
<div class="form-group">
<label class="form-label" asp-for="FullName">Full Name</label>
<input class="mb-2 form-control" type="text" placeholder="Full name" asp-for="FullName" />
</div>
<div class="form-group">
<label class="form-label" asp-for="Bio">Biography</label>
<input class="form-control" type="text" placeholder="Bio" asp-for="Bio" />
</div>
<form>
<div class="form-group mt-3">
<a class="btn btn-outline-secondary" asp-action="Index">Show All</a>
<input asp-action="Create2" class="float-end btn btn-outline-success" type="submit" value="Create" />
</div>
</form>
</div>
</div>
</section>
Actor.cs
using System.ComponentModel.DataAnnotations;
namespace MovieProject.Models
{
public class Actor
{
[Key]
public int ActorId { get; set; }
[Display(Name ="Profile Picture")]
public string ProfilePictureUrl { get; set; }
[Display(Name ="Full Name")]
public string FullName { get; set; }
[Display(Name ="Biography")]
public string Bio { get; set; }
}
}
ActorController.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using MovieProject.Data;
using MovieProject.Data.Services;
using MovieProject.Models;
namespace MovieProject.Controllers
{
public class ActorController : Controller
{
private readonly IActorService _service;
public ActorController(IActorService service)
{
_service = service;
}
[HttpPost]
public IActionResult Create2([Bind("ProfilePictureUrl,FullName,Bio")] Actor actorItem)
{
return View("Create");
}
public IActionResult Create()
{
return View();
}
}
}
The methods are getting hit but the post data is null.
Another question is, instead of using MVC convention, can I use a different method name for get and post that is not the same as the view name? How can I get initially load the page for GET using routing that would work in a different view name?
Thanks
can I use a different method name for get and post that is not the
same as the view name?
Yes, you can.
How can I get initially load the page for GET using routing that would
work in a different view name?
return to this view.
public IActionResult Create()
{
return View("aa");
}
Below is a work demo, you can refer to it.
In controller:
public IActionResult Create()
{
return View();
}
[HttpPost]
public IActionResult Create2(Actor actorItem)
{
return View();
}
Create view:
#model nnnn.Models.Actor
#{
ViewData["Title"] = "Create";
}
<h1>Create</h1>
<h4>Actor</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create2">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="ActorId" class="control-label"></label>
<input asp-for="ActorId" class="form-control" />
<span asp-validation-for="ActorId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ProfilePictureUrl" class="control-label"></label>
<input asp-for="ProfilePictureUrl" class="form-control" />
<span asp-validation-for="ProfilePictureUrl" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="FullName" class="control-label"></label>
<input asp-for="FullName" class="form-control" />
<span asp-validation-for="FullName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Bio" class="control-label"></label>
<input asp-for="Bio" class="form-control" />
<span asp-validation-for="Bio" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
result:
I have a bool value that I'm using to distinguish between the first item in a series of other items being saved to a link table in my DB. The constructor for the ViewModel sets this to true by default. When my ViewModel is posted to the controller my controller action changes this value to false and passes the edited ViewModel back to the View where this value is saved in a hidden field.
The issue I have is that after the value has been changed, my View is still displaying this value as true. Does anyone have any idea where I'm going wrong?
I also have an issue where I reset the values back to default but these are being retained when the view is reloaded after the post action in executed.
ViewModel
public class NewScriptViewModel
{
public Patient Patient { get; set; }
public int PatientId { get; set; }
public int PrescriberId { get; set; }
public int DrugId { get; set; }
public int Qty { get; set; }
public string Directions { get; set; }
public bool FirstItem { get; set; }
public bool NextItem { get; set; }
public int ScriptId { get; set; }
public NewScriptViewModel()
{
FirstItem = true;
NextItem = false;
}
}
View
#model DispensingApp.Models.ViewModels.NewScriptViewModel
#{
ViewData["Title"] = "New Script";
}
<h1>#Model.Patient.FullName</h1>
<h3>HCN : #Model.Patient.HCN</h3>
<hr />
<div class="row">
<br />
<div class="col-12" onload="newScriptItemForm.reset()">
<form id="newScriptItemForm" asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="ScriptId" type="hidden" value="#ViewData["ScriptId"]" />
<input asp-for="DrugId" type="hidden" />
<table id="drugSelectionTable" class="table table-hover">
<thead>
<tr class="table-secondary">
<th></th>
<th>Name</th>
<th>Pack Size</th>
<th>Generic Ingredients</th>
<th>Stock</th>
</tr>
</thead>
</table>
<div class="form-group">
<div><input asp-for="PatientId" type="hidden" /></div>
</div>
<div class="form-group row">
<div class="col-2">
<label asp-for="Patient.Prescriber.FullName" class="control-label"></label>
</div>
<div class="col-4">
#if (Model.FirstItem)
{
<select asp-for="PrescriberId" class="form-control" asp-items="ViewBag.PrescriberId"></select>
}
else
{
<input asp-for="PrescriberId" type="hidden" />
<input type="text" placeholder="#Model.PrescriberId" class="disabled" />
}
</div>
</div>
<div class="form-group row">
<div class="col-2">
<label asp-for="Qty" class="control-label"></label>
</div>
<div class="col-4">
<input asp-for="Qty" class="form-control" />
</div>
<span asp-validation-for="Qty" class="text-danger"></span>
</div>
<div class="form-group row">
<div class="col-2">
<label asp-for="Directions" class="control-label"></label>
</div>
<div class="col-4">
<textarea asp-for="Directions" rows="3" class="form-control"></textarea>
</div>
<span asp-validation-for="Directions" class="text-danger"></span>
</div>
<div class="form-group row">
<div class="col-2">
<input asp-for="FirstItem" type="hidden" />
<input id="nextItem" asp-for="NextItem" type="hidden" />
<button id="nextItemBtn" #*type="submit" value="Next Item"*# class="btn btn-primary form-control">Next Item</button>
</div>
<div class="col-2">
<button asp-action="NewScript" class="btn btn-success form-control">Next Script</button>
</div>
<div class="col-2">
<a asp-controller="Patients" asp-action="Details" asp-route-id="#Model.PatientId" class="btn btn-danger form-control">Cancel</a>
</div>
</div>
</form>
</div>
</div>
Controller Post
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create(NewScriptViewModel viewModel,
[Bind("PatientId, PrescriberId")] Script script,
[Bind("DrugId, Qty, Directions")] ScriptDrug scriptDrug)
{
if (ModelState.IsValid)
{
//if first item of script -- create script entry
if (viewModel.FirstItem)
{
_context.Script.Add(script);
await _context.SaveChangesAsync();
viewModel.ScriptId = script.Id;
viewModel.FirstItem = false;
}
scriptDrug.ScriptId = (int)viewModel.ScriptId;
var drug = _context.Drug.Find(scriptDrug.DrugId);
drug.StockQty -= scriptDrug.Qty;
_context.ScriptDrug.Add(scriptDrug);
await _context.SaveChangesAsync();
return await Create(script.PatientId, viewModel);
}
viewModel.NextItem = false;
return await Create(script.PatientId, viewModel);
}
Controller Get
public async Task<IActionResult> Create(int id, NewScriptViewModel viewModel)
{
var patient = await _context.Patient.FindAsync(id);
var vm = new NewScriptViewModel();
//if not first item, reset view model but retain script id
if (!viewModel.FirstItem)
{
vm = viewModel;
}
vm.Patient = patient;
vm.PatientId = patient.Id;
return View(vm);
}
The HTML that is rendered to the browser after all of this looks like:
<div class="col-2">
<input type="hidden" data-val="true" data-val-required="The FirstItem field is required." id="FirstItem" name="FirstItem" value="True">
<input id="nextItem" type="hidden" data-val="true" data-val-required="The NextItem field is required." name="NextItem" value="True">
<button id="nextItemBtn" class="btn btn-primary form-control">Next Item</button>
</div>
I'm setting up a first C# ASP.NET MVC application using Microsofts tutorial. https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/adding-model?view=aspnetcore-2.2&tabs=visual-studio
In the process of this tutorial, it asks to check if the create movies works, but when I attempt to use it, I get an HTTP error 400 - bad request. I believe the data I am entering is accurate, but I can't seem to get anything but a bad request, does anyone know how to fix this.
Model class:
using System;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
namespace MvcMovie.Models
{
public class Movie
{
public int Id { get; set; }
public string Title { get; set; }
[Display(Name = "Release Date")]
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
public string Genre { get; set; }
[Column(TypeName = "decimal(18, 2)")]
public decimal Price { get; set; }
}
}
Razor view:
#model MvcMovie.Models.Movie
#{
ViewData["Title"] = "Create";
}
<h1>Create</h1>
<h4>Movie</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="ReleaseDate" class="control-label"></label>
<input asp-for="ReleaseDate" class="form-control" />
<span asp-validation-for="ReleaseDate" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Genre" class="control-label"></label>
<input asp-for="Genre" class="form-control" />
<span asp-validation-for="Genre" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Price" class="control-label"></label>
<input asp-for="Price" class="form-control" />
<span asp-validation-for="Price" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Controller action method:
public async Task<IActionResult> Create([Bind("Id,Title,ReleaseDate,Genre,Price")] Movie movie)
{
if (ModelState.IsValid)
{
_context.Add(movie);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(movie);
}
The expected output is to add to the database, but but the actual output is bad request.
Do you have httpPost over method of controller and why you not use model?
[HttpPost]
public async Task<IActionResult> Create([Bind("Id,Title,ReleaseDate,Genre,Price")] ....
I was using google chrome, and firefox. Apparently it won't let me test on anything except edge or IE
Have a partial view containing a form, but can't seem to get validation errors to show up.
Models
public class HomeModel
{
public LoginModel LoginModel { get; set; }
}
public class LoginModel
{
[Required]
[Display(Name = "Email")]
public string Username { get; set; }
[Required]
public string Password { get; set; }
}
Index.cshtml:
#model MyApp.Models.HomeModel
#{
await Html.RenderPartialAsync("_LoginPartial", Model.LoginModel);
}
HomeController
public IActionResult Index()
{
return View(new HomeModel()
{
LoginModel = new LoginModel()
});
}
[HttpPost]
public IActionResult Login(LoginModel model)
{
return View("Index", new HomeModel()
{
LoginModel = model
});
}
_LoginPartial
#model MyApp.Models.LoginModel
<form asp-action="Login" asp-controller="Home" method="post" role="form" style="width:70%;margin: 0 auto;">
<div style="display:none" asp-validation-summary="ValidationSummary.All" class="alert alert-danger fade in">
×
<strong>Error!</strong> A problem has been occurred while submitting your data.
</div>
<div class="form-group" style="text-align:left">
<label asp-for="Username" style="font-size:22px;" class="control-label"></label>
<input asp-for="Username" type="text" class="form-control" />
</div>
<div class="form-group" style="text-align:left">
<label asp-for="Password" style="font-size:22px;" class="control-label"></label>
<input asp-for="Password" type="password" class="form-control" />
</div>
<div class="spacer-15"></div>
<div class="form-group" style="font-size:22px;">
<button type="submit"
style="background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;" value="Login">
<img src="~/images/flower.png" />Next
</button>
</div>
</form>
It looks like you're missing a few things. Each of your inputs will need a corresponding validation element that uses asp-validation-for.
<div class="form-group" style="text-align:left">
<label asp-for="Username" style="font-size:22px;" class="control-label"></label>
<input asp-for="Username" type="text" class="form-control" />
<span asp-validation-for="Username" class="text-danger"></span>
</div>
Likewise, if you're planning on using jQuery validation, you should add the following to the environment elements in your _Layout.cshtml file.
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>