How did my ViewBag become populated with data? - kendo-grid

I'm working with a Kendo Grid that shows a modal when editing or adding a row. I'm seeking to modify the modal and add another dropdown list to it. The one thing I'm totally confused about at the moment is that the cshtml for the modal refers to the ViewBag to provide the source data for the dropdownlists, but I can't find anywhere in the entire solution where any code (anywhere) populates the ViewBag with the properties the modal uses.
Before I started modifying, the cshtml had:
#Html.Kendo().DropDownListFor(model => model.Status).BindTo(ViewBag.Statuses).DataTextField("Name").DataValueField("Value").OptionLabel("Please Select")
^^^^^^^^^^^^^^^^
The debugger says this is valid; the ViewBag does contain a .Statuses and it is loaded with data, but I've no idea how this thing came to be in the ViewBag. The only place the controller refers to the viewbag is in setting the .Title
Here's cshtml for the modal:
#model ModalModel
#Html.HiddenFor(model => model.Id)
<!-- this is the new one -->
<div class="editor-group">
<div class="editor-label">
#Html.LabelFor(model => model.ProjectId)
</div>
<div class="editor-field">
#Html.Kendo().DropDownListFor(model => model.ProjectId).BindTo(ViewBag.ProjectId_Data).OptionLabel("Please Select")
#Html.ValidationMessageFor(model => model.ProjectId)
</div>
</div>
<!-- existing one. Needs DataTextField and DataValueField because model.Statuses is not an IEnumerable<SelectListItem>, its a custom collection of c# enum name/value representation -->
<div class="editor-group">
<div class="editor-field">
#Html.Kendo().DropDownListFor(model => model.Status).BindTo(ViewBag.Statuses).DataTextField("Name").DataValueField("Value").OptionLabel("Please Select")
#Html.ValidationMessageFor(model => model.Status)
</div>
</div>
Here's a snip of the cshtml for the main grid and some periphery stuff:
#model GridModel
<h3>#ViewBag.Title</h3>
#{
var projectListItems = Model.Projects.Select(e => new SelectListItem { Value = e.Id.ToString(), Text = e.Name });
var activityListItems = Model.Activities.Select(e => new SelectListItem { Value = e.Id.ToString(), Text = e.PrivateName });
}
#(Html.Kendo().Grid<UsageModel>()
.Name("MainGrid")
.Columns(cfg =>
{
cfg.Bound(e => e.DateUsed).ClientTemplate("#= kendo.toString(DateUsed, \"d\") #");
cfg.ForeignKey(e => e.ProjectId, projectListItems, "Value", "Text").Title("Project name").Width(150);
cfg.ForeignKey(e => e.ActivityId, activityListItems, "Value", "Text").Title("Activity name").Width(150);
cfg.ForeignKey(e => e.Status, Model.Statuses, "Value", "Name");
cfg.Command(cmd => { cmd.Edit(); cmd.Destroy().HtmlAttributes(new { style = "visibility:hidden" }); }).Width(80);
})
.Pageable()
...
The 4 items in the ViewBag are:
ProjectId_Data (IEnumerable<SelectListItem>)
ActivityId_Data (IEnumerable<SelectListItem>)
Status_Data (IEnumerable<SelectListItem>)
Statuses (IEnumerable<a custom internal type used for expanding enums into name/value strings>)
Am I correct in assuming that Kendo added these things to the viewbag as part of the data binding process on the main grid? The rendering of the grid to page occurs before the processing of the modal..

Please give (IEnumerable) inside BindTo() for casting and try
#using Kendo.Mvc.UI
#using System.Collections
#Html.Kendo().DropDownListFor(model => model.Status).BindTo((IEnumerable)ViewBag.Statuses).DataTextField("Name").DataValueField("Value").OptionLabel("Please Select")

Related

MVC Razor field label gets overlapped when copy and paste

