Add if condition on View (ASP.NET MVC 4)

Question

I have this code in my View

@using (Html.BeginForm("Add", "AdminUsers"))
{
<div class="control-group">
    <span class="control-label">* Role:</span>
    <div class="controls">
        <select name="Role">
            <option value="@Argussite.SupplierService.Core.Domain.Role.Manager" 
                @if (Model.Role == Argussite.SupplierService.Core.Domain.Role.Manager) { <text>selected="selected"</text> }>
                @Argussite.SupplierService.Core.Domain.Role.ManagerTitle</option>
            <option value="@Argussite.SupplierService.Core.Domain.Role.ChiefManager"
                @if (Model.Role == Argussite.SupplierService.Core.Domain.Role.ChiefManager) { <text>selected="selected"</text> }>
                @Argussite.SupplierService.Core.Domain.Role.ChiefManagerTitle</option>
            <option value="@Argussite.SupplierService.Core.Domain.Role.Ceo"
                @if (Model.Role == Argussite.SupplierService.Core.Domain.Role.Ceo) { <text>selected="selected"</text> }>
                @Argussite.SupplierService.Core.Domain.Role.CeoTitle</option>
        </select>
    </div>
</div>

//...

<div class="control-group">
    <span class="control-label">* Phone:</span>
    <div class="controls">
        @Html.TextBoxFor(m => m.PhoneNumber)
        @Html.ValidationMessageFor(m => m.PhoneNumber, null, new {@class="text-error"})
    </div>
</div>

<div class="control-group">
    <div class="controls">
        <button type="submit" class="btn btn-primary">Add</button>
        <a href="@Url.Action("Index", "AdminUsers")" class="btn">Cancel</a>
    </div>
</div>
}

And I need to add a checking if I selected at the list

Model.Role == Argussite.SupplierService.Core.Domain.Role.Manager

I need to show

<div class="control-group">
    <span class="control-label">* Phone:</span>
    <div class="controls">
        @Html.TextBoxFor(m => m.PhoneNumber)
        @Html.ValidationMessageFor(m => m.PhoneNumber, null, new {@class="text-error"})
    </div>
</div>  

If I changed selected value at the list

Model.Role == Argussite.SupplierService.Core.Domain.Role.ChiefManager

or

Model.Role == Argussite.SupplierService.Core.Domain.Role.Ceo

I need to show Phone Field without * and I dont need Validation this field.
How can I do that?
It's my control

 [HttpPost]
    public ActionResult Add(AddArgussoftUserInput input)
    {
        if ((input.Role == Role.Manager || input.Role == Role.ChiefManager) && string.IsNullOrWhiteSpace(input.PhoneNumber))
        {
            ModelState.AddModelError("PhoneNumber", "Please, provide a valid Phone Number");
        }
        if (!Context.IsUserNameUnique(input.Name))
        {
            ModelState.AddModelError("Name", AddArgussoftUserInput.NameIsNotUniqueError);
        }
        if (!Context.IsUserEmailUnique(input.Email))
        {
            ModelState.AddModelError("Email", AddArgussoftUserInput.EmailIsNotUniqueError);
        }

        if (!ModelState.IsValid)
        {
            return View(input);
        }

        var user = new User(input.Name, input.Email, input.FullName, input.Role, input.PhoneNumber);
        Context.Users.Add(user);

        Register(new UserCreatedNotification(user, null /* supplier */, UrlBuilder));
        TriggerPopupSuccess(string.Format("Account '{0}' for user {1} has been created.", input.Name, input.FullName));

        return RedirectToAction("Index");
    }

Answer 1

You can use jQuery to hook the change event of the select list and show a div based on the selected Role.

I set up a quick jsFiddle to show you here http://jsfiddle.net/nwdev/X5Zva/

<select id="RoleList">
    <option value="Manager">Manager</option>
    <option value="CEO">CEO</option>
</select>

<div id="RequiredPhone">
    phone field with validation
</div>
<div id="OptionalPhone">
    optional phone field here
</div>

And some jQuery to get it wired up...

jQuery(function() {
jQuery('#RequiredPhone').hide();
jQuery('#OptionalPhone').hide();
});

function updateOption() {
    jQuery('#RequiredPhone').toggle(this.value == 'Manager');
    jQuery('#OptionalPhone').toggle(this.value == 'CEO');
}

jQuery(document).ready(function() {
    jQuery("#RoleList").each(updateOption);
    jQuery("#RoleList").change(updateOption);
});

So, if you select Manager from the dropdrop it will show the ReqiredPhone div and if you select the CEO it will show the OptionalPhone div.

This should get you going in the right direction.

I haven't tested this with the validation field. You might have to add it dynamically.

Answer 2

You can make a HtmlHelper that extends the MvcHtml. I've handled this problem somewhat like this but with custom authorizeattributes.

namespace System.Web.Mvc.Html
{
public static class HtmlHelperExtensions
{
    public static MvcHtmlString AuthorizeCeo()
    {
        return Model.Role == "Ceo" ? value : MvcHtmlString.Empty;
    }
}

This way you can use it like:

@Html.ActionLink("Phonenumber *", "actionName", "controllerName").AuthorizeCeo()

And it will only show if the user is authorized.