We Keep Coding

Having trouble passing data to controller in Asp.Net Core MVC using tag helpers [duplicate]

This question already has answers here:
Values of disabled inputs will not be submitted
(9 answers)
Closed 1 year ago.
I am trying to learn how to pass data into an HttpPost function in Asp.Net Core MVC using tag helpers.
Here is my Model:
public class PersonModel
{
public int Id { get; set; }
public string Name { get; set; }
public bool Exists { get; set; }
}
Here is my View:
<form asp-controller="Home" asp-action="CustomerInput" method="post">
<div class="row">
<div class="col">
<div class="form-group">
<label for="lblId">
Id
</label>
<input asp-for="#Model.Id" type="text" class="form-control" id="lblId" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="lblName">
Name
</label>
<input asp-for="#Model.Name" type="text" class="form-control" id="lblId" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<div class="form-check">
<input asp-for="#Model.Exists" class="form-check-input" type="checkbox" id="chkExists">
<label class="form-check-label" for="chkExists">
Exists
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<input type="submit" name="btnNext" value="Next" class="btn btn-secondary" />
</div>
</div>
</div>
Here is my Controller:
[HttpGet]
public IActionResult CustomerInput()
{
var model = new PersonModel { Id = 1, Name = "Homer Simpson", Exists = false };
return View(model);
}
[HttpPost]
public IActionResult CustomerInput(PersonModel model)
{
return View("CustomerOutput", model);
}
When I attempt to submit the form and pass the model to my HttpPost function, only the Exists value passes successfully. Id is always 0 and Name is always null.
What am I missing?

Disabled inputs won't post back to the controller. Use readonly:
<input asp-for="#Model.Id" type="text" class="form-control" id="lblId" readonly>
See devlin carnate's post for clarity
It's also good practice to use unique identifiers for your input id's!

Select combobox in MVC .net core linked to a ID

I trying to learm MVC .net core and I need to populate a combobox and save in to Database the ID of combobox.
I have this code in my controller:
ViewBag.Categories = new List<SelectListItem>
{
new SelectListItem{ Text="history", Value="1"},
new SelectListItem{ Text="literature", Value="2"},
};
here the code in my view:
<div class="form-group row">
<div class="col-3">
<label asp-for="IdCategory">Category</label>
</div>
<div class="col-6">
<select asp-for="IdCategory" name="CategoryId" asp-items="ViewBag.Categories">
<option>-- select the category --</option>
</select>
<span asp-validation-for="IdCategory" class="text-danger"></span>
</div>
</div>
The combobox show correctly the content but after I save in to the database the field "IdCategory" = 0.
My impression is that the view try to save "history" in field "IdCategory" and not "1" that is the ID.
If this is true, how I can force to save the ID and not the text ?
Thanks
Update here the controller:
public IActionResult Upsert(int? id)
{
ViewBag.Categories = new List<SelectListItem>
{
new SelectListItem{ Text="history", Value="1"},
new SelectListItem{ Text="literature", Value="2"},
};
Book = new Book();
if (id == null)
{
//create
return View(Book);
}
//update
Book = _db.Books.FirstOrDefault(u => u.Id == id);
if (Book == null)
{
return NotFound();
}
return View(Book);
}
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Upsert()
{
if (ModelState.IsValid)
{
if (Book.Id == 0)
{
//create
_db.Books.Add(Book);
}
else
{
_db.Books.Update(Book);
}
_db.SaveChanges();
return RedirectToAction("Index");
}
return View(Book);
}
here the complete view:
#model BookListMVC.Models.Book
<br />
<h2 class="text-info">#(Model.Id!=0 ? "Edit" : "Create") Book</h2>
<br />
<div class="border container" style="padding:30px;">
<form method="post">
#if (Model.Id != 0)
{
<input type="hidden" asp-for="Id" />}
<div class="text-danger" asp-validation-summary="ModelOnly"></div>
<div class="form-group row">
<div class="col-3">
<label asp-for="Name"></label>
</div>
<div class="col-6">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-3">
<label asp-for="Author"></label>
</div>
<div class="col-6">
<input asp-for="Author" class="form-control" />
<span asp-validation-for="Author" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-3">
<label asp-for="ISBN"></label>
</div>
<div class="col-6">
<input asp-for="ISBN" class="form-control" />
<span asp-validation-for="ISBN" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-3">
<label asp-for="ISBN"></label>
</div>
<div class="col-6">
<input asp-for="ISBN" class="form-control" />
<span asp-validation-for="ISBN" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-3">
<label asp-for="IdCategory">Category</label>
</div>
<div class="col-6">
<select asp-for="IdCategory" name="CategoryId" asp-items="#ViewBag.Categories">
<option>-- select the category --</option>
</select>
<span asp-validation-for="IdCategory" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
<div class="col-3 offset-3">
<button type="submit" class="btn btn-primary form-control">
#(Model.Id != 0 ? "Update" : "Create")
</button>
</div>
<div class="col-3">
<a asp-action="Index" class="btn btn-success form-control">Back to List</a>
</div>
</div>
</form>
</div>
#section Scripts{
<partial name="_ValidationScriptsPartial" />
}
and the book class:
public class Book
{
[Key]
public int Id { get; set; }
[Required]
public string Name { get; set; }
public string Author { get; set; }
public string ISBN { get; set; }
public int IdCategory { get; set; }
}

