Have Geek Brain

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

In ASP.NET Webforms, I could drag and drop a control on a form and access its properties:

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

Although I cannot drag the control into the ASP.NET MVC View template, can I change its attributes?

For instance:

  • disable the button in some conditions and be able to enable it if the conditions change.
  • You can change the text of the button from " Next → " to " Finish "
  • and etc.
+2


a source to share


6 answers


There are (at least) two methods for this:

Method 1: The Easy Way

You would do this by adding logic to your opinion:

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

Where Model.number

is the number of elements passed to your view by your controller. If it is less than or equal to zero, it disabled

will true

.

The syntax may not be accurate, 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: too complex, but more "MVC" way

If you want the logic in the controller and not the view, you have to set up a specific ViewModel that you can add to the logic:

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 might be a bit out of date, I'm prototyping this from my head and not in a place where I can test it for you.

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

I updated it to return disabled=disabled

using the string if it is indeed off.

+4


a source


All client side behavior is done through javascript. MVC comes with jQuery by default for this (www.jquery.com).

I have outlined how you can use your examples:

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

Suppose you want to change this to Done if the user unchecks the Configure Advanced Settings checkbox. 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 the value and only one to get the value. Therefore, to see if the button is disabled, follow these steps:

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


a source


ASP.NET MVC is a lightweight programming model. It does not create a control object model for you on the server like plain ASP.NET does. Typically, you should use client-side javascript (possibly with JQuery) to manipulate the properties of the controls that are placed on the page using markup in your view.

If you want to get started quickly with ASP.NET MVC, check out Sharp Architecture (open source). They have a guide and all sorts of goodies to help you get up and running quickly with ASP.NET MVC.

0


a source


Typically, you rarely want to do this. MVC way:

  • Let your controller populate the model with the objects it needs to generate HTML
  • Pass the model to the appropriate view
  • Let the view render HTML based on the values ​​of the objects in the model.

If you often find yourself changing HTML attributes after the HTML has been generated, you are probably not applying this template correctly.

0


a source


I would look at HTML helpers .

<%= Html.Button("AddButton","Button Text",HtmlButtonType.Submit,"SomeJavaScriptFunction()",new {disabled="disabled"} )  %>

The only real getcha is an anonymous class, at the end of which it gets funny when you add attributes that are keywords. For example, to add a Css class, you need an anonymous class that looks like new {@class="myCssClassName"}

.

0


a source


As I answered to George Stockker, I noticed that the disabled attribute can only get 1 value ( disabled = "disabled" ). Also, anything else disables input control. For example disabled = true and disable = false will disable the control anyway.

It looks like I'm not sure if the disabled attribute disables the control and prevents it from being controlled. So I decided to write an extension method for the HtmlHelper class .

public static class MyHelperClass
{
  public static string InputDisable(this HtmlHelper html, string name, string myValue,     bool isEnabled)
  {
    string show = "";
    if(!isEnable)
       show = "disabled = \"disabled\"";
    return "<input type = \"submit\" value = \"" + myValue + "\"" + show + " />";
  }
}

Now I can access the method this way

<% = Html.InputDisable("myInput", "My Button", false)%>

Thus, the last parameter determines the weather that the input control is visible.

Now, using Goerge Stocker's logic, I can determine the isEnabled value.

Thanks for all your answers

0


a source






More articles:


All Articles