I'm using an editor template in my ASP.net MVC project. The editor template consists of a hidden field, a check box, a label, and a text box.
Here is the editor template:
#model Models.Domain.myObject
<p>
#Html.HiddenFor(x => x.Id)
#Html.DisplayFor(x => x.Name)
#Html.CheckBoxFor(x => x.Selected)
#Html.TextBoxFor(x => x.DefaultCount, new { disabled = "disabled"})
</p>
Here is what I have in my view that uses this template:
#Html.EditorFor(model => model.myObject)
Sometimes it is possible that I have 3 myObjects and sometimes I have 10. MVC does a nice job of setting all of these up for me with one exception.
I want the Names to all align right with each other and I want the check boxes to align left with each other for appearance purposes.
How can I do this?
Right now I'm getting something like this:
displaydisplay checkbox textbox
display checkbox textbox
displaydisplaydisplay checkbox text box
What I'm trying to get is (Hopefully you can see the alignment):
displaydisplay checkbox textbox
display checkbox textbox
displaydisplaydisplay checkbox textbox
Well the solution is based on html/css.
You can use "div" or "table".
Example using the table option:
VIEW "MOTHER"
<table>
#Html.EditorFor(model => model.myObject)
</table>
VIEW "Child"
<tr>
<td style="width: 200px; text-align: right;">
#Html.HiddenFor(x => x.Id)
#Html.DisplayFor(x => x.Name)
</td>
<td>
#Html.CheckBoxFor(x => x.Selected)
#Html.TextBoxFor(x => x.DefaultCount, new { disabled = "disabled"})
</td>
</tr>
Note: as I said, you can use Divs to do the same visual efect and you can add "css classes" in order to have a cleaner code.
Related
I'm using Kendo Grid with several columns which are used for overview row data. When users click Add/Edit buttons, the popup will be shown with some additional data which includes some checkboxes.
I have a problem when binding the checkboxes with the current MVVM model because, when adding a new row, Kendo treats the model as a variable, not an array. This causes many checkboxes to be checked when one is checked(clicked). After taking a look at Kendo MVVM, I intended to get the MVVM model of current popup in order to manipulate some data but was not successful. Therefore I would look for the help in:
Getting the current MVVM model of the popup (So that I can edit the model)
Any recommendation in binding many checkboxes when clicking the Add button(there is no initial data).
you need to write a template for this
then write this to the grid
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("myTemplate"))
this is a sample template:
#model teknik.Models.Magaza_Viewmodel
#Html.HiddenFor(model => model.ID)
<div class="editor-label">
#Html.LabelFor(model => model.ADI)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ADI)
#Html.ValidationMessageFor(model => model.ADI)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ADRES)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ADRES)
#Html.ValidationMessageFor(model => model.ADRES)
</div>
I have a view which displays a list of items (as below). I would like to use the KendoUI window as a popup editor, which would appear after the user clicks on a button or link. I already have a partial view which would be the content of the button. So if I could somehow inject this in.
#foreach (var item in Model) {
<tr>
<td>
<div></div>
<input type="button" id="btnReject" value="Edit" onclick="ConfirmReject(item.id);" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Title)
</td>
</tr>
}
Use delegate event attached to the table with filter set to 'tr' element (more info here). And open the window programatically by specifying its content. To create the content easily you can templates.
This is the HTML I'm working with:
<div class="pbSubsection">
<table class="detailList" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="labelCol">
<label for="00Ni0000003bw8O">Becomes Asset</label>
</td>
<td class="dataCol col02">
<input id="00Ni0000003bw8O" type="checkbox" value="1" tabindex="8" name="00Ni0000003bw8O" checked="checked">
</td>
I need to select the checkbox.
I cannot use the ID because I'm doing this across multiple orgs, and the ID is different in every org. Is there a way I can select by the label text or by the tabindex?
It is probably safer to get the checkbox by the label text rather than the tabindex.
Solution 1 - :label locator:
If you are using watir-webdriver, it possible to locate an element directly based on its label text - via the :label locator. You can do the following:
#Exact match of label text:
b.checkbox(:label => 'Becomes Asset').set
#Partial match of label text using regex:
b.checkbox(:label => /Asset/).set
Note that this assumes that the 'for' attribute of the label matches the 'id' attribute of the input element.
Solution 2 - Matching label to input:
For a solution that works in watir-classic (as well as watir-webdriver), you can:
Get the label element by text
Get the for attribute of the label element
Get the associated checkbox by its id, which matches the label element's for attribute
The following will work for your page to clear the checkbox:
label = browser.label(:text => 'Becomes Asset')
browser.checkbox(:id => label.for).set
To select the checkbox based on the tabindex, using a :css or :xpath locater should do the trick:
b.checkbox(:xpath => "//input[#tabindex='8']").set
b.checkbox(:css => 'input[tabindex="8"]').set
I have created an extension using formbuilder. Now I have used it in my view.
My view looks like:
#using (Html.BeginForm("addDataInd", "CustInformations", FormMethod.Post))
{
<fieldset class="field">
<legend>Addresses</legend>
<table>
<tr>
#Html.EditorFor(model => model.addresses)
</tr>
</table>
</fieldset>
}
where
#Html.EditorFor(model=>model.addresses)
calls my EditorTemplate which looks like:
<td>
#Html.hSearch("txtSearch", "", "lblsrch", "Search Text: ", "Search", "Fetch", "LookUp", new { script = "Select Aid, FullAreaName from fGetAreaTB()" }, null)
</td>
When i run the program the page looks like
i used fire bug to know the error. All I found was that, the code generated for the first
upper image (i.e. for permanent address) it doesn't create a form, but for other two it creates a form. So when I click the first search button, it doesn't work but when i click the second and third button it works well.
I just want when i run the program all the button must be in form.
You cannot nest HTML forms. For this reason you will have to use multiple forms and put them inside the template. Like this:
<fieldset class="field">
<legend>Addresses</legend>
<table>
<tr>
#Html.EditorFor(model => model.addresses)
</tr>
</table>
</fieldset>
and inside the editor template:
#model Address
<td>
#using (Html.BeginForm("addDataInd", "CustInformations", FormMethod.Post))
{
#Html.hSearch("txtSearch", "", "lblsrch", "Search Text: ", "Search", "Fetch", "LookUp", new { script = "Select Aid, FullAreaName from fGetAreaTB()" }, null)
}
</td>
IEnumerable<Addresses> AddressSet1=myServices.GetAddresses(LocationId1);
IEnumerable<Addresses> AddressSet2=myServices.GetAddresses(LocationId2);
I want to combine the above two AddressSets
I tried IEnumerable<Addresses> AllAddresses=AddressSet1.Concat(AddressSet2)
But after this when I try to access items from IEnumerable AllAddresses by on my razor view
#if(!myHelper.IsNullorEmpty(model.AllAddresses )
{
#Html.EditorFor(model => model.AllAddresses )
}
and I am getting errors -- Illegal characters in path .Any suggestions to identify cause of this error ?
If I am trying to run my page with out the Concat I am able see the records in AddressSet1 /AddressSet2 displayed on the page .But when I try to combine the two to form I Enumerable AllAddresses ,it is throwing errors please help
pasted below is my Editor Template
#model MyServiceRole.Models.Addresses
#{
ViewBag.Title = "All addresses Items";
}
<table>
<tr>
<td>
<span>Index</span>
</td>
<td>
</tr>
<tr>
<td>Address XID</td>
<td>
#Html.EditorFor(model => model.AddressID)
</td>
</tr>
<tr>
<td>Title</td>
<td>
#Html.EditorFor(model => model.Title)
</td>
</tr>
<tr>
<td>Description</td>
<td>
#Html.EditorFor(model => model.Description)
</td>
</tr>
<tr>
<td>Image URL</td>
<td>
#Html.EditorFor(model => model.Photo.URL)
</td>
</tr>
</table>
I tested your issue and ran into the same problem.
List<string> a = new List<string>{ "a" };
List<string> b = new List<string>{ "b" };
IEnumerable<string> concat = a.Concat<string>(b);
foreach(string s in concat) { } // this works
return View(concat);
In view:
#model IEnumerable<string>
#foreach(string s in Model) //This blows up
{
}
#Html.EditorFor(m => Model) //Also blows up
It looks like you honestly can't use templates with or enumerate over the
System.Linq.Enumerable.ConcatIterator<T>
class that Concat creates within a View. This seems like a bug.
Anyway adding .ToList() fixes your issue.
return View(concat.ToList());
If you want to use editor templates why are you writing foreach loops? You don't need this loop at all. Simply write the following and get rid of the foreach:
#Html.EditorFor(x => x.AllAddresses)
and then you will obviously have a corresponding editor template that ASP.NET MVC will automatically render for each element of the AllAddresses collection so that you don't need to write any foreach loops in your view (~/Views/Shared/EditorTemplates/Address.cshtml):
#model Address
...