How can I access attributes of Html elements in ASP.NET MVC

Question

With ASP.NET Webforms, I could drag and drop a control on a form and be able to access its properties:

if (number == 0)
   AddButton.Enabled = false;

Although I cannot drag and drop a control on a ASP.NET MVC View template, can I change its attributes?

For instance:

• disable a button in some conditions and be able to enable it if conditions change.
• Be able to change the text of a button from "Next->" to "Finish"
• etc.

Solution 1

There are (at least) two Methods to do this:

Method 1: The Simple Way

You would do this by adding logic in your view:

<input type="button" disabled=<%= Model.number <= 0 %> />

Where Model.number is the count of items passed to your view by your controller. If it's less than or equal to zero, disabled will be true.

The syntax may not be exact, I haven't tried this, but this is the path I would go down to do what you want.

This will work for the initial setting of the value; changing it without refreshing the page is a matter of using JavaScript, as other answers have pointed out.

Method 2: The overly complex but more 'MVC' way

If you want the logic in the controller rather than the view, you should set up a specific ViewModel object that you can add the logic to:

ViewModel

public class MyObjectViewModel
{
    MyObject MyObject {get; private set; }
    bool Enabled; {get; set; }
    public MyObjectViewModel(MyObject obj)
    {
        MyObject = obj;
    }
    string IsEnabled
    {
        get
        {
             if (Enabled)
             {
                 return "";
             }
             else return "disabled=disabled";
        }
    }

Controller

public ActionResult Show(int id)
{
    MyObject myObject = repository.GetMyObjectById(id)
    MyObjectViewModel movm = myObject; 
    movm.Enabled = myObject.number > 0;
    return View(movm);
}

View

<input type="button" <%= Model.IsEnabled %> />

Again, the syntax and usage may be a little off, I'm prototyping this off the top of my head, and am not in a location where I can test this for you.

If you're interested in ViewModels, here are some good resources:

• View Model Best Practices
• ASP.NET MVC Tip# 50: Create View Models

I've updated it to return disabled=disabled using the string if it is actually disabled.

Solution 2

All client side behaviour is scripted through javascript. MVC default ships with jQuery for this (www.jquery.com).

I've outlined how you could go about your examples:

<input id="nextFinishBtn" type="button" value="Next ->"/>

Assume you want to change this to "Finish" if the user unchecks a checkbox named "Configure Advanced settings". which was true by default

<%= Html.CheckBox("DoAdvancedSettings", "true", new { onclick='changeNextButton()' }); %>
<script langauge="javascript">
    function changeNextButton() {
        $('#nextFinishBtn').val('Finish');
    }
</script>

In general you can access any attribute of any element in jQuery using the .attr construct:

$('#nextFinishBtn').attr('disabled','disabled');

You call it with two parameters to set a value, and with just one to fetch the value. So to see if the button is disabled, you'd do:

if ($('#nextFinishBtn').attr('disabled')=='disabled') { alert('button is disabled'); }