Change the post to this. You're not getting the posted details from the page
[HttpPost]
[ValidateAntiForgeryToken]
public IActionResult Upsert(BookListMVC.Models.Book model)
{
if (ModelState.IsValid)
{
if (model.Id == 0)
{
//create
_db.Books.Add(model);
}
else
{
_db.Books.Update(model);
}
_db.SaveChanges();
return RedirectToAction("Index");
}
return View(model);
}

MVC Core - Passing ID to view and pre-selecting value in selectlist

First of all forgive me as I am new to MVC.
I have a view which shows server(s) related to a particular application. If none exist, or the user wants to add an additional application/server relationship, they click on "Create New". From this link, I would like the ApplicationID to be passed to the Create view, and the selectlist for Applications to default to the correct Application. Or alternatively, display the application name/id in a label. I would also like to pass the ApplicationId back when "Back to List" is selected.
Model:
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Threading.Tasks;
namespace ApplicationPortfolio.Models
{
[Table("tblServerApp")]
public class ServerApp
{
public int ServerAppId { get; set; }
public int? ApplicationId { get; set; }
public int? ServerId { get; set; }
public virtual Application Application { get; set; }
public virtual Server Server { get; set; }
}
}
Controller:
// GET: ServerApps/Create
public IActionResult Create(int? id)
{
ViewData["ApplicationId"] = new SelectList(_context.Application, "ApplicationID", "Name", id);
ViewData["ServerId"] = new SelectList(_context.Server, "ServerId", "ServerName");
return View();
}
View:
#model ApplicationPortfolio.Models.ServerApp
#{
ViewData["Title"] = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Create</h1>
<h4>ServerApp</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">
<div class="form-group">
<label asp-for="ApplicationId" class="control-label"></label>
<select asp-for="ApplicationId" class="form-control" asp-items="ViewBag.ApplicationId"></select>
</div>
</div>
<div class="form-group">
<label asp-for="ServerId" class="control-label"></label>
<select asp-for="ServerId" class ="form-control" asp-items="ViewBag.ServerId"></select>
</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");}
}

After my test,I found your problem may in your code:
ViewData["ApplicationId"] = new SelectList(_context.Application, "ApplicationID", "Name", id);
ApplicationID and Name should be same with the name in your Application model.
If your model is(example) :
public class Application
{
[Key]
public int ApplicationId { get; set; }
public string ApplicationName { get; set; }
public List<ServerApp> ServerApps { get; set; }
}
Your code should be(Please pay attention to whether the case and match) :
ViewData["ApplicationId"] = new SelectList(_context.Applications, "ApplicationId", "ApplicationName",id);
And if you want to pass the ApplicationId back to Index,you can try following code.
#model ServerApp
#{
ViewData["Title"] = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h4>ServerApp</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">
<div class="form-group">
<label asp-for="ApplicationId" class="control-label"></label>
<select id="select" asp-for="ApplicationId" class="form-control" asp-items="ViewBag.ApplicationId"></select>
</div>
</div>
<div class="form-group">
<label asp-for="ServerId" class="control-label"></label>
<select asp-for="ServerId" class="form-control" asp-items="ViewBag.ServerId"></select>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<button id="submit" class="btn btn-info">Back to List</button>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
$("#submit").click(function (e) {
e.preventDefault();
var e = document.getElementById("select");
var strUser = e.value;
window.location.href = "/home/index?id=" + strUser;
})
</script>
}
Test Result:

Saving an item in a collection in ASP.NET Core Razor Pages

