Develop Reference

How to edit List of objects in a model

CustomCssFields is null when going back to controller. I already set a constructor but it is still the same. I found some similar question MVC Model with a list of objects as property but it almost has the same code as mine.
MODEL
public class CompanyModelView
{
public CompanyModelView()
{
CustomCssFields = new List<CompanyCssReferenceModelView>();
}
[BsonId]
public string _id { get; set; }
[BsonElement("CompanyName")]
[DisplayName("Company Name")]
public string CompanyName { get; set; }
[BsonElement("CompanyCode")]
[DisplayName("Company Code")]
public string CompanyCode { get; set; }
[BsonElement("CompanyConnectionString")]
[DisplayName("Company Connection String")]
public string CompanyConnectionString { get; set; }
[BsonElement("CargowiseVersion")]
[DisplayName("Cargowise Version")]
public string CargoWiseVersion { get; set; }
[BsonElement("CustomCssFields")]
[UIHint("CustomCssFields")]
public IList<CompanyCssReferenceModelView> CustomCssFields { get; set; }
}
public class CompanyCssReferenceModelView
{
[BsonElement("FieldName")]
public CssOptionEnum FieldName;
[BsonElement("FieldValue")]
public string FieldValue;
}
VIEW
here is the view.
#model WebTrackerModels.CompanyModels.CompanyModelView
<form asp-action="SaveCompany" enctype="multipart/form-data">
<div class="form-group">
<table class="table">
<thead>
<tr>
<th>
Field Name
</th>
<th>
Field Value
</th>
</tr>
</thead>
<tbody>
#{
for (int i = 0; i < Model.CustomCssFields.Count; i++)
{
<tr>
<td>
#Html.DisplayFor(model => model.CustomCssFields[i].FieldName)
</td>
<td>
#Html.TextBoxFor(model => model.CustomCssFields[i].FieldValue, new { #class = "form-control", type = "color", value = Model.CustomCssFields[i].FieldValue })
</td>
</tr>
}
}
</tbody>
</table>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-success" />
</div>
</form>

Pass ID from view of type IEnumerable using HTML Actionlink in Razor

I have two models "Computer" and "Computer Detail." From the Computer's Index page the user can click "View Details" for a given record which redirects to the Index of the Computer Detail and fetches all the records associated with that given "Computer ID" using the query string - That works fine
My problem is I want to have a "Create" link that carries this "Computer ID" (shown in view) and populates the Computer ID field on the Create form.
I used Model.First().ComputerID that worked to run the code with some test records but of course it doesn't work if records for the ComputerID is null.
View
#modelIEnumerable<MyApp.Models.ComputerDetail>
#{
ViewBag.Title = "Index";
}
<h2 class ="page-header">Computer Details</h2>
<div class ="col-lg-12">
<p>
#Html.ActionLink("Create New", "Create", "ComputerDetail", new {id = Model.First().ComputerID}, new { #class = "btn btn-default"})
</p>
<div class="panel panel-default">
<div class ="panel-body">
<table class ="table table-striped" id="dtaTable">
<thead class ="dataTableHead">
<tr>
<th>
#Html.DisplayNameFor(model => model.ComputerID)
</th>
<th>
#Html.DisplayNameFor(model => model.EmployeeID)
</th>
<th>
#Html.DisplayNameFor(model => model.StartDate)
</th>
<th>
#Html.DisplayNameFor(model => model.EndDate)
</th>
<th>
#Html.DisplayNameFor(model => model.Comments)
</th>
<th>Actions</th>
</tr>
</thead>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.ComputerID)
</td>
<td>
#Html.DisplayFor(modelItem => item.Employee.FullName)
</td>
<td>
#Html.DisplayFor(modelItem => item.StartDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.EndDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.Comments)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.ID }) |
#Html.ActionLink("Details", "Details", new { id=item.ID }) |
#Html.ActionLink("Delete", "Delete", new { id=item.ID })
</td>
</tr>
}
</table>
</div>
</div>
</div>
Controller
public ActionResult Index(int id)
{
var _FindComputerID = GetComputerDetails(id);
return View(_FindComputerID);
}
private List<ComputerDetail>GetComputerDetails(int id)
{
var FindComputerID = db.ComputerDetails.Where(cd => cd.ComputerID == id).Include
(cd => cd.Employee).OrderByDescending(cd => cd.ID);
return FindComputerID.ToList();
}
[HttpGet]
public ActionResult Create(int id)
{
ComputerDetail computerdetail = new ComputerDetail ();
computerdetail.ComputerID = id;
return View(computerdetail);
}
Model
public class ComputerDetail
{
[Key]
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
public int ID { get; set; }
[Required(ErrorMessage = "Please enter service tag")]
[Display(Name = "Service Tag")]
public int ComputerID { get; set; }
[Required(ErrorMessage = "Please select employee name")]
[Display(Name = "Employee Name")]
public int EmployeeID { get; set; }
[Required(ErrorMessage = "Please enter date")]
[Display(Name = "Date Bought")]
[DataType(DataType.Date)]
public DateTime StartDate { get; set; }
[Display(Name = "Date Bought")]
[DataType(DataType.Date)]
public DateTime? EndDate { get; set; }
public string Comments { get; set; }
//references
public virtual Assets.Computer Computer { get; set; }
public virtual Employee Employee { get; set; }
}

