CODEWITHSUNDEEP
c#jqueryasp.net-mvc-5
Adnan Yaseen
Adnan Yaseen

Reputation: 863

Showing and hiding controls from both controller and view

I am trying to create a best possible solution for this but as this is the first time I am encountering this scenario so I am not sure how to best implement this.

I have a very simple model,

public class Feedback
{       
[Required]
[Display(Name = "Current ID")]
public int? PreviousID { get; set; }

[Required]
[Display(Name = "Next ID")]
public int? NextID { get; set; }

[Required]
public int ScenarioID { get; set; }

[Display(Name = "Select you scenario")]
public IEnumerable<SelectListItem> YourScenario { get; set; }

}

When User first loads the view then only dropdownlist for YourScenario and TextBox for PreviousID is displayed. When User select dropdownlist then based on its value the TextBox for NextID is displayed to user. Here is my view,

<div class="form-group">
   @Html.LabelFor(m => m.YourScenario, new { @class = "col-sm-3 control-label" })
      <div class="col-sm-9">
        @Html.DropDownListFor(m => m.ScenarioID, m.YourScenario, "Choose Scenario", new { @class = "form-control chosen-select" })
    </div>
</div>

<div class="form-group">
   @Html.LabelFor(m => m.PreviousID, new { @class = "col-sm-3 control-label" })
   <div class="col-sm-9">
       @Html.TextBoxFor(m => m.PreviousID)
   </div>
</div>

<div class="form-group" style="display:none">
   @Html.LabelFor(m => m.NextID, new { @class = "col-sm-3 control-label" })
   <div class="col-sm-9">
       @Html.TextBoxFor(m => m.NextID)
   </div>
</div>

To show/hide the NextID I use the Jquery on the view,

   $('#YourScenario').change(function () {
        var selectedValue = $(this).val();
        var nextID = $('#NextID');

        if (selectedValue = "3") {
            nextID .show();
        }
        else {
            nextID .hide();
        }
    });

All this works great. Now to use the same View as Edit Mode I pass the model to the view from controller. What I want is that the TextBox for NextID should be displayed or hidden automatically based on the model values. If I use if condition on the View then the control is not available through Javascript so how can I achieve this?

Upvotes: 0

Views: 1611

Answers (1)

Ricardo Pontual
Ricardo Pontual

Reputation: 3757

Here is a simple example: https://jsfiddle.net/jma71jf7/

When you run the code, it will hide the input, because there is no selected value, and this line will trigger the change event function:

$('#YourScenario').trigger('change');

But when editing, the select will have some value, and it will hide/show the input according to the value.

Upvotes: 1

Related Questions