Hide the form when a value is selected from the dropdown list

You can use JavaScript easily, you need an ID for your room and another ID for the product category dropdown , you need to add an event listener to listen for your dropdown change event :

Js

var ddl = document.getElementById('ddlProductCategory'),
    form = document.getElementById('roomsForm');

ddl.addEventListener('change', function(){
 if (this.value === '5'){
   form.style.display = 'none';
 }
 else {
   form.style.display = 'block';
 }
});

      

        
        
        
      

    

Html

<div class="form-group" id="roomsForm">
  @Html.LabelFor(model => model.RoomsNumber, htmlAttributes: new { @class = "control-label col-md-2" })
  <div class="col-md-10">
    @Html.EditorFor(model => model.RoomsNumber, new { htmlAttributes = new { @class = "form-control" } })
    @Html.ValidationMessageFor(model => model.RoomsNumber, "", new { @class = "text-danger" })
  </div>
</div>

<div class="form-group">
  @Html.LabelFor(model => model.ProductCategoryId, "Type of home", htmlAttributes: new { @class = "control-label col-md-2"})
  <div class="col-md-10">
    @Html.DropDownList("ProductCategoryId", null, htmlAttributes: new { @class = "form-control", id = 'ddlProductCategory" })
    @Html.ValidationMessageFor(model => model.ProductCategoryId, "", new { @class = "text-danger" })
  </div>
</div>