Two thing are happening here:
In the first place, if your view needs to get the ComputerID you may want to reflect this field in the ViewModel and not magically get it from the first item in the list.
public class ComputerDetailsViewModel
{
public int ComputerID {get; set;} // populate in the action directly
public IEnumerable<MyApp.Models.ComputerDetail> Items {get; set;}
}
You really want to go that route, you should use the nullable operator for better error handling figure it out what happens when the ComputerID is null.
#Html.ActionLink("Create New", "Create", "ComputerDetail", new {id = Model.FirstOrDefault()?.ComputerID ?? 0 /*Null case*/}, new { #class = "btn btn-default"})
Hope this help!

sending values to url string on dropdown selected value change in asp.net MVC

I have two tables. First is Development region and second is Zone. Zone has got RegionID as a foreign key. I would like to populate all the row from Zone table that is related with the Region selected from the dropdown list. I cannot figure out why the value is not being passed in url string. Please help me out and suggest the best way to accomplish it. Below are the models, controllers and view.
Model Zone
public class Zone
{
[Key]
public int ZoneID { get; set; }
[Required]
[Display(Name = "Zone Code")]
[RegularExpression(#"^[a-zA-Z]*$"), StringLength(5, ErrorMessage = "Code cannot be more than 5 charachter long")]
[Column("ZCode")]
public string ZoneCode { get; set; }
[Display(Name ="Zone"),RegularExpression(#"^[A-Z]+[a-z]*$"),Required]
public string ZoneName { get; set; }
public int RegionID { get; set; }
public virtual DevRegion devregion { get; set; }
[Required]
[Display(Name ="Active")]
public Boolean isActive { get; set; }
}
Model DevRegions
public class DevRegion
{
[Key]
public int RegionID { get; set; }
[Required]
[Display(Name = "Code")]
[RegularExpression(#"^[a-zA-Z]*$"), StringLength(5, ErrorMessage = "Code cannot be more than 5 charachter long")]
[Column("RCode")]
public string RegionCode { get; set; }
[Required]
[Display(Name ="Region")]
[Column("RName")]
[RegularExpression(#"^[A-Z]+[a-zA-Z\s-]*$", ErrorMessage ="Region can only consist of alphabets, space and dash")]
[StringLength(30,ErrorMessage ="Region cannot exceed 30 characters")]
public string RegionName { get; set; }
[Required]
[Display(Name ="Active")]
public Boolean isActive { get; set; }
}
ZonesController
public class ZonesController : Controller
{
private HuRISContext db = new HuRISContext();
// GET: Zones
public ActionResult Index(int? id)
{
ViewBag.RegionID = new SelectList(db.DevRegions, "RegionID", "RegionName");
var zones = db.Zones.Include(z => z.devregion).Where(x=>x.RegionID==(int)(id??x.RegionID));
return View(zones.ToList());
}
Index.cshtml
#model IEnumerable<HuRIS.Models.Zone>
....
<p>#Html.ActionLink("Create New", "Create")</p>
#using (Html.BeginForm("Index","Zones",FormMethod.Get))
{
#Html.AntiForgeryToken();
<div class="panel panel-info">
<div class="panel-body">
<div class="form-group center-block">
<label for="RegionID" class="control-label">Region:</label>
#Html.DropDownList("RegionID", null, "Show all Zones", htmlAttributes: new { #class = "form-control", #onchange = "this.form.submit();" })
</div>
</div>
</div>
}
<table class="table">
<tr>
<th>#Html.DisplayNameFor(model => model.devregion.RegionName)</th>
<th>#Html.DisplayNameFor(model => model.ZoneCode)</th>
<th>#Html.DisplayNameFor(model => model.ZoneName)</th>
<th>#Html.DisplayNameFor(model => model.isActive)</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>#Html.DisplayFor(modelItem => item.devregion.RegionName</td>
<td>#Html.DisplayFor(modelItem => item.ZoneCode)</td>
<td>#Html.DisplayFor(modelItem => item.ZoneName)</td>
<td>#Html.DisplayFor(modelItem => item.isActive)</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.ZoneID }) |
#Html.ActionLink("Details", "Details", new { id = item.ZoneID }) | #Html.ActionLink("Delete", "Delete", new { id = item.ZoneID })
</td>
</tr>
}
</table>
JQuery
$(document).ready(function () {
$(".form-control").change(function () {
$.ajax({
url: "~/ZonesController/Index",
type: 'GET',
cache: false,
data: { RegionID: $(".form-control").val() },
success: function (data) {
}
});
});
});

index method as shown below
public ActionResult Index()
{
ViewBag.Region = new SelectList(db.DevRegions, "RegionID", "RegionName");
var allzones = db.Zones.Include(z => z.devregion);
return View(allzones.ToList());
}
create new method as Shown below to accept the id selected on dropdown change event and create the partial view to load on the list of data from the table depending on what is selected on the dropdown:
public ActionResult ZoneList(int? id)
{
var zones = db.Zones.Include(z => z.devregion).Where(x => x.RegionID == (int)(id ?? x.RegionID));
return PartialView("~/Views/PartialViews/_ZoneList.cshtml", zones.ToList());
}
changed javascript as follows.
$("#Region").change(function () {
var selectedID = $(this).val();
$.get('/Zones/ZoneList/' + selectedID, function (data) {
$('.table').html(data);
//$('.table').fadeOut("linear");
//$('.table').fadeIn("linear");
});
});
});
on the index.cshtml changed the code as follows:
#model IEnumerable<HuRIS.Models.Zone>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken();
<div class="panel panel-info">
<div class="panel-body">
<div class="form-group center-block">
<label for="RegionID" class="control-label">Region:</label>
#Html.DropDownList("Region", null, "Show all Zones", htmlAttributes: new { #class = "form-control"})
</div>
</div>
</div>
}
#{
Html.RenderPartial("~/Views/PartialViews/_ZoneList.cshtml", Model);
}
partial view _ZoneList.cshtml
#model IEnumerable<HuRIS.Models.Zone>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.devregion.RegionName)
</th>
<th>
#Html.DisplayNameFor(model => model.ZoneCode)
</th>
<th>
#Html.DisplayNameFor(model => model.ZoneName)
</th>
<th>
#Html.DisplayNameFor(model => model.isActive)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.devregion.RegionName)
</td>
<td>
#Html.DisplayFor(modelItem => item.ZoneCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.ZoneName)
</td>
<td>
#Html.DisplayFor(modelItem => item.isActive)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.ZoneID }) |
#Html.ActionLink("Details", "Details", new { id = item.ZoneID }) |
#Html.ActionLink("Delete", "Delete", new { id = item.ZoneID })
</td>
</tr>
}

MVC 4 Passing a list from a view to a controller

I'm new to MVC ASP and would need your assistance.
I would like to pass a list from a view to controller but each time I submit my form, the list is empty (null) in the controller.
Here is my model:
namespace ArcheryComp.Models
{
[MetadataType(typeof(Participe))]
public class Participe
{
[Required]
[Display(Name = "Id Archer")]
public int idArcher { get; set; }
[Required]
[Display(Name = "Id Tournoi")]
public int IdTournament { get; set; }
[Required]
[Display(Name = "Division")]
public int division { get; set; }
[Required]
[Display(Name = "Categorie")]
public string categorie { get; set; }
[Required]
[Display(Name = "Score 1")]
public int ArchScore1 { get; set; }
[Display(Name = "X")]
public int ArchScore1_X_6 { get; set; }
[Display(Name = "10")]
public int ArchScore1_10_5 { get; set; }
[Required]
[Display(Name = "Score 2")]
public int ArchScore2 { get; set; }
[Display(Name = "X")]
public int ArchScore2_X_6 { get; set; }
[Display(Name = "10")]
public int ArchScore2_10_5 { get; set; }
[Required]
[Display(Name = "Total")]
public int ArchTotalScore { get; set; }
[Display(Name = "Total X")]
public int ArchTotalScore_X_6 { get; set; }
[Display(Name = "Total 10")]
public int ArchTotalScore_10_5 { get; set; }
public List<Participe> liste { get; set; }
}
}
Here is my controller:
namespace ArcheryComp.Controllers
{
public class ParticipeController : Controller
{
private ArcheryCompEntities db = new ArcheryCompEntities();
......
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult EncodeResult(IList<Participe> parti)
{
foreach (Participe item in parti)
{
var data = from part in db.Participe
where part.IdArcher == item.IdArcher && part.IdTournament == item.IdTournament
select part;
item.ArchScore1 = item.ArchScore1;
item.ArchScore2 = item.ArchScore2;
item.ArchTotalScore = item.ArchTotalScore;
}
And here is my view :
#model List<ArcheryComp.Participe>
#{
ViewBag.Title = "EncodeResult";
}
<h2>Encoder Resultats</h2>
#using (Html.BeginForm("EncodeResult","Participe",FormMethod.Post))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(false)
<table>
<tr>
<th>
#Html.LabelFor(model => Model[0].Archers.Nom)
</th>
<th>
#Html.LabelFor(model => Model[0].Archers.Prenom)
</th>
<th>
#Html.LabelFor(model => Model[0].Divisions.DivDescription)
</th>
<th>
#Html.LabelFor(model => Model[0].Categorie)
</th>
<th>
#Html.LabelFor(model => Model[0].ArchScore1, new {style = "width: 10px;"})
</th>
<th>
#Html.LabelFor(model => Model[0].ArchScore2, new {style = "width: 10px;"})
</th>
<th>
#Html.LabelFor(model => Model[0].ArchTotalScore, new {style = "width: 10px;"})
</th>
</tr>
#for(int i = 0; i < Model.Count() ; i++)
{
<tr>
<td>
#Html.TextBox("archers["+#i+"].IdArcher", Model[i].Archers.Nom)
#Html.ValidationMessageFor(x => x[i].IdArcher)
</td>
<td>
#Html.TextBox("archers["+#i+"].Prenom", Model[i].Archers.Prenom)
</td>
<td>
#Html.TextBox("archers["+#i+"].Division", Model[i].Divisions.DivDescription)
#Html.ValidationMessageFor(x => x[i].Divisions.Id)
</td>
<td>
#Html.TextBox("archers["+#i+"].Categorie", Model[i].Categorie)
#Html.ValidationMessageFor(x => x[i].Categorie)
</td>
<td>
#Html.TextBox("suma["+#i+"]", Model[i].ArchScore1, new{ #onchange = "updatesum()"})
#Html.ValidationMessageFor(x => x[i].ArchScore1)
</td>
<td>>
#Html.TextBox("sumb["+#i+"]", Model[i].ArchScore2, new { #onchange = "updatesum()" })
#Html.ValidationMessageFor(x => x[i].ArchScore2)
</td>
<td>
#Html.TextBox("sumt["+#i+"]", Model[i].ArchTotalScore, new { #onchange = "updatesum()" })
#Html.ValidationMessageFor(x => x[i].ArchTotalScore)
</td>
</tr>
}
</table>
<p>
<input type="submit" value="Save" />
</p>
}
Can you please help sort this out ?
Many thanks in advance !!!

Your use of #Html.TextBox() where you give the input a name that has no relationship whatsoever to your model properties and means that you cannot bind to a collection when you submit.
For example you have a property string categorie which means that the name of the input would need to be name="[0].categorie, yet you create the input with name="archers[0].Categorie". Always use the strongly typed html helper (as you have done with ValidationMessageFor()
#Html.TextBoxFor(x => x[i].Categorie)
#Html.ValidationMessageFor(x => x[i].Categorie)
Side note: In your table headers it should be
<td>#Html.DisplayNameFor(m => m.Categorie)</td>
not #Html.LabelFor(). A <label> is a html accessibility element - clicking on it sets focus to the associated control, which in this case makes no sense since you have a table containing multiple controls for each property.

I got it and it works thanks :)
Nevertheless I still have a small question, I use the following (updatesum()) javascript to dynamically calculate in the field the sum of the archer's score in my view:
<td>
#Html.TextBox("suma["+#i+"]", Model[i].ArchScore1, new{ #onchange = "updatesum()"})
#Html.ValidationMessageFor(x => x[i].ArchScore1)
</td>
<td>>
#Html.TextBox("sumb["+#i+"]", Model[i].ArchScore2, new { #onchange = "updatesum()" })
#Html.ValidationMessageFor(x => x[i].ArchScore2)
</td>
<td>
#Html.TextBox("sumt["+#i+"]", Model[i].ArchTot`enter code here`alScore, new { #onchange = "updatesum()" })
#Html.TextBoxFor(x=>x[i].ArchTotalScore)
#Html.ValidationMessageFor(x => x[i].ArchTotalScore)
</td>
<script type="text/javascript">
function updatesum() {
for (i = 0; i < 15; i++) {
var sua = "suma_" + i + "_";
var sub = "sumb_" + i + "_";
var sut = "sumt_" + i + "_";
suma = document.getElementById(sua).value;
sumb = document.getElementById(sub).value;
sum = (suma - 0) + (sumb - 0);
document.getElementById(sut).value = sum;
}
}
</script>
Do you know if it is feasible to add the result of this javascript function into the TextBoxFor?

How to apply validation on multiple partial views using the same model properties

I am new to MVC..am developing a project of Employee Module there i need to save employee Education details (it includes SSLC,PUC,Graduation)so for that am using 3 partial views using same model..
Model is
public class EmployeeEducationDetailTable
{
public int EmployeeId { get; set; }
public int EmployeeEducationDetailId { get; set; }
[Required(ErrorMessage="Select qualification")]
public int EmployeeQualificationTypeId { get; set; }
[Required(ErrorMessage="Enter institute name")]
public string EmployeeInstituteName { get; set; }
[Required(ErrorMessage="Enter year of pass")]
[DataType(DataType.Date)]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
public DateTime? EmployeeYearOfPass { get; set; }
[Required(ErrorMessage="Enter percentage")]
public string EmployeePercentage { get; set; }
public List<EmployeeEducationDetailTable> employeeEducationList { get; set; }
public EmployeeEducationDetailTable()
{
employeeEducationList = new List<EmployeeEducationDetailTable>();
}
public IEnumerable<EmployeeMainTable> employee_MainTable { get; set; }
public ICollection<EmployeeQualificationTypeTable> employee_QualficationTypeTable { get; set; }
// public IEnumerable<EmployeeQualificationTypeTable> employee_QualficationTypeTable { get; set; }
}
public class EducationSectionDetails
{
public EmployeeEducationDetailTable SSLC { get; set; }
public EmployeeEducationDetailTable PUC { get; set; }
}
In My View
#model Employee.DAL.ModelClasses.EducationSectionDetails
#using (Html.BeginForm("CreateEmployeeEducationDetails","Employee",FormMethod.Post))
{
#Html.ValidationSummary(true)
<h3>SSLC</h3>
#Html.Partial("_Emp_Education",Model.SSLC,new ViewDataDictionary()
{
TemplateInfo = new TemplateInfo()
{ HtmlFieldPrefix = "SSLC" } })
<h3>PUC</h3>
#Html.Partial("_Emp_Education",Model.PUC,new ViewDataDictionary()
{ TemplateInfo = new TemplateInfo()
{ HtmlFieldPrefix = "PUC" } })
<input type="submit" value="Submit" />
}
_Emp_Education Partial View
<table>
<tr>
<td>
<div class="editor-label">
#Html.LabelFor(model => model.EmployeeQualificationTypeId,"Qualification")
</div>
</td>
<td>
<div class="editor-field">
#Html.DropDownListFor(model => model.EmployeeQualificationTypeId,ViewBag.QualificationTypeId as IEnumerable<SelectListItem>,"--Select--")
#Html.ValidationMessageFor(model => model.EmployeeQualificationTypeId)
</div>
</td>
</tr>
<tr>
<td>
<div class="editor-label">
#Html.LabelFor(model => model.EmployeeInstituteName,"University/Institute")
</div>
</td>
<td>
<div class="editor-field">
#Html.EditorFor(model => model.EmployeeInstituteName)
#Html.ValidationMessageFor(model => model.EmployeeInstituteName)
</div>
</td>
</tr>
<tr>
<td>
<div class="editor-label">
#Html.LabelFor(model => model.EmployeeYearOfPass,"Year Of Pass")
</div>
</td>
<td>
<div class="editor-field">
#Html.EditorFor(model => model.EmployeeYearOfPass)
#Html.ValidationMessageFor(model => model.EmployeeYearOfPass)
</div>
</td>
</tr>
<tr>
<td>
<div class="editor-label">
#Html.LabelFor(model => model.EmployeePercentage,"Percentage/Grade")
</div>
</td>
<td>
<div class="editor-field">
#Html.EditorFor(model => model.EmployeePercentage)
#Html.ValidationMessageFor(model => model.EmployeePercentage)
</div>
</td>
</tr>
</table>
In Controller
public ActionResult CreateEmployeeEducationDetails()
{
EducationSectionDetails e = new EducationSectionDetails();
e.SSLC = new EmployeeEducationDetailTable();
e.PUC = new EmployeeEducationDetailTable();
return View(e);
}
[HttpPost]
public ActionResult CreateEmployeeEducationDetails(EducationSectionDetails tbl)
{
//Code
}
it is Successfully posting the data of SSLC,PUC but problem is Validation need to perform on section wise with one Submit button.Sometimes sections are optional user may or may not enter the data of perticular section.In this case How to handle Validation?