Weird input name generated by CheckBoxFor - asp.net-mvc

The issue is that for some bizarre reason, when I use CheckBoxFor I get a checkbox but the ID has "CS___8__locals1" in it. No idea where this comes from or why it's happening.
Any ideas? See below:
<input class="checkbox" id="ProductPlans_0__CS___8__locals1_plans_4__IsSelected" name="ProductPlans[0].CS$<>8__locals1.plans[4].IsSelected" type="checkbox" value="true" />
My model is a single object (it is in reality part of a collection of objects but that should not matter. Here is my editor template (leaving out the #model declaration):
<tr>
<td>
<label class="checkbox">
#Html.CheckBoxFor(x => Model.IsSelected, new { #class = "checkbox" })
<strong>#Model.MarketingLabel</strong>
#Html.Raw(#Model.DisplayName)
</label>
</td>
<td>
<span data-planid="#Model.Id">#Model.Premium.ToString("C")</span>
</td>
<td>
Explain
</td>
#Html.HiddenFor(x => Model.Id)
</tr>

I know this is and old post but maybe will help someone else out there.
So, in my case I had this same problem and the problem was solved after a few try and error and we discover that the error was in itself the for loop.
Our model was something like this:
for (int i = 0; i < PatiosCobro.Count; i++)
{
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="input-group input-group">
<div class="form-line">
#Html.TextBoxFor(model => PatiosCobro[i].Valor, new { htmlAttributes = new { #class = "form-control" } })
</div>
#Html.HiddenFor(model => PatiosCobro[i].CobroId)
#Html.NameFor(model => PatiosCobro[i].Valor)
</div>
</div>
}
This will throw "CS___8__locals1_ETC"
What worked for us was taking out the local variable i and declaring it out in other place.
by example:
int i = 0;
for (i = 0; i < PatiosCobro.Count; i++)
{
<div class="col-md-4 col-sm-4 col-xs-12">
<div class="input-group input-group">
<div class="form-line">
#Html.TextBoxFor(model => PatiosCobro[i].Valor, new { htmlAttributes = new { #class = "form-control" } })
</div>
#Html.HiddenFor(model => PatiosCobro[i].CobroId)
#Html.NameFor(model => PatiosCobro[i].Valor)
</div>
</div>
}

Related

ASP.NET RAZOR - How to Bind razor checkBox on custom Boostrap 4 Checkbox Switch

How would I put the codes generated by the razor on this switch?
It would work like the ckeckbox
Image Discription
An here is the link how its work:
https://bootsnipp.com/snippets/GaxR2
<div class="card" style="margin:50px 0">
<div class="card-header">Checkbox to Switch</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
Bootstrap Switch Success
<label class="switch ">
<input type="checkbox" class="success">
<span class="slider"></span>
</label>
</li>
</ul>
</div>
Razor Code
<div class="form-group">
#Html.LabelFor(model => model.ExibirInfoPosicionamento, htmlAttributes: new { #class = "control-label " })
<div class="col-md-10">
#Html.CheckBoxFor(model => model.ExibirInfoPosicionamento, new { })
</div>
</div>
Little late but I had some frustration with this too, got it working like this (Bootstrap 4.3.1)
Razor on my page --
<div class="col-lg-1">
#Html.EditorFor(m => Model.YN,"toggle", new { #id = "yn1 })
</div>
Editor Template 'toggle'
#model System.Boolean
<div class="custom-control custom-switch">
#Html.CheckBoxFor(m => m,
new { #class = "custom-control-input" })
#Html.LabelFor(m => m, new { #class = "custom-control-label" })
</div>

How to set first checkbox checked in mvc

Here i want to set the first checkbox checked.I am not understanding how,since its in a viewbag.
<div class="form-group">
#Html.LabelFor(m => m.RBO_Location, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#foreach (var item in (SelectList)ViewBag.Branches)
{
<div>
<input type="checkbox" name="selectedBranches" value="#item.Value" class="checkbox-inline" />
#Html.Label(item.Text, new { #class = "control-label" })
</div>
}
</div>
</div>
How to set first checkbox checked in mvc
This can be done using Jquery at Document.Ready.
$("input[type=checkbox][name=selectedBranches]:first").attr('checked','checked');

MVC 5 - Information in partial view is null after submit

I have a large form and it's becoming too big so I want to start using partial view to keep it cleaner.
Here is a little part of the form that shows the main contact and a list of alternative contacts. The user can add more contacts (the buttons shows a popup to insert new contact) and the user can change the contact from active to inactive (through the checkbox on the table). Right now this is working but like i said i want to be able to use a partial view for the table.
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Contacts</h3>
</div>
<div class="box-body">
<div class="form-group">
<div class="col-xs-4">
<label>Phone:</label>
#Html.EditorFor(model => model.Persons.Phone, new { htmlAttributes = new { #class = "form-control", #id = "phone" } })
#Html.ValidationMessageFor(model => model.Persons.Phone, "", new { #class = "text-danger" })
</div>
<div class="col-xs-8">
<label>Email:</label>
#Html.EditorFor(model => model.Persons.Email, new { htmlAttributes = new { #id = "email", #class = "form-control", #placeholder = "Introduza o email..." } })
#Html.ValidationMessageFor(model => model.Persons.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<label>Address:</label>
#Html.TextAreaFor(model => model.Persons.Address, new { #class = "form-control", #placeholder = "Introduza a morada...", #rows = 3 })
#Html.ValidationMessageFor(model => model.Persons.Address, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
#if (Model.Contacts != null && Model.Contacts.Count > 0)
{
<table id="example2" class="table table-bordered table-hover dataTable" aria-describedby="example2_info">
<thead>
<tr role="row">
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending">Contact</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Contact Type</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Active</th>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
#{
string cssClass = string.Empty;
string activo = string.Empty;
}
#for (var i = 0; i < Model.Contacts.Count; i++)
{
cssClass = i % 2 == 0 ? "even" : "odd";
<tr class="´#cssClass">
<td class=" ">#Html.DisplayFor(model => Model.Contacts[i].Contact)</td>
<td class=" ">#Html.DisplayFor(model => Model.Contacts[i].contacttypes.Name)</td>
<td class=" ">#Html.CheckBoxFor(model => Model.Contacts[i].IsActive, new { #class = "flat-green" })</td>
</tr>
#Html.HiddenFor(model => Model.Contacts[i].ContactsId)
}
</tbody>
</table>
}
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input type="button" value="Add New Contact" class="buttonCreate btn btn-primary btn-sm" />
</div>
</div>
</div>
So here is the same HTML using the partial view
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Contacts</h3>
</div>
<div class="box-body">
<div class="form-group">
<div class="col-xs-4">
<label>Phone:</label>
#Html.EditorFor(model => model.Persons.Phone, new { htmlAttributes = new { #class = "form-control", #id = "phone" } })
#Html.ValidationMessageFor(model => model.Persons.Phone, "", new { #class = "text-danger" })
</div>
<div class="col-xs-8">
<label>Email:</label>
#Html.EditorFor(model => model.Persons.Email, new { htmlAttributes = new { #id = "email", #class = "form-control", #placeholder = "Introduza o email..." } })
#Html.ValidationMessageFor(model => model.Persons.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<label>Address:</label>
#Html.TextAreaFor(model => model.Persons.Address, new { #class = "form-control", #placeholder = "Introduza a morada...", #rows = 3 })
#Html.ValidationMessageFor(model => model.Persons.Address, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
#Html.Partial("ContactListControl", Model.Contacts)
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input type="button" value="Add New Contact" class="buttonCreate btn btn-primary btn-sm" />
</div>
</div>
</div>
and here is the Partial view:
#model List<RecruitmentWeb.Models.contacts>
<table id="example2" class="table table-bordered table-hover dataTable" aria-describedby="example2_info">
<thead>
<tr role="row">
<th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-sort="ascending">Contato</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Tipo de Contato</th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Activo</th>
</thead>
<tbody role="alert" aria-live="polite" aria-relevant="all">
#{
string cssClass = string.Empty;
string activo = string.Empty;
}
#for (var i = 0; i < Model.Count; i++)
{
cssClass = i % 2 == 0 ? "even" : "odd";
<tr class="´#cssClass">
<td class=" ">#Html.DisplayFor(model => Model[i].Contact)</td>
<td class=" ">#Html.DisplayFor(model => Model[i].contacttypes.Name)</td>
<td class=" ">#Html.CheckBoxFor(model => Model[i].IsActive, new { #class = "flat-green" })</td>
</tr>
#Html.HiddenFor(model => Model[i].ContactsId)
}
</tbody>
The Problem
If the user changes a contact from active to inactive or vice-versa, when I submit the form the changes don't go through. In fact, the list is null and contains no information. It works if i don't use partial view.
So what I'm I missing?
You passing only a property of your model to the partial so the the hidden inputs you are generating have the name attribute name="[0].ContactsId", name="[1].ContactsId" etc. whereas they needs to be name="Contacts[0].ContactsId", name="Contacts[1].ContactsId" etc (ditto for the checkboxes).
Change the partial view model to the same as the main view (you haven't indicated what it is), and then pass the model as
#Html.Partial("ContactListControl", Model)
and adjust the Html helpers to suit. However I would recommend you consider using a custom EditorTemplate for RecruitmentWeb.Models.Contacts rather than a partial view for this.

Pass IEnumerable<SomeModel> and SomeModel to View

I'm using:
#model IEnumerable<SomeModel1>
in my view. I cannot change that because multiple controllers in our application are returning some variable with the type:
List<SomeModel1>
I also need to pass the same model (SomeModel1) without the IEnumerable for a modal window:
#model WebApplication8.Models.ManageUserViewModel
Is there a way that I can achieve that without putting the models into a parent model?
UPDATE:
View Page:
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th class="text-center">
Active
</th>
<th class="text-center">
Email Address
</th>
<th class="text-center">
First name
</th>
<th class="text-center">
Last Name
</th>
<th class="text-center">
Company
</th>
<th class="text-center">
permissions
</th>
<th class="text-center">
Machine<p>Limit</p>
</th>
<th class="text-center">
Machines<p>Consumed</p>
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td style="display:none" >#Html.DisplayFor(model => item.UserId)</td>
<td align="center">
<div class="btn-group btn-toggle">
#if (item.ActiveUser)
{
<button class="btn btn-sm btn-success active">ON</button>
<button class="btn btn-sm btn" onclick="DeActivateUser('#item.UserId')">OFF</button>
}
else
{
<button class="btn btn-sm btn" onclick="ActivateUser('#item.UserId')">ON</button>
<button class="btn btn-sm btn-success active">OFF</button>
}
</div>
</td>
<td>#Html.DisplayFor(model => item.EmailAddress)</td>
<td>#Html.DisplayFor(model => item.FirstName)</td>
<td>#Html.DisplayFor(model => item.LastName)</td>
<td>#Html.DisplayFor(model => item.Company)</td>
<td>
#Html.DisplayFor(model => item.UserPermission)
<b class="dropdown-menu"></b>
<ul class="dropdown-menu">
<li><a onclick="ChangePermission('#item.UserId', '3')">View Only</a></li>
<li><a onclick="ChangePermission('#item.UserId', '4')">View - Print</a></li>
<li><a onclick="ChangePermission('#item.UserId', '5')">View - One Print</a></li>
<li><a onclick="ChangePermission('#item.UserId', '6')">Expire by Use - 5 Opens</a></li>
<li><a onclick="ChangePermission('#item.UserId', '7')">Expire After 5 Days</a></li>
</ul>
</td>
<td align="center">#Html.DisplayFor(model => item.MachineLimit)</td>
<td align="center">#Html.DisplayFor(model => item.MachineCount)</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
<section id="addUser">
#using (Html.BeginForm("Manage", "Account", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<h2>Add Authorized User(s): </h2>
<hr style="height:7pt;" />
<!-- <hr style="height:0pt; visibility:hidden;" /> -->
<button class="btn btn-default btn-success btn-lg" data-target="#modalId" data-toggle="modal" type="button">
<span class="glyphicon glyphicon-plus"></span> ADD NEW USER
</button>
<div class="modal fade" id="modalId" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add Authorized User(s)</h4>
</div>
<div class="modal-body">
#Html.ValidationSummary()
<!-- <div class="col-md-4"> -->
<div class="form-group">
#Html.LabelFor(m => m. ().FirstName, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.FirstOrDefault().FirstName, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.FirstOrDefault().LastName, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.FirstOrDefault().LastName, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.FirstOrDefault().EmailAddress, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.FirstOrDefault().EmailAddress, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.FirstOrDefault().Company, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.TextBoxFor(m => m.FirstOrDefault().Company, new { #class = "form-control" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.FirstOrDefault().UserPermission, new { #class = "col-md-2 control-label" })
<div class="col-md-3 control-label">
#Html.DropDownListFor(m => m.FirstOrDefault().UserPermission, new SelectList(new List<Object>
{
new { value = "2" , text = "View Only"},
new { value = "3" , text = "View - Print" },
new { value = "4" , text = "View - One Print" },
new { value = "5" , text = "Expire by 5 Use" },
new { value = "6" , text = "Expire by 5 Date" }
},
"value", "text", "ViewOnly"))
</div>
#Html.LabelFor(m => m.FirstOrDefault().MachineLimit, new { #class = "col-md-2 control-label" })
<div class="col-md-2 control-label">
#Html.DropDownListFor(m => m.FirstOrDefault().MachineLimit, new SelectList(new List<Object>
{
new { value = "1" , text = "1"},
new { value = "2" , text = "2" },
new { value = "3" , text = "3" },
new { value = "4" , text = "4" },
new { value = "5" , text = "5" }
},
"value", "text", 1))
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-3 col-md-10 control-label">
<input type="submit" class="btn btn-default" value="Select/Add" name="Action:Insert" />
</div>
</div>
</div>
</div>
</div>
}
</section>
Passing multiple types into a single view is not really recommended and probably means you are misusing the view in some way. You have 3 options:
Distinct Views
Change what you are doing and make a view for each type.
dynamic Type
Use dynamic as your model type, but this means your view code is littered with if statements - not a good design.
Wrap in a List
Wrap the SomeModel object in a List like this:
SomeModel myModel;
return View(new List<SomeModel> { myModel };
In the case where you have to use SomeModel1,
you can use #Model.firstordefault().{class properties} by keeping IEnumerable declaration above.
Use ViewBag.
// controller
ViewBag.SomeModel = someModel;
// view
#ViewBag.SomeModel.SomeProperty

ReCaptcha MVC razor Validation Message not getting triggered

I am fairly new to MVC and a little stumped on this one.
I implemented ReCaptcha last night in my Umbraco MVC 4 application (6.1.6).
ReCaptcha works, the controller gets the correct captcha valid state and all is good. The problem is when the captcha is incorrect, I set the ModelState.AddModelError(string, string) and return the model in order to show that the captcha entered as incorrect, but the view never triggers the Html.ValidateMessage("captcha-error") to show the actual error message updated in the ModelState.
Any help or advice would be appreciated
Controller:
[HttpPost]
[RecaptchaControlMvc.CaptchaValidator]
public ActionResult SubmitContactFormAction(Models.ContactFormModel model, bool captchaValid, string captchaErrorMessage)
{
if (!captchaValid)
{
ModelState.AddModelError("captcha-error", captchaErrorMessage);
return View(model);
}
else
{
// Test ModelState and do stuff
}
}
View:
#model WebStaging.Models.ContactFormModel
#using Recaptcha
#using (Ajax.BeginForm("SubmitContactFormAction", "ContactForm", null, new AjaxOptions { HttpMethod = "POST" }, new { #id = "frmContactForm" }))
{
#Html.ValidationSummary(true)
<div>
Fields marked with * are required<br/><br />
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Name) *
</div>
<div class="input-column">
#Html.TextBoxFor(model => model.Name, new { #class = "input-242" })<br />
#Html.ValidationMessageFor(model => model.Name)
</div>
</div>
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Email) *
</div>
<div class="input-column">
#Html.TextBoxFor(model => model.Email, new { #class = "input-242" })
</div>
</div>
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Phone)
</div>
<div class="input-column">
#Html.TextBoxFor(model => model.Phone, new { #class = "input-242" })
</div>
</div>
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Subject) *
</div>
<div class="input-column">
#Html.TextBoxFor(model => model.Subject, new { #class = "input-242" })
</div>
</div>
<div class="clear pad-5">
<div class="label-column">
#Html.LabelFor(model => model.Message) *
</div>
<div class="input-column">
#Html.TextAreaFor(model => model.Message, new { #class = "input-textarea" })
</div>
</div>
<br />
<div id="captcha-panel" class="clear" style="text-align: right; float: right; padding-top: 5px;">
#Html.Raw(Html.GenerateCaptcha("captcha", "white"))
</div>
<p>
<div id="captcha-result" class="clear">
#Html.ValidationMessage("captcha-error")
</div>
<div class="clear pad-5" style="float: right; text-align: center;">
<button type="submit">Send</button><br />
<div id="submit-status" style="color: Green;"></div>
</div>
</div>
I think problem is caused because ReCaptcha is not a simple web control. I think you can easy walk around problem changing your "captcha-result" div with new class or style attribute.
<div id="captcha-result" class="someClassWithRedBigFont" >
#Html.ValidationMessage("captcha-error")
</div>
If you using jQuery you can check jQuery Validate plugin.

Resources