I'm not understanding how to properly bind a single item from a collection. In my project, a student can have multiple plans with these models:
public class Student
{
public Student()
{
Plans = new HashSet<Plan>();
}
public int StudentId { get; set; }
public string Designee { get; set; }
public string DesigneePhone { get; set; }
public virtual ICollection<Plan> Plans { get; set; }
}
public partial class Plan
{
public int PlanId { get; set; }
public int StudentId { get; set; }
public DateTime? StartDate { get; set; }
public DateTime? EndDate { get; set; }
public virtual Student Student { get; set; }
}
I'm listing each plan with its own Save button on the page. I thought I was using the asp-for helper correctly according to this Learn Razor Pages post.
#page "{studentId:int}"
#model CollectionTest.PlansModel
<form asp-page-handler="SaveMain" method="post">
<div class="row mt-3">
<input type="hidden" asp-for="Student.StudentId" />
<div class="col">
<label asp-for="Student.Designee"></label>
<input asp-for="Student.Designee" class="form-control" />
</div>
<div class="col">
<label asp-for="Student.DesigneePhone"></label>
<input asp-for="Student.DesigneePhone" class="form-control" />
</div>
<div class="col-auto align-self-end">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</form>
<hr />
#for (int i = 0; i < Model.Student.Plans.Count(); i++)
{
var planId = Model.Student.Plans.ToList()[i].PlanId.ToString();
<div id="#("card_Plan" + planId)" class="card">
<div class="card-header">
<h5>Plan ##planId</h5>
</div>
<div class="card-body">
<form id="#("form_Plan" + planId)" asp-page-handler="SavePlan" method="post">
<input type="hidden" asp-for="Student.Plans.ToList()[i].PlanId" />
<div class="row">
<div class="col">
<label asp-for="Student.Plans.ToList()[i].StartDate"></label>
<input asp-for="Student.Plans.ToList()[i].StartDate" class="form-control" />
<span asp-validation-for="Student.Plans.ToList()[i].StartDate"></span>
</div>
<div class="col">
<label asp-for="Student.Plans.ToList()[i].EndDate"></label>
<input asp-for="Student.Plans.ToList()[i].EndDate" class="form-control" />
<span asp-validation-for="Student.Plans.ToList()[i].EndDate"></span>
</div>
</div>
</form>
</div>
<div class="card-footer">
<div class="float-right">
<button type="submit" class="btn btn-primary" form="#("form_Plan" + planId)">Save</button>
</div>
</div>
</div>
}
But it seems like nothing is being bound in the SavePlan page handler:
[BindProperty]
public Student Student { get; set; }
.
.
.
public async Task<IActionResult> OnPostSavePlan(int planId)
{
if (!ModelState.IsValid)
{
return Page();
}
/******************************
*
* Student.Plans is empty and planId is zero
*
*******************************/
Plan plan = await _planContext.Plan.FirstAsync(p => p.PlanId == planId);
_planContext.Attach(plan).State = EntityState.Modified;
try
{
await _planContext.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!PlanExists(plan.PlanId))
{
return NotFound();
}
else
{
throw;
}
}
return RedirectToPage("./Plans");
}
What am I doing wrong?

According to your code, because what you pass in the razor page is [0].PlanId, but what you receive in the OnPostSavePlan method is planId. If you only need to receive planId, you need to change the form.
<div class="card-body">
<form id="#("form_Plan" + planId)" asp-page-handler="SavePlan" method="post">
<input type="hidden" asp-for="#planId" />
From your requirement,it seems you want to pass a list of plans. So you need to modify your code in the following steps:
Plans.cshtml:
<form id="form_Plan" asp-page-handler="SavePlan" method="post">
#for (int i = 0; i < Model.Student.Plans.Count(); i++)
{
var planId = Model.Student.Plans.ToList()[i].PlanId.ToString();
<div id="#("card_Plan" + planId)" class="card">
<div class="card-header">
<h5>Plan ##planId</h5>
</div>
<div class="card-body">
<input type="hidden" asp-for="Student.Plans.ToList()[i].PlanId" />
<div class="row">
<div class="col">
<label asp-for="Student.Plans.ToList()[i].StartDate"></label>
<input asp-for="Student.Plans.ToList()[i].StartDate" class="form-control" />
<span asp-validation-for="Student.Plans.ToList()[i].StartDate"></span>
</div>
<div class="col">
<label asp-for="Student.Plans.ToList()[i].EndDate"></label>
<input asp-for="Student.Plans.ToList()[i].EndDate" class="form-control" />
<span asp-validation-for="Student.Plans.ToList()[i].EndDate"></span>
</div>
</div>
</div>
</div>
}
<div class="card-footer">
<div class="float-right">
<button type="submit" class="btn btn-primary" form="form_Plan">Save</button>
</div>
</div>
</form>
Plans.cshtml.cs:
public class PlansModel : PageModel
{
public IActionResult OnGet()
{
//for easy testing,I add the data manually
Student = new Student()
{
Plans = new List<Plan>()
{
new Plan(){ PlanId=1, StartDate=DateTime.Parse("2019-8-7")},
new Plan(){ PlanId=2, StartDate=DateTime.Parse("2019-4-7")},
new Plan(){ PlanId=3, StartDate=DateTime.Parse("2019-6-7")}
}
};
return Page();
}
[BindProperty]
public Student Student { get; set; }
public async Task<IActionResult> OnPostSavePlan(List<Plan> plans)
{
//...
}
}
Result:
Update:
Plans.cshtml:
#foreach (var plan in Model.Student.Plans)
{
var planId = plan.PlanId.ToString();
<div id="#("card_Plan" + planId)" class="card">
<div class="card-header">
<h5>Plan ##planId</h5>
</div>
<div class="card-body">
<form id="#("form_Plan" + planId)" asp-page-handler="SavePlan" method="post">
<input type="hidden" asp-for="#plan.PlanId" />
<div class="row">
<div class="col">
<label asp-for="#plan.StartDate"></label>
<input asp-for="#plan.StartDate" class="form-control" />
<span asp-validation-for="#plan.StartDate"></span>
</div>
<div class="col">
<label asp-for="#plan.EndDate"></label>
<input asp-for="#plan.EndDate" class="form-control" />
<span asp-validation-for="#plan.EndDate"></span>
</div>
</div>
</form>
</div>
<div class="card-footer">
<div class="float-right">
<button type="submit" class="btn btn-primary" form="#("form_Plan" + planId)">Save</button>
</div>
</div>
</div>
}
Plans.cshtml.cs:
public async Task<IActionResult> OnPostSavePlan(Plan plan)
{
//...
}
Result:

