Develop Reference

What are the ways to update related collections to a complex object in ASP.NET Razor Page?

I have a problem when it comes to updating a new order (in an array of complex object)
I apply the same Update Page with other object (Eg. Category) and the code worked on most case but this!
Any recommendations you may have will be welcomed and much appreciated! Thanks!
I have these 3 Entities:
public class Order
{
public int OrderId { get; set; }
public string Customer { get; set; }
public List<OrderItem> OrderItems { get; set; }
}
public class OrderItem
{
public int OrderItemId { get; set; }
public string Category { get; set; }
public int Quantity { get; set; }
}
public struct Category
{
public int CategoryId;
public string CategoryName;
}
On Razor Page (view):
<form method="POST">
<label for="orderid">OrderId:</label>
<input type="text" asp-for="order.OrderId" value="#Model.orderS.OrderId" />
<label for="customer">Customer:</label>
<input type="string" asp-for="order.Customer" value="#Model.HoaDonNH.orderS.OrderId" />
<table>
<tr>
<th>Category</th>
<th>Quantity</th>
</tr>
#for(int i = 0; i < 3; i++)
{
<tr>
<td>
<select asp-for="order.OrderItems[i].Category">
#foreach (Category c in Model.CategoryList)
{
<option value="#c.CategoryName">#c.CategoryName</option>
}
</select>
</td>
<td>
<input type="text" value="#Model.orderS.OrderItems[i].Quantity" asp-for="order.OrderItems[i].Quantity" />
</td>
</tr>
}
</table>
<input type="submit" value="Update" />
</form>
Services:
public static bool Update(Order o)
{
Order[] OrderList = ReadList();
for (int i = 0; i < OrderList.Length; i++)
{
if (OrderList[i].OrderId == hd.OrderId)
{
OrderList[i] = o;
Savelist(OrderList);
return true;
}
}
return false;
}
public static Order[] ReadList()
{
string filePath = "e:\\order.json";
StreamReader file = new StreamReader(filePath);
string json = file.ReadToEnd();
file.Close();
Order[] OrderList = JsonConvert.DeserializeObject<Order[]>(json);
return OrderList;
}
PageModel: (cshtml.cs)
public string Message;
public Order orderS;
public Category[] CategoryList;
[BindProperty(SupportsGet = true)]
public int Id { get; set; }
[BindProperty]
public Order order { get; set; }
public void OnGet()
{
if (Id > 0)
{
orderS = Services.ReadOrder(Id);
CategoryList = Services.ReadList();
}
else
{
Message += "Order ID is invalid";
}
}
public void OnPost()
{
HoaDonNH = Services.ReadOrder(Id);
OrderList = Services.ReadList();
bool result = Services.Update(order);
Message += "Successfully update your order!";
}
Note:
I have tested the Create, Read, Delete Page and they all worked!
There is no Error Message after hitting submit!
The specific order will be updated and save in the array in my json file after hitting submit.

Blazor implementation of Bootstrap Vue B-Checkbox with array model

