I have a view with three textboxes and a CheckBox:
#foreach( var item in Model )
{
<tr>
<td>
#Html.CheckBox("name")
</td>
<td>
#Html.EditorFor(m => item.Toolbox)
</td>
<td>
#Html.EditorFor(m => item.Name)
</td>
<td>
#Html.EditorFor(m => item.Link)
</td>
</tr>
}
And how i can create JS code to bind this checkboxes to diffirent textboxes? This "name" check box should disable/enable three textboxes for every time loop creates it. There are 500+ items in Model.
You may set counter and create unique class or some attribute for each block. For example:
<table id="myTable">
#{
int c = 0;
for(int i = 0; i < Model.Count; i++)
{
c++;
<tr class="#("block"+c)">
<td>
#Html.CheckBox("name", new {data_block=c})
</td>
<td>
#Html.EditorFor(m => item.Toolbox)
</td>
<td>
#Html.EditorFor(m => item.Name)
</td>
<td>
#Html.EditorFor(m => item.Link)
</td>
</tr>
}
</table>
and then javascript code:
$(function(){
$('#myTable checkboxes').click(function(){
var checkbox = $(this),
blockNum = checkbox.data('block'),
inputs = $('tr.block'+blockNum),
state = checkbox.is(':checked');
$.each( inputs, function( i, el ){
$(el).prop("disabled", state);
});
});
});
Another way
<table id="myTable">
#foreach( var item in Model )
{
<tr>
<td>
#Html.CheckBox("name", new { #class = "nameCheckbox" })
</td>
<td>
#Html.TextBoxFor(m => item.Toolbox, new { #class = "someCleverClassName" })
</td>
<td>
#Html.TextBoxFor(m => item.Name, new { #class="someCleverClassName" })
</td>
<td>
#Html.TextBoxFor(m => item.Link, new { #class="someCleverClassName" })
</td>
</tr>
}
</table>
And the javascript
$(function(){
$('#myTable .nameCheckbox').click(function(){
$(this).closest('tr').find('.someCleverClassName').prop("disabled", $(this).prop('checked'));
});
});
Related
I have the following code in razor:
#for (int i = 0; i < Model.Count; i++)
{
using (Html.BeginForm("Bonnen", "Bon"))
{
<tr>
<td> #Html.TextBoxFor(model => Model[i].Id)</td>
<td>#Html.DisplayFor(model => Model[i].Date)</td>
<td>#Html.DisplayFor(model => Model[i].Description)</td>
<td><button type="submit" value="Details" class="btn btn-info">Details</button></td>
</tr>
}
}
When i post the data to the controller it becomes empty.
I've already seen a question where it said you can't use a foreach loop here.
On the website itself it does show all the data, but it won't give it to the controller.
Controller:
[HttpPost]
public ActionResult Bonnen(Bon bon)
{
return RedirectToAction("Details", "Bon", bon);
}
Model:
public int Id { get; set; }
public string Description { get; set; }
public DateTime Date { get; set; }
Your code needs to be inside the form and button type "submit" wont work. You need to use input type "submit". See code below:
#using (Html.BeginForm("Bonnen", "Bon"))
{
#for (int i = 0; i < Model.Count; i++)
{
<tr>
<td> #Html.TextBoxFor(model => Model[i].Id)</td>
<td>#Html.DisplayFor(model => Model[i].Date)</td>
<td>#Html.DisplayFor(model => Model[i].Description)</td>
<td><input type="submit" value="Details" class="btn btn-info"/></td>
</tr>
}
}
#using (Html.BeginForm("Bonnen", "Bon",FormMethod.Post))
{
#foreach (var item in Model)
{
<tr>
<td> #Html.TextBoxFor(model => item.Id)</td>
<td>#Html.DisplayFor(model => item.Date)</td>
<td>#Html.DisplayFor(model => item.Description)</td>
</tr>
}
<input type="submit" value="Details" class="btn btn-info"/>
}
[HttpPost]
public ActionResult Bonnen(int[] Id ,DateTime[] Date,string[] Description)
{
return RedirectToAction("Details", "Bon", bon);
}
Try the following code
#for (int i = 0; i < Model.Count; i++)
{
using (Html.BeginForm("Bonnen", "Bon"))
{
<tr>
<td> #Html.TextBox("Id", Model[i].Id)</td>
<td>#Html.Display("Date", Model[i].Date)</td>
<td>#Html.Display("Description", Model[i].Description)</td>
<td><button type="submit" value="Details" class="btn btn-info">Details</button></td>
</tr>
}
}
If you want the values of Date and Description too in controller then change them from Display to Editor.
managed to solve it with a foreach loop.
#using (Html.BeginForm())
{
<h2>Bon</h2>
<input class="form-control" id="myInput" type="text" placeholder="Zoek..." />
<br />
<table style="width: 100%">
<thead>
<tr>
<th>Id</th>
<th>Datum</th>
<th>Boodschappen</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Id)
</td>
<td>
#Html.DisplayFor(modelItem => item.Date)
</td>
<td>
#Html.DisplayFor(modelItem => item.Description)
</td>
<td>
#using (Html.BeginForm("Bon", "Bon", FormMethod.Post))
{
#Html.AntiForgeryToken()
#Html.ActionLink("Details", "Details", "Bon", new { id = item.Id }, null)
}
</td>
</tr>
}
</tbody>
</table>
}
I am using Jquery Datatable in asp.net MVC. I bind the sql query in datatable and the datatable i am using one Editfor, here i am using datetime picker. i attached my code on below. please help me.
<table id="datatable" class="display" border="1" cellpadding="2" cellspacing="2">
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.RMAKey)
</td>
<td>
#Html.DisplayFor(modelItem => item.SalesPerson)
</td>
<td>
#Html.DisplayFor(modelItem => item.SalesRep)
</td>
<td>
#Html.DisplayFor(modelItem => item.Datecreated)
</td>
<td>
#Html.EditorFor(model => model.First().FollowupDate)
#Html.ValidationMessageFor(model => model.First().FollowupDate)
</td>
<td>
#Ajax.ActionLink("Followup", "FollowupUpdate", new { RMAKey = item.RMAKey, FollowupDate=item.FollowupDate }, new AjaxOptions { UpdateTargetId = "modal", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", OnSuccess = "onModalLoad" }, new { #class = "icon-secondary note" })
</td>
</tr>
}
</tbody>
</table>
The above code i am using #Html.EditorFor(model => model.First().FollowupDate). This is my problem occur here i get the date and send the date to partial view. How to generate the date dinamically?
I'm trying to display records in my view. I only want to display records that don't have a null value for the TABLE_NUMBER1 field. I've set this up, but am having a weird issue where it won't recognize the closing tag for the else, only the foreach and if. Specifically, if I add a closing tag for the else, it recognizes it as the closing tag for the entire razer section (aka it's gold).
#if (Model.Count() == 0)
{
<tbody>
<tr>
<td colspan="7">
No Records match search criteria
</td>
</tr>
</tbody>
}
else{
foreach (var item in Model)
{
var hiderows = #Html.DisplayFor(modelItem => item.TABLE_NUMBER1).ToString();
if (hiderows != null)
{
<tbody>
<tr>
<td>
<p class="one">#Html.DisplayFor(modelItem => item.PNTR_MAX)</p>
</td>
<td>
<p class="one">#Html.DisplayFor(modelItem => item.EFFECTIVE_DATE1)</p>
</td>
<td>
<p class="one">#Html.DisplayFor(modelItem => item.BANK_ROUTING_NUMBER)</p>
</td>
<td>
<p class="one">#Html.DisplayFor(modelItem => item.TAX_ID)</p>
</td>
<td>
<p class="one">#Html.DisplayFor(modelItem => item.BANK_NAME)</p>
</td>
<td>
<p class="one">#Html.DisplayFor(modelItem => item.COMPANY_NAME1)</p>
</td>
<td>
#Html.ActionLink("Edit", "..\\Table9\\Edit", new { id = item.EFTID })
#Html.ActionLink("Details", "..\\Table9\\Details", new { id = item.EFTID })
#Html.ActionLink("Delete", "..\\Table9\\Delete", new { id = item.EFTID })
</td>
</tr>
</tbody>
}
}
}
This is wrong:
var hiderows = #Html.DisplayFor(modelItem => item.TABLE_NUMBER1);
change it to :
#Html.DisplayFor(modelItem => item.TABLE_NUMBER1)
if (item.TABLE_NUMBER1!= null)
{
I'm trying to do something that seems to be a little bit tricky and since i'm a complete beginner in ASP.NET, JQuery and so on, i'm here to have some advices.
I've rceated a formular that is displayed that way :
The code looks like that :
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>
Room
</th>
<th>
Room name
</th>
<th>
User
</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model._listPerson.Count(); i++) {
<tr>
<td>
#Html.EditorFor(m => m._listPerson[i].myValue.isSelected)
</td>
<td>
#Html.DisplayFor(m => m._listPerson[i].myValue.name)
#Html.HiddenFor(m => m._listPerson[i].myValue.name)
#Html.HiddenFor(m => m._listPerson[i].myKey)
</td>
<td>
<!--Obtain the KeyValuePair<int, List<PersonModel>> that correspond to the index.-->
#Html.DropDownListFor(m => m.selectedPerson[i], new SelectList(Model._list[i].myValue, "id", "name"))
</td>
</tr>
}
</tbody>
</table>
<p>Assign all selected rooms to user #Html.DropDownListFor(m => m.useless, new SelectList(Model._list[0].myValue, "id", "name"))</p>
So the aim of what I want to do is to update all the fields "assigned user" to the name of the user that is selected at the bottom of the table. How to do that easily ?
Thanks !
Add a class to your DropDownLists in the loop like this:
#Html.DropDownListFor(m => m.selectedPerson[i], new SelectList(Model._list[i].myValue, "id", "name"), new { #class = "ddl" })
Then, add this script to your page:
<script type="text/javascript">
$(document).ready(function () {
$('#useless').change(function () {
var selected = $(this).val();
$(".ddl").val(selected);
});
});
</script>
It's ok now, thanks to ataravati. I had to change the solution a little bit. Here is the javascript :
<script type="text/javascript">
$(document).ready(function () {
$('#useless').change(function () {
var selected = $(this).val();
$(':checkbox').each(function () {
var tag = $(this).attr('id');
tag = tag.replace(/^select/, "");
tag = ".ddl" + tag;
console.log("tag : " + tag);
if ($(this).attr('checked'))
$(tag).val(selected);
});
});
});
</script>
And here is the new version of the code that display the page :
<tbody>
#for (int i = 0; i < Model._listPerson.Count(); i++) {
<tr>
<td>
#Html.CheckBoxFor(m => m._listPerson[i].myValue.isSelected, new { id = "select"+i })
</td>
<td>
#Html.DisplayFor(m => m._listPerson[i].myValue.name)
#Html.HiddenFor(m => m._listPerson[i].myValue.name)
#Html.HiddenFor(m => m._listPerson[i].myKey)
</td>
<td>
#Html.DropDownListFor(m => m.selectedPerson[i], new SelectList(Model._list[i].myValue, "id", "name"), new { #class = "ddl"+i })
</td>
</tr>
}
</tbody>
And now, it's working fine ! Thanks !
Here is my view code:
#model IEnumerable<StudentRegistrationPortal.Models.CourseRegisterModel>
#{
ViewBag.Title = "Welcome Student";
}
<h2>Welcome
#Context.User.Identity.Name
</h2>
#Html.ActionLink("[Sign Out]", "SignOut", "Student")
<ul>
<li>#Html.ActionLink("Register Courses", "registerCourses", "Course")</li>
</ul>
<%if (Model.Count == 5) { %>
<table border="1">
<tr>
<th>
RollNumber
</th>
<th>
Course Code
</th>
<th>
Course Name
</th>
<th>Add/Drop</th>
</tr>
<tr>
<td>
#Context.User.Identity.Name
</td>
<td>
#Html.DisplayFor(modelItem => Model.ElementAt(0).Course.Code)
</td>
<td>
#Html.DisplayFor(modelItem => Model.ElementAt(0).Course.Name)
</td>
<td>
#Html.ActionLink("Drop", "Drop", new { id=-1 })
</td>
</tr>
<tr>
<td>
#Context.User.Identity.Name
</td>
<td>
#Html.DisplayFor(modelItem => Model.ElementAt(1).Course.Code)
</td>
<td>
#Html.DisplayFor(modelItem => Model.ElementAt(1).Course.Name)
</td>
<td>
#Html.ActionLink("Drop", "Drop", new { id=-1 })
</td>
</tr>
<tr>
<td>
#Context.User.Identity.Name
</td>
<td>
#Html.DisplayFor(modelItem => Model.ElementAt(2).Course.Code)
</td>
<td>
#Html.DisplayFor(modelItem => Model.ElementAt(2).Course.Name)
</td>
<td>
#Html.ActionLink("Drop", "Drop", new { id=-1 })
</td>
</tr>
<tr>
<td>
#Context.User.Identity.Name
</td>
<td>
#Html.DisplayFor(modelItem => Model.ElementAt(3).Course.Code)
</td>
<td>
#Html.DisplayFor(modelItem => Model.ElementAt(3).Course.Name)
</td>
<td>
#Html.ActionLink("Drop", "Drop", new { id=-1 })
</td>
</tr>
<tr>
<td>
#Context.User.Identity.Name
</td>
<td>
#Html.DisplayFor(modelItem => Model.ElementAt(4).Course.Code)
</td>
<td>
#Html.DisplayFor(modelItem => Model.ElementAt(4).Course.Name)
</td>
<td>
#Html.ActionLink("Drop", "Drop", new { id=-1 })
</td>
</tr>
</table>
<% } %>
I have added IF condition to only draw table if model count is equals to 5 but still if model contains no data then it gives error that:
Index was out of range. Must be non-negative and less than the size of the collection.
Parameter name: index
What is wrong with IF condition?
Thanks.
your code will only work if you have exactly 5 CourseRegisterModel. This is your issue.
why don't you just iterate the model(s)
#foreach(StudentRegistrationPortal.Models.CourseRegisterModel modelValue in Model)
{
<tr>
<td>
#Context.User.Identity.Name
</td>
<td>
#Html.DisplayFor(modelItem => modelValue.Course.Code)
</td>
<td>
#Html.DisplayFor(modelItem => modelValue.Course.Name)
</td>
<td>
#Html.ActionLink("Drop", "Drop", new { id=-1 })
</td>
</tr>
}
if you really insist on doing this logic inside the view, then you can use operator precedence and check for the Model containing items. Without further addo, edit you line:
<%if (Model.Count == 5) { %>
to:
// check will only continue if Model.Any() evaluates to true
#if (Model.Any() && Model.Count == 5) { ... }
I would personally do this in my viewModel inside my service or controller class and really flesh out the logic required for this hardcoded Count == 5 existing. You aslo seem to be mixing razon and webforms syntax.
Why are you using <% syntax in if clause, change it to use #
#if (Model.Count == 5)
{
also at the end change <% } %> to following
}
If Model is Null then accessing to the count would be throw an exception. so before that you have to check that if the model is null or not.
#if(Mode != null && Mode.Count == 5)
{
//....