FooProof Core validating in Asp.NET Core for Validation but shows exception

I am using FoolProof COre in Asp.Net Core 3.0 Application.
My Model is
public class PaymentReceiveMVm
{
public int PayMode { get; set; }
public string PaymentMode { get; set; }
[Column(TypeName = "date")]
[DataType(DataType.Date)]
public Nullable<DateTime> DOCredit { get; set; } //= DateTime.Today.Date;
[RequiredIf("PayMode",1,ErrorMessage ="Bank Name is Required")]
public int? BID { get; set; }
public string BankAccount { get; set; }
}
My _Layout Page inclueds:
<script src="~/vendor/jquery/jquery.min.js"></script>
<script src="~/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="~/vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="~/lib/js/jquery.validate.min.js"></script>
<script src="~/lib/js/jquery.validate.unobtrusive.min.js"></script>
<script src="~/vendor/FoolProofValidation/mvcfoolproof.core.js"></script>
<script src="~/vendor/FoolProofValidation/mvcfoolproof.jquery.validation.js"></script>
<script src="~/vendor/FoolProofValidation/mvcfoolproof.unobtrusive.js"></script>
In my View is
$.validator.unobtrusive.parse("#EditPayReceiveM");
When correct input is there the data works fine. But when the RequiredIf validation fails system exception is there in Java Script which is as below:
System.ArgumentNullException: Value cannot be null. (Parameter 'items')
at Microsoft.AspNetCore.Mvc.Rendering.MultiSelectList..ctor(IEnumerable items, String dataValueField, String dataTextField, IEnumerable selectedValues, String dataGroupField)
Full Razor View is as :
<script>
$(document).ready(function () {
$.validator.unobtrusive.parse("#EditPayReceiveM");
//Adding Containers to temporary Data Table
$('#BtnAdd').on('click', function () {
if (!$("#EditPayReceiveM").valid()) {
return false;
}
else {
console.log('DOC', $('#TxtDOC').val());
SaveModal(EditPayReceiveM, "/PaymentReceives/EditPayReceiveM", DtPaymentsReceived)
}
});
});
</script>
<div class="modal-header">
<h4 class="modal-title" id="MyModalTitle">Edit Payment</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
#using (Html.BeginForm("EditPayReceiveM", "PaymentReceives", FormMethod.Post, new { id = "EditPayReceiveM" }))
{
<div class="modal-body">
<form>
<fieldset>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Pay Mode</label>
#Html.DropDownListFor(model => model.PayMode, new SelectList(ViewBag.Paymode, "PMID", "PayMode"), "-- Select One --", new { #class = "form-control", #id = "CmbPayMode",#onchange= "CheckPayMode(this)" })
<span asp-validation-for="PayMode" class="text-danger"></span>
</div>
<div class="form-group">
<label>Credit Date</label>
<div class="input-group">
<div class="input-group-prepend">
<button type="button" id="CreditDate" class="input-group-text"><i class="fas fa-calendar-alt"></i></button>
</div>
<input type="text" asp-for="DOCredit" class="form-control" id="TxtDOC" />
<span asp-validation-for="DOCredit" class="text-danger"></span>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
<input type="button" class="btn btn-primary" value="Add" id="BtnAdd" />
</div>
}
-----
Please help I have done all what I could.