I'm trying to come up with a Blazor implementation of using an array type model with multiple checkboxes.
Vue component:
<template>
<div>
<b-form-group label="Using sub-components:">
<b-form-checkbox-group id="checkbox-group-2" v-model="selected" name="flavour-2">
<b-form-checkbox value="orange">Orange</b-form-checkbox>
<b-form-checkbox value="apple">Apple</b-form-checkbox>
<b-form-checkbox value="pineapple">Pineapple</b-form-checkbox>
<b-form-checkbox value="grape">Grape</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group>
<div>Selected: <strong>{{ selected }}</strong></div>
</div>
</template>
<script>
export default {
data() {
return {
selected: [], // Must be an array reference!
}
}
}
</script>
Blazor component:
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="#id" name="#name" #onchange="#((ChangeEventArgs) => CheckedChanged(ChangeEventArgs, value))">
<label class="custom-control-label" for="#id">#label</label>
</div>
#code {
[Parameter]
public string id { get; set; }
[Parameter]
public string name { get; set; }
[Parameter]
public object value { get; set; }
[Parameter]
public List<object> model { get; set; }
[Parameter]
public EventCallback<List<object>> modelChanged { get; set; }
[Parameter]
public string label { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
}
protected void CheckedChanged(ChangeEventArgs args, object value)
{
if(!model.Any(i => i == value))
{
model.Add(value);
}
else
{
model.Remove(value);
}
}
}
Usage:
#foreach (string timezone in DistinctTimezones)
{
<BCheckbox #bind-model="#FilterTimezones" value="#timezone" label="#timezone" id="#(string.Format("timezone_{0}", timezone))" name="#(string.Format("timezone_{0}", timezone))" />
}
<p>Selected:</p>
#foreach(var timezone in FilterTimezones)
{
#timezone
}
#code {
protected List<string> DistinctTimezones { get; set; } = new List<string>{"Central", "Eastern"};
protected List<object> FilterTimezones { get; set; } = new List<object>();
}
When I check the checkboxes, the FilterTimezone object doesn't get updated with the values from checked checkboxes. Is this something that is already possible and I am overcomplicating it? I'm only aware of binding values to a non-collection type.