<div class="labelled-text-field">
#Html.LabelFor(x => x.Email)
#Html.TextBoxFor(x => x.Email)
#Html.ValidationMessageFor(x => x.Email)
</div>
When using right click -> paste label gets overlapped with the pasted email:
When typing or using Ctrl+v (paste) work well:
I dont know if using a razor oncopy event is the way to fix this:
#Html.TextBoxFor(x => x.Email,
new {
#class = "input_box",
id = "txtDays",
onpaste=""
}
)
Try the placeholder attribute. It will clear the watermark when you paste the text.
<div class="labelled-text-field">
#Html.LabelFor(x => x.Email)
#Html.TextBoxFor(x => x.Email, new {placeholder="Your Email" })
#Html.ValidationMessageFor(x => x.Email)
</div>

Generating SelectList with default selected item in MVC

I'm trying to generate a selectList with a default selected item in MVC. I assign a selectlist to the viewbag and try to render it in my view and keep getting the below error.
Does anyone know what I might be doing wrong?
Create the list in my controller:
ViewBag.MasterAccountSelect = new SelectList(masterAccountsList, "MasterAccount", "MasterAccount", userSettingsViewModel.MasterAccountName);
Render the SelectList in my view:
<div class="editor-label">
#Html.LabelFor(model => model.MasterAccountSelect, "MasterAccountSelect")
</div>
<div class="editor-field">
#Html.DropDownList("MasterAccountSelect")
#Html.ValidationMessageFor(model => model.MasterAccountSelect)
</div>
I get this error:
Compiler Error Message: CS1061: 'UserSettingsViewModel' does not
contain a definition for 'MasterAccountSelect' and no extension method
'MasterAccountSelect' accepting a first argument of type
'UserSettingsViewModel' could be found (are you missing a using
directive or an assembly reference?)
I also get this error when I
You view model does not have a property named MasterAccountSelect hence the error. From the code you are assigning to ViewBag, you appear to be wanting to bind to a property in your model named MasterAccountName in which case your model should be
public class UserSettingsViewModel
{
[Display(Name = "Master Account Name")]
[Required(ErrorMessage = "Please select a master account name")]
public string MasterAccountName { get; set; }
public SelectList MasterAccountNameList { get; set; }
....
}
Then in the GET method
UserSettingsViewModel model = new UserSettingsViewModel
{
MasterAccountName = ..... ,
MasterAccountNameList = new SelectList(masterAccountsList, "MasterAccount", "MasterAccount")
}
return View(model);
And in the view
<div class="editor-label">
#Html.LabelFor(m => m.MasterAccountName)
</div>
<div class="editor-field">
#Html.DropDownListFor(m => m.MasterAccountName, Model.MasterAccountNameList, "-Please select-")
#Html.ValidationMessageFor(m => m.MasterAccountName)
</div>
Side note: Since you wanting the options value and display text to be the same (using property MasterAccount), you can also use
MasterAccountNameList = new SelectList(masterAccountsList.Select(x => x.MasterAccount))
try Label instead of LabelFor, You can not use LabelFor strictly type html helper if you don't have property in your model.
<div class="editor-label">
#Html.Label("MasterAccountSelect")
</div>
<div class="editor-field">
#Html.DropDownList("MasterAccountSelect")
#Html.ValidationMessageFor(model => model.MasterAccountSelect)
</div>
One good Suggestion
Whenever you are using Viewbag for filling dropdown, Keep your Viewbag and property name different because it will not auto select your selected value.

MVC 5, Razor - How to create Edit Template for one property in model

I have a question that feels like it should be easy to answer, but I am not sure where to go with it.
I have several cshtml pages that take different models. But, each of these models has a common property, called WebSiteSK, and the same razor and Kendo UI code that handles that property in each cshtml file. What I want to do is extract this common razor and Kendo UI into an EditerTemplate.
So, I have one cshtml page that takes a Model, which I'll call ModelA. Then, another that takes another model, called ModelB. Both ModelA and ModelB have an integer property called WebSiteSK, which the code that I want extract into an editor template receives.
Here is the code that I want to centralize in an editor template:
<script type="text/x-kendo-tmpl" id="site-droplist-template">
<span>#: data.WebSiteSK # - </span>
<span><b>#: data.SiteName # </b> - </span>
<span>#: data.EnvironmentNK #</span>
<br />
<span>#: data.SiteUrl #</span>
</script>
<div>
#Html.LabelFor(model => model.WebSiteSK, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#(Html.Kendo().DropDownList()
.Name("WebSiteSK_Target")
.DataTextField("SiteName")
.DataValueField("WebSiteSK")
.DataSource(d => d.Read("GetWebSiteList", "Site"))
.Height(300)
.TemplateId("site-droplist-template")
.Filter("contains")
.OptionLabel("Select a site")
.Events(d =>
{
d.DataBound("onSiteBound");
d.Change("onSiteChange");
})
)
#Html.ValidationMessageFor(model => model.WebSiteSK, string.Empty, new { #class = "text-danger" })
</div>
</div>
Does that make sense? Can anyone help me do this?
You can create a base class that contains only the property 'WebSiteSK'. All models that have have this property then should inherit from this base class. Then you can create a partial view '_WebSiteSK' with the code that you want to reuse.
Your models:
public class MyModel : WebSiteSKBaseClass
The partial view must be typed with the base class
#model MyProject.Models.WebSiteSKBaseClass
Finally you can replace the replicated code in all views with:
#Html.Partial("_WebSiteSK")

