Posts

Showing posts from September, 2016

Cascading Dropdown Lists with JSON Result

T o do a Cascading or dependent dropdownlist we start with a bound dropdownlist  - could look something like this: The objective is to create or bind another dropdown after the selection of the networkId  <select id="programId" name="programId" class="form-control"></select> Begin by adding the following function to your page - this clears any existing results, pulls in new results and populates our 2nd dropdownlist (programid)  $(function () { The last thing we need is to look at our JsonResult query  @Html.DropDownList("networkId", null, "Select a Network", htmlAttributes: new { @class = "form-control" }) So first we need to add a placeholder:    There are several ways to do this but we are going to do it with Jquery and a JsonResult in our controller.             $('#networkId').change(function () {                              $('#programid').html("");                   

CSS Necessities

READ ONLY TEXT BOXES When you need to return your model data in a textbox control but you don't want it to look like a textbox, apparently non-geeky people can't just accept that it is read only - they need to have it out of a textbox! Easy way to do this- add this to your styles input[readonly] {     border: none;     background: none; } And make your text box readonly     @Html.EditorFor(model => model.Id, new { htmlAttributes = new { @readonly=true } }) DECORATING REQUIRED FIELDS You know the little red asterisk that you typically see to the right of the required field label.  An easy way to accomplish that with css is like this: .required:after {     content: " *";     font-weight: bold;     color:#ff0000; } Then add the class anywhere you want it to apply: @Html.LabelFor(model => model.agreement.programID, new { @class = "col-sm-2 form-control-label required " }) INCLUDE A PRINT BUTTON Add CSS //(#tabletoPr