I'd do it like that (string is here just to simplify to get the idea)
CollectionCheckBox.razor
<input type="checkbox" #bind=isChecked />
#code
{
[Parameter]
public string Value { get; set; }
[Parameter]
public List<string> Model {get; set;}
private bool isChecked
{
get => Model.Any(el => el == Value);
set
{
if(value)
{
if(!Model.Any(el => el == Value) Model.Add(Value);
}
else
Model.Remove(Value);
}
}
}
Then in parent component you just do
<CollectionCheckBox Model="#Model", Value="Orange" />
<CollectionCheckBox Model="#Model", Value="Apple" />
<CollectionCheckBox Model="#Model", Value="Pineapple" />
<CollectionCheckBox Model="#Model", Value="Grape" />
#code
{
private List<string> Model = new List<string();
}

TextboxFor in MVC is not binding to Model inside a for loop

My Viewmodel (contains a number of submodels) is:
public class ViewModel
{
public IEnumerable<tblQuestion> DemoQuestions { get; set; }
public IEnumerable<tblQuestion> TechQuestions { get; set; }
public List<tblAnswer> DemoQ1Answers { get; set; }
public List<tblAnswer> DemoQ2Answers { get; set; }
public List<tblAnswer> TechAnswers { get; set; }
public string selectedAnswerIDforQ1 { get; set; }
public string selectedAnswerIDforQ2 { get; set; }
}
My tblAnswer model is like below:
public partial class tblAnswer
{
public int AnswerID { get; set; }
public Nullable<int> QuestionID { get; set; }
public string AnswerDescription { get; set; }
public string Q1Other { get; set; }
}
This is my view code:
#using (Html.BeginForm("Display", "Questionnaire", FormMethod.Post))
{
foreach (tblQuestion question in Model.DemoQuestions)
{
<p>#question.QuestionDescription</p>
#for (int i = 0; i < Model.DemoQ1Answers.Count(); i++)
{
if (question.QuestionID == 1)
{
<div class="col-md-4">
#Html.RadioButtonFor(m => Model.selectedAnswerIDforQ1, Model.DemoQ1Answers[i].AnswerID)
#Model.DemoQ1Answers[i].AnswerDescription
#Html.HiddenFor(m => Model.DemoQ1Answers[i].AnswerID)
#Html.HiddenFor(m => Model.DemoQ1Answers[i].AnswerDescription)
#if (Model.DemoQ1Answers[i].AnswerID == 4)
{
#Html.TextBoxFor(m => Model.DemoQ1Answers[i].Q1Other)
}
</div>
}
}
}
<input type="submit" value="Submit" />
}
When I press submit, my textbox value in the model is null. Means, mymodel.DemoQ1Answers[3].Q1Other is null. All other model values are bound with model values in the view except this one.
This is my controller:
[HttpPost]
public ActionResult Display(ViewModel mymodel)
{
foreach (var demoqstns in mymodel.DemoQuestions)
{
int AnswerSelected = 0;
string otherText = null;
if (qstnID == 1)
{
AnswerSelected = Convert.ToInt32(mymodel.selectedAnswerIDforQ1);
if (AnswerSelected == 4)
{
otherText = mymodel.DemoQ1Answers[3].Q1Other;
}
}
else if (qstnID == 2)
{
AnswerSelected = Convert.ToInt32(mymodel.selectedAnswerIDforQ2);
}
}
}
Please help.

you have to use for loop instated of foreach
for (var i = 0; i < Model.Orders.Count(); i++)
#Html.HiddenFor(x => Model.Orders[i].CustomerID)
the index value i appears in the lambda expression for each form element being generated by the loop, The TextBoxFor HtmlHelper is used, rather than the more general (and automagic) DisplayFor and EditorFor.

Submitting form from View to Controller isn't populating Model object

I have a Controller, View, and Model for an application I am taking over from someone else. The problem I'm having is that when the javascript submits the form, my model object in the Edit function of the Controller is not being filled with the values from the View, all fields are either null or 0. How can I get the object to be properly filled?
I have tried looking at Firebug, but I can't see anything that would indicate a problem. The string parameter id is correctly being passed in the URL, ex: firsttry.com/admin/distribution/edit/sanfran, where sanfran is the id string. Firebug is confirming that the javascript is correctly loaded when it would be called.
#section scripts
{
#Scripts.Render("~/bundles/qmmodules/admin/distribution")
}
DistributionController.cs
namespace JRI.QM.WebUI.Areas.Admin.Controllers
{
public class DistributionController : BaseAdminController
{
[HttpPost]
public ActionResult Edit(string id, DistributionViewModel model)
{
}
}
}
DistributionViewModel.cs
namespace JRI.QM.WebUI.Areas.Admin.Models.ViewModels
{
public class DistributionViewModel
{
public string name;
public string ipAddress;
public string description;
public Byte eyeDee;
public string destinationPath;
public List<JRI.DMP.BLL.Filter> filters;
}
}
Edit.cshtml
#model JRI.QM.WebUI.Areas.Admin.Models.ViewModels.DistributionViewModel
#{
ViewBag.Title = "Edit";
}
#using (Html.BeginForm("Edit", "Distribution", FormMethod.Post, new { id = "editRoleForm" }))
{
<div class="dialog" id="editRoleDialog">
#Html.TextBoxFor(x => x.name)
#Html.HiddenFor(x => x.ipAddress)
#Html.TextBoxFor(x => x.description)
#Html.HiddenFor(x => x.eyeDee)
#Html.HiddenFor(x => x.destinationPath)
#Html.HiddenFor(x => x.filters)
<div id="permissionsDialogFooter" class="dialogFooter newUser_dialogFooter">
<div class="qm_mediumButton submitButton">save</div>
<div class="qm_mediumButton cancelButton">cancel</div>
<br class="clearfloat" />
</div>
</div>
}
distribution.js
QM.ui.Role = (function ($) {
var _xhrInProgress = false;
function init() {
_bindEvents();
}
// private functions
function _bindEvents() {
var addEditRoleEvents = function (formObj) {
formObj.submit(function () {
var $this = $(this);
if ($this.valid()) {
$.post($this.attr("action"), $this.serialize(), function (response) {
if (response.Success) {
if (response.RedirectUrl) {
window.location.href = response.RedirectUrl;
}
}
});
}
return false;
});
formObj.find(".submitButton").click(function () {
formObj.submit();
});
};
// Edit role dialog
$(".dt-edit a").click(function () {
var $this = $(this);
$.get($this.attr("href"), function (data) {
$(".content").after(data);
QM.ui.Mask.show();
addEditRoleEvents($("#editRoleForm"));
});
return false;
});
}
return {
init: init,
};
})(jQuery);
$(document).ready(QM.ui.Role.init);
in RouteConfig.cs
routes.MapRoute("Default",
"{controller}/{action}/{id}",
new { controller = "Home", action = "Index", id = UrlParameter.Optional },
new[] { "JRI.QM.WebUI.Controllers" }
);