Dropdownlistfor will not show the correct selection

I have three dropdownlistfor in a loop that do not show the correct value from the DB. They always default to the first entry. I have checked and double checked the DB and verified that it should be the second one in the list. The list is also created correctly. What am I missing?
#foreach (CustomerMeasurementProfile oProfile in Model.Customer.CustomerMeasurementProfiles.Where(m => m.DeletedDate == null))
{
<div class="valuesforoneprofile form-group form-group-tight col-md-2">
<div class="col-md-11" >
#Html.Hidden(string.Format("Customer.CustomerMeasurementProfiles[{0}].Id", i), oProfile.Id)
#Html.Hidden(string.Format("Customer.CustomerMeasurementProfiles[{0}].CustomerId", i), oProfile.CustomerId)
#Html.TextBox(string.Format("Customer.CustomerMeasurementProfiles[{0}].Name", i), oProfile.Name, new { #class = "form-control input-sm" })
</div>
<div class="col-md-11" style="text-align:center">
#Html.CheckBox(string.Format("DeleteProfiles[{0}]", i), Model.DeleteProfiles[i])
</div>
<div class="col-md-11" style="padding-top:4px;">
#Html.DropDownListFor(m => oProfile.BodyTypeShoulderId, new SelectList(Model.BodyTypeShoulders, "Id", "Name"), new { #class = "form-control input-sm-select" })
</div>
<div class="col-md-11" style="padding-top:4px;">
#Html.DropDownListFor(m => oProfile.BodyTypePostureId, new SelectList(Model.BodyTypePosture, "Id", "Name"), new { #class = "form-control input-sm-select" })
</div>
<div class="col-md-11" style="padding-top:4px;">
#Html.DropDownListFor(m => oProfile.BodyTypeChestId, new SelectList(Model.BodyTypeChest, "Id", "Name"), new { #class = "form-control input-sm-select" })
</div>
If you want to set the selected value that is coming in Model. You need to do it like this:
#Html.DropDownListFor(m => oProfile.BodyTypeShoulderId,
new SelectList(Model.BodyTypeShoulders,
"Id",
"Name",
oProfile.BodyTypeShoulderId),
new { #class = "form-control input-sm-select" })
The above code will set the dropdown selected value to whatever is in the current Model object BodyTypeShoulderId
The first argument of DropDownListFor tells that on form post drop down selected value will be mapped with the Model property which is set there (we are passing m => oProfile.BodyTypeShoulderId) but this not sets selected Value.
For setting selected value you have to pass SelectList fourth parameter using this overload of SelectList class which is object selectedValue
Unfortunately #Html.DropDownListFor() behaves a little differently than other helpers when rendering controls in a loop. For a single object
#Html.DropDownListFor(m => oProfile.BodyTypeShoulderId, new SelectList(Model.BodyTypeShoulders, "Id", "Name"))
would work fine (if the value of BodyTypeShoulderId matches the value of one of the options, then that option would be selected). Ehsan has shown a work around when using it in a loop, however you have a few other issues in you code, not the least is that many of your properties will not post back correctly to a collection because your using a foreach loop rather than a for loop (which is generating duplicate name and id attributes). Your also generating a new SelectList in each iteration of the loop which is not very efficient.
You can solve both these and the dropdown selection issue by using an EditorTemplate. Assuming property CustomerMeasurementProfiles is typeof CustomerMeasurementProfiles, then
CustomerMeasurementProfiles.cshtml (add this to Views/Shared/EditorTemplates or Views/YourController/EditorTemplates)
#model CustomerMeasurementProfiles
#Html.HiddenFor(m => m.ID)
#Html.HiddenFor(m => m.CustomerId)
....
#Html.DropDownListFor(m => m.BodyTypeShoulderId, (SelectList)ViewData["shoulders"])
....
In the view model, add properties for the SelectList's and filtered collection of the items to display
IEnumerable<CustomerMeasurementProfiles> ActiveCustomerMeasurementProfiles { get; set; }
public SelectList BodyTypeShoulderList { get; set; }
....
and assign those values in the controller
Then in the main view
#using (Html.BeginForm())
{
...
#Html.EditorFor(m => m.ActiveCustomerMeasurementProfiles, new { shoulders = Model.BodyTypeShoulderList })
...
Using #Html.EditorFor() with a collection will correctly name the controls (and correctly select the right options) and on post back, ActiveCustomerMeasurementProfiles will now be correctly populated with all its properties.

Tab index for dynamically added elements

I have a jsp page with three text boxes and a ADD button beside it. Now I have to set the tabindex for the dynamically added elements. How can I do it?
[As you may have figured out by now, posting code allows someone else to give a more definite answer. Without an example to work from, I can only imagine what your code and environment is...from ASP.NET MVC3 + jQuery]
[I used the information from this stackoverflow post and modified a lit bit.]
I use jQuery to modify the tabindex value. I have multiple forms that are dynamically added by jQuery. The forms use div and style="display: table" to organize the text fields into columns.
[The relevant CSS styles]
.tb-table
{
display: table;
}
.tb-row
{
display: table-row;
}
.tb-cell
{
display: table-cell;
}
[A chunk of my ASP.NET MVC3 Razor cshtml that produces html for the browser--should be readable]
<div class="tb-table">
<div id="namerow1" class="tb-row">
<div class="tb-label tb-cell" id="l_firstname1">
#Html.LabelFor(model => model.firstname1)
</div>
<div class="tb-field tb-cell" id="firstname1">
#Html.TextBoxFor(model => model.firstname1, new { tabindex = "1" })
#Html.ValidationMessageFor(model => model.firstname1)
</div>
<div class="tb-label tb-cell" id="l_firstname2">
#Html.LabelFor(model => model.firstname2)
</div>
<div class="tb-field tb-cell" id="firstname2">
#Html.TextBoxFor(model => model.firstname2, new { tabindex = "2" })
#Html.ValidationMessageFor(model => model.firstname2)
</div>
</div>
<div id="namerow2" class="tb-row">
<div class="tb-label tb-cell">
#Html.LabelFor(model => model.lastname1)
</div>
<div class="tb-field tb-cell">
#Html.TextBoxFor(model => model.lastname1, new { tabindex = "1" })
#Html.ValidationMessageFor(model => model.lastname1)
</div>
<div class="tb-label tb-cell">
#Html.LabelFor(model => model.lastname2)
</div>
<div class="tb-field tb-cell">
#Html.TextBoxFor(model => model.lastname2, new { tabindex = "2" })
#Html.ValidationMessageFor(model => model.lastname2)
</div>
</div>
</div>
I use tabindex for all values in a column; not just a unique order. For the browsers I tested in, when there are multiple text fields with the same tabindex, the text field encountered first in the html code will be selected first by tab-navigation.
Therefore, for each form that I have, I use a tab value from 0-9 to group them. Once I have the tab order for an individual form working the way I want, I use the following jQuery to INCREMENT the tabindex value by 10 (or 20, or 30, or 40) for each form that I dynamically add. the first decimal, 0-9, organizes the tabs within that form, and incrementing the factors of 10 keeps the subsequent form tabs following along.
$('.createtab-form [tabindex]').each(function () {$(this).attr('tabindex', parseInt($(this).attr('tabindex'))+10)})
This is my first attempt at this myself--I'm sure someone else will have a better method. Let me know what you think.