I'm showing the user a screen where he can check what fields he wants to get from the database. Based on the checked checkboxes I want to write a query using LINQ or lambda expression and fetch the data in ASP.NET MVC. How to do that as column selections are dynamic? For example, if only Name and Email columns are checked then get the data of those 2 columns only from the database.
Controller
public ActionResult Report()
{
return View();
}
[HttpPost]
public ActionResult Report(Employee emp)
{
List<Employee> employees = new List<Employee>();
employees = db.Employees.Select(x => new Employee()
{
// select Only those columns which are checked by the user
}).ToList();
return View();
}
View
#model IEnumerable<DynamicCheck.Models.Employee>
#{
ViewBag.Title = "EmployeeReport";
}
<h2>EmployeeReport</h2>
<form action="~/Employees/Report" method="post">
<div>
<div class="col-lg-3">
<input type="checkbox" name="Name" />
<label>Employee Name</label>
</div>
<div class="col-lg-3">
<input type="checkbox" name="Email" />
<label>Employee Email</label>
</div>
<div class="col-lg-3">
<input type="checkbox" name="Address" />
<label>Employee Address</label>
</div>
<div class="col-lg-3">
<input type="checkbox" name="Phone" />
<label>Employee Name</label>
</div>
<input type="submit" value="Submit"/>
</div>
</form>
you should to use javascript and check what columns sent to view.
and create html elements dynamically...
Related
Totally stumped on this. I have a page where users can click an "Add Step" button, and some javascript appends rows with additional inputs from a <template> tag to a form. When debugging from the controller, the values are empty.
I looked at the following posts, but neither answer seem to help here (not sure if it's because I'm using .Net core - probably not):
Get post data with unknown number of variables in ASP MVC
Passing data from Form with variable number of inputs - MVC 5
Model (Procedure.cs)
public class Procedure
{
public int Id { get; set; }
public string Name { get; set; }
public string Type { get; set; }
public int MinNumber { get; set; }
public int MaxNumber { get; set; }
}
Controller (ProceduresController.cs)
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([FromForm]List<Procedure> model)
{
if (ModelState.IsValid)
{
foreach(var field in model)
{
// Database things will happpen eventually, but at this point the Count = 0
}
}
return View(model);
}
Currently the Create action signature includes the [FromForm] attribute, but I have no idea if that's required here. I also tried List<Procedure> model.
And the View (Create.cshtml)
I've stripped out a lot of the UI and javascript to make things easier to read
#model List<Procedure>
/* also tried #model Procedure */
#{
ViewData["Title"] = "Create Procedure";
ViewData["Sidebar"] = "App";
}
<form asp-action="Create" enctype="multipart/form-data">
<div asp-validation-summary="All" class="field-validation-summary"></div>
<div class="builder">
<div class="field-row">
<div class="field-group">
<label class="field-label">Instruction Name</label>
<input type="text" name="Name" class="field type:text" placeholder="Enter an instruction name" />
</div>
<div class="field-group">
<label for="Type" class="field-label">Instruction Type</label>
<select id="Type" name="Type" class="field type:select stretch">
/* removing for brevity */
</select>
</div>
</div>
<div class="field-row">
<div class="field-group">
<label class="field-label">Minimum Number</label>
<input type="number" name="MinNumber" class="field type:number" />
</div>
<div class="field-group">
<label class="field-label">Maximum Number</label>
<input type="number" name="MaxNumber" class="field type:number" />
</div>
</div>
</div>
<div class="field-row">
<div class="field-group">
<div class="add-step">Add Step</div>
</div>
</div>
<div class="field-row">
<div class="field-group">
<input type="submit" value="Submit Procedures" class="button button-submit" />
</div>
</div>
</form>
<template id="template">
<details class="accordion" open>
<summary>Procedure Step</summary>
<div class="details-content">
<div class="field-row">
<div class="field-group">
<label class="field-label">Instruction Name</label>
<input type="text" name="Name" class="field type:text" placeholder="Enter an instruction name" />
</div>
<div class="field-group">
<label for="Type" class="field-label">Instruction Type</label>
<select id="Type" name="Type" class="field type:select stretch">
/* removing for brevity */
</select>
</div>
</div>
<div class="field-row">
<div class="field-group">
<label class="field-label">Minimum Number</label>
<input type="number" name="MinNumber" class="field type:number" />
</div>
<div class="field-group">
<label class="field-label">Maximum Number</label>
<input type="number" name="MaxNumber" class="field type:number" />
</div>
</div>
</div>
</details>
</template>
#section Scripts {
#{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
<script>
const modal = new Modal();
function getParent(element, selector) {
for (; element && element !== document; element = element.parentNode) {
if (element.classList.contains(selector)) {
return element;
}
}
return null;
}
this.Builder = function () {
this.template = document.querySelector('#template');
this.builder = document.querySelector('.builder');
this.addStep = document.querySelector('.add-step');
this.clone = null;
this.counter = 0;
this.addStep.addEventListener('click', this.add.bind(this));
};
Builder.prototype = {
add: function () {
this.counter++;
this.clone = document.importNode(this.template.content, true);
this.builder.appendChild(this.clone);
// i'm doing things here to set the new field attribute values - removed for brevity
}
};
let builder = new Builder();
builder.add();
</script>
}
In the javascript do I need to set the new field name values a specific way? Should they look like <input type="text" name="Name[index]"> or <input type="text" name="#Model.Procedure[index].Name">?
I tried both but the Count is still 0 when posting back. I've pretty much hit a wall, so I appreciate any and all help.
.NET requires a little more effort for model binding on complex types. Naming of elements is important.
<input name="model[index].Name" />
<input name="model[index].Type" />
<input name="model[index].MinNumber" />
<input name="model[index].MaxNumber" />
The naming convention to bind is: Name of the parameter in your controller (model), index, property name. This will properly pass all objects to your list.
The same is true if you are passing objects to a list inside your model.
For example
public class Example {
public int Id { get; set; }
public List<Procedure> Procedures { get; set; }
}
in this case we just need to tell .NET what property you are mapping too.
<input name="model.Procedures[index].Name" />
In some cases you may need to also add a hidden field for the index: https://www.red-gate.com/simple-talk/dotnet/asp-net/model-binding-asp-net-core/
I am currently creating a web application that takes in a new user, adds their information to a list, and then displays the users. When I follow the link to my form with validation (a form I have used many times before in other projects) I am getting an unhandled exception.
Here is the specific error code
AspNetCore.Views_Home_RegisterNewUser.<ExecuteAsync>b__12_0() in RegisterNewUser.cshtml, line 15
To this point, I have double checked that the model is correct and has the correct validation. I have made sure the controller and action are correct.
Here is the page for the form
#{
ViewData["Title"] = "RegisterNewUser";
}
<h1>RegisterNewUser</h1>
#model Lab20.Models.RegisterUser
#Html.ValidationSummary()
<form asp-controller="Home" asp-action="ListAllUser" method="post" class="bg-dark">
<div class="col-12">
First Name:
<input type="text" name="FirstName" value="#Model.FirstName" placeholder="#Model.FirstName" class="col-5" />
#Html.ValidationMessageFor(m => m.FirstName)
</div>
<div class="col-12">
Last Name: <input type="text" name="Last Name" value="#Model.LastName" placeholder="#Model.LastName" class="col-5" />
#Html.ValidationMessageFor(m => m.LastName)
</div>
<div class="col-12">
Birthday: <input type="datetime" name="Birthday" value="#Model.Birthday" placeholder="#Model.Birthday" class="col-5" />
#Html.ValidationMessageFor(m => m.Birthday)
</div>
<div class="col-12">
Email: <input type="text" name="Email" value="#Model.Email" placeholder="#Model.Email" class="col-5" />
#Html.ValidationMessageFor(m => m.Email)
</div>
<div class="col-12">
Password: <input type="text" name="Password" value="#Model.Password" placeholder="#Model.Password" class="col-5" />
#Html.ValidationMessageFor(m => m.Password)
</div>
<div class="col-12">
Favorite Color: <input type="text" name="FavoriteColor" value="#Model.FavoriteColor" placeholder="#Model.FavoriteColor" class="col-5" />
#Html.ValidationMessageFor(m => m.FavoriteColor)
</div>
<input type="submit" value="Add User" />
</form>
Here is the HomeController
public class HomeController : Controller
{
List<RegisterUser> listOfUsers = new List<RegisterUser>() { };
public IActionResult Index()
{
return View();
}
[HttpGet]
public IActionResult RegisterNewUser()
{
return View();
}
[HttpPost]
public IActionResult RegisterNewUser(RegisterUser newUser)
{
if (!ModelState.IsValid)
{
return View(newUser);
}
else
{
return View("AddNewUser", newUser);
}
}
public IActionResult AddNewUser(RegisterUser user)
{
listOfUsers.Add(user);
return View("Index");
}
public IActionResult ListAllUsers()
{
return View();
}
}
I would like my page to firstly, display, secondly, catch the validation I have added, and thirdly take the new user's information and display it in the ListAllUsers View.
<form asp-controller="Home" asp-action="RegisterNewUser" method="post" class="bg-dark">
</form>
your form post action will be in RegisterNewUser method, you're pointing it wrong in ListAllUsers.
hope, you get it
You form is posing to the action ListAlluser in the controller Home. Now according to your code, you don't have an action method by that name.
The correct asp-action parameter should be RegisterNewUser. So the code becomes
<form asp-controller="Home" asp-action="RegisterNewUser" method="post" class="bg-dark">
</form>
My view model:
public class FileInfo
{
[Required]
[StringLength(50, ErrorMessage = "TitleErrorMessage", MinimumLength = 2)]
public string Title { get; set; }
[Required]
[StringLength(100, ErrorMessage = "DesErrorMessage", MinimumLength = 3)]
public string Description { get; set; }
[Required]
[DataType(DataType.Upload)]
public IFormFile File { get; set; }
}
The following is _UploadForm partial view file:
#model SessionStateTest.Models.FileInfo
<div class="form-group">
<label>Title</label>
<input class="form-control" asp-for="Title" />
</div>
<div class="form-group">
<label>Description</label>
<input class="form-control" asp-for="Description" />
</div>
<div class="form-group">
<label></label>
<input type="file" asp-for="File" />
</div>
That is used in another View with this code:
<form asp-action="AddUploadForm" asp-controller="Home" method="Post">
<input type="submit" value="Add another file" class="btn btn-sm btn-primary" />
</form>
<form asp-action="Upload" asp-controller="Home" method="Post" enctype="multipart/form-data">
#foreach (var item in Model.Upload)
{
#(await Html.PartialAsync("_UploadForm", item))
}
<div class="col-xs-12">
<input type="submit" value="Upload" class="btn btn-sm btn-info" />
</div>
</form>
Basically AddUploadForm action adds a new view model of type FileInfo to Model.Upload which is my main view model.
The problem is that the list List<FileInfo> vm in Upload action below is totally empty:
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Upload(List<FileInfo> vm)
{
.... some other logic
return View();
}
I don't want to use multiple attribute because I would like to force user to provide a title and description for every file.
Any help is kindly appreciated!
Your approach with using _UploadForm generates the following html (let's focus on input's only since this is the most important part)
<input class="form-control" name="Title" />
<input class="form-control" name="Description" />
<input type="file" name="File" />
...
<input class="form-control" name="Title" />
<input class="form-control" name="Description" />
<input type="file" name="File" />
... and so on
So name attributes contains only FileInfo model's properties names without indexes and this is only suitable for the case when your controller expects single model
public IActionResult Upload(FileInfo vm)
And in order to make your html work with your current controller with list of models
public IActionResult Upload(List<FileInfo> vm)
It should look like this
<!-- version 1 -->
<input class="form-control" name="[0].Title" />
<input class="form-control" name="[0].Description" />
<input type="file" name="[0].File" />
...
<input class="form-control" name="[1].Title" />
<input class="form-control" name="[1].Description" />
<input type="file" name="[1].File" />
... and so on
Or
<!-- version 2 -->
<!-- the name before index must match parameter name in controller -->
<input class="form-control" name="vm[0].Title" />
<input class="form-control" name="vm[0].Description" />
<input type="file" name="vm[0].File" />
...
<input class="form-control" name="[1].Title" />
<input class="form-control" name="[1].Description" />
<input type="file" name="vm[1].File" />
... and so on
This is possible to accomplish using tag helpers and partial view in slightly different way. All you need to do is turn partial view's model to list and update asp-for expressions.
_UploadForm.cshtml
#model List<SessionStateTest.Models.FileInfo>
#for (int i = 0; i < Model.Count; i++)
{
<div class="form-group">
<label>Title</label>
<input class="form-control" asp-for="#Model[i].Title" />
</div>
<div class="form-group">
<label>Description</label>
<input class="form-control" asp-for="#Model[i].Description" />
</div>
<div class="form-group">
<label></label>
<input type="file" asp-for="#Model[i].File" />
</div>
}
View
<form asp-action="Upload" asp-controller="Home" method="Post" enctype="multipart/form-data">
#await Html.PartialAsync("_UploadForm", Model.Upload)
<div class="col-xs-12">
<input type="submit" value="Upload" class="btn btn-sm btn-info" />
</div>
</form>
It will generate html like in version 1.
I am building a website using Asp.Net MVC. I have successfully inserted my form data into the database. However, I got a problem with my checkbox, the value is always 0 in my database even if the checkbox is checked.
#using (Html.BeginForm())
{
<div class="modal-body">
<div class="form-group">
<label for="username" class="col-form-label">Name:</label>
<input type="text" class="form-control" **id="username" name="username" **>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<input type="checkbox" **id="user_privilage" name="user_privilage" **>
<label for="user" class="col-form-label">User</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Add</button>
</div>
}
here is the code in controller:
[HttpPost]
public ActionResult UserMaintenance(User collection)
{
try
{
List<object> lst = new List<object>();
lst.Add(collection.username);
lst.Add(collection.user_privilage);
object[] allitems = lst.ToArray();
int output = db.Database.ExecuteSqlCommand("insert into DATABASE(username,user_privilage) values (#p0,#p1)", allitems);
if(output>0)
{
ViewBag.msg = "User has been added";
}
return View();
//return RedirectToAction("UserMaintenance");
}
catch {
return View();
}
}
Does anyone know what happened?
You are using pure html markup checkbox in that you need to set value to checkbox as true.
Model
View
Views at Runtime
POST Action Method
We have checked checkbox and submitted form we must get value true in user_privilage model property.
In Same way if we do for unchecking checkbox then we will get false value.
I am a junior developer and i find it hard to get this form to work. What i am trying to achieve is a multistep form where each view is a form that redirects to the next view containing further more fields for the user to input values into. I Think i got it right how i pass the Model(which is to be modified for every step). I have 4 views and 4 ActionResults. Step1, Step2 etc.
So how do i pass both the model and the chosen value from "Choose amount" and the custom amount?
This is what the markup looks like:
<form method="post" id="formStepOne" action="#Url.Action("Step1", "SupporterController", Model)">
<div class="row">
<div class="large-6 columns">
<label>Choose amount</label>
<input type="radio" name="belopp1" value="500" id="value1"><label for="value1">100 dollars</label>
<input type="radio" name="belopp2" value="350" id="value2"><label for="value2">200 dollars</label>
<input type="radio" name="belopp3" value="200" id="value3"><label for="value3">400 dollars</label>
</div>
<div class="large-4 columns">
<label>
Amount(minimum of 400 dollars)
<input type="text" placeholder="amount" />
</label>
</div>
</div>
<div class="large-12 columns">
<div class="row collapse">
<div class="small-2 columns">
<button type="submit" form="formStepOne" value="Submit">Fortsätt</button>
</div>
</div>
</div>
And this is what the controllers/actionResults look like
[HttpPost]
public ActionResult Step2(SupporterViewModel model)
{
//Validate and return
return PartialView("~/Views/SupporterBlock/SupporterStepThree.cshtml", model);
}