The default model binder of ASP.NET MVC, only work with properties. Your model class doesn't have any property, it does have fields.
To fix that use properties instead field in your model class, like below
public class DistributionViewModel
{
public string name { get; set; }
public string ipAddress { get; set; }
public string description { get; set; }
public Byte eyeDee { get; set; }
public string destinationPath { get; set; }
public List<JRI.DMP.BLL.Filter> filters { get; set; }
}
Also I suggest you to follow the C# code convetions, it says that you should use PascalCase for properties, you can see more details here https://msdn.microsoft.com/en-us/library/ms229043(v=vs.110).aspx
Following the convetion, your class should be like that
public class DistributionViewModel
{
public string Name { get; set; }
public string IpAddress { get; set; }
public string Description { get; set; }
public Byte EyeDee { get; set; }
public string DestinationPath { get; set; }
public List<JRI.DMP.BLL.Filter> Filters { get; set; }
}

Error DbContext in 1:1 reference call view

I have 2 classes, and try to use the reference in view of a class to another class gives the error:
The ObjectContext instance has been disposed and can no longer be used for operations that require a connection.
Class "CLIENTE"
public class Cliente : IEntidadeBase
{
[Key]
[Display(Name = "Cód. de Cliente")]
public int ClienteID { get; set; }
[Display(Name = "Cód. de Pessoa")]
public int PessoaID { get; set; }
public string Matriz { get; set; }
[Display(Name = "Limite de crédito")]
public decimal LimiteCredito { get; set; }
[ForeignKey("PessoaID")]
public virtual Pessoa Pessoa { get; set; }
}
Class "PESSOA"
public class Pessoa : IEntidadeBase
{
[Key]
public int PessoaID { get; set; }
public int? EmpresaIDVinc { get; set; }
[Display(Name = "Matrícula")]
public string Matricula { get; set; }
[Display(Name = "Nome")]
[Obrigatorio]
public string Nome { get; set; }
}
Controller View change:
[Authorize]
[ControleDeAcesso(TipoAcao.Normal)]
public ActionResult Detalhar(int id)
{
using (var db = new ERPContext())
{
Cliente cliente = db.Cliente.Find(id);
var retorno = FlexGestor.Helpers.EntidadeBaseExt.ValidarRegistro(cliente, TipoAcao.Visualizar);
if (retorno != "")
{
TempData["MsgRetornoError"] = retorno;
return RedirectToAction("Index", "Home");
}
return View(cliente);
}
}
View Code:
#model FlexGestor.Models.Cliente
#Html.TituloPagina("Visualizando Cliente")
#using (Html.BeginForm())
{
#Html.ValidationSummary(true);
<div class="linha left">
#Html.HiddenFor(m => m.ClienteID)
#Html.LabelFor(m => m.Pessoa.Nome) #Html.ValidationMessageFor(m => m.Pessoa.Nome)<br />
#Html.TextBoxFor(m => m.Pessoa.Nome, new { style = "width:250px;" })<br />
#Html.LabelFor(m => m.LimiteCredito) #Html.ValidationMessageFor(m => m.LimiteCredito)<br />
#Html.TextBoxFor(m => m.LimiteCredito, new { style = "width:250px;" })<br />
#Html.BotaoTelaDetalhar()
</div>
}
<div class="linha rodape"></div>

I'm not 100% sure if this will fix your issue but try changing to this and see if it helps
[Authorize]
[ControleDeAcesso(TipoAcao.Normal)]
public ActionResult Detalhar(int id)
{
Cliente cliente = null;
using (var db = new ERPContext())
{
cliente = db.Cliente.Find(id);
var retorno = FlexGestor.Helpers.EntidadeBaseExt.ValidarRegistro(cliente, TipoAcao.Visualizar);
if (retorno != "")
{
TempData["MsgRetornoError"] = retorno;
return RedirectToAction("Index", "Home");
}
}
if(cliente != null && cliente.pessoa != null)
{
return View(cliente);
}
else
{
// do something else here as the view does not have required stuff
}
}