tags:

views:

334

answers:

7

In a Master page, I have this....

<ul id="productList">
  <li id="product_a" class="active">
    <a href="">Product A</a>
  </li>
  <li id="product_b">
    <a href="">Product B</a>
  </li>
  <li id="product_c">
    <a href="">Product C</a>
  </li>                    
</ul>

I need to change the class of the selected list item... When 'Product A' is clicked, it gets the 'active' class, and the others get none. When 'Product B' is clicked it gets the 'active' class, and the others get none. I am trying to do it in the Home Controller, but I am having a hard time gaining a refference to the page or any of its elements.

+1  A: 

You can't access your HTML from the controller. You'll need to do it in Javascript, or refresh the page regenerate the HTML (post to the same page with a different query string parameter for example). Then in your controller you can specify which item is selected, then in the view when you generate the list, check for selected and put the class on it.

Max Schmeling
+2  A: 

I am having a hard time gaining a refference to the page or any of its elements.

Sounds like you're not really getting MVC. Your controller should not have a reference to the html elements of the view. You need to create a Model (probably a View Model in this case) that contains the list of Products and indicates which one is selected. Your view then simply displays the contents of the View Model as HTML. It would probably include a loop over the products in the model with a check for an Active property.

Dennis Palmer
A: 

You could have an id field in the model that corresponds to the id of the list item. Check if the current model matches the id of the list item. If it does, then set the active class.

geowa4
A: 

You can do this a few ways. The simple approach is make sure that the links URL matches the page that it goes too. Then you can define the active state of an anchor tag and CSS will take care of the rest. If you have all the links point to the same URL this won't work to well in which case you can control the state by having the controller pass to the view the ID of the link that is active. Then when you iterate through the list that you are building you can match the ID in the ViewData to the ID that you iterate over. When you find the one you were looking for you can set the class to "active" manually. The old school way...but works!

Andrew Siemer
A: 

Assuming you are asking about ASP.NET MVC, what is the intent of trying to do this in the controller?

As Max mentioned you could use JavaScript to do it, which would be the simplest and efficient.

R N
A: 

This is tested.

<html>
    <style type="text/css">
    a:active
    {
       color="green";
    }
    </style>

   <ul id="productList">
      <li id="product_a" class="active" onclick="setActive(this)">
        <a href="">Product A</a>
      </li>
      <li id="product_b">
        <a href="" onclick="setActive(this)">Product B</a>
      </li>
      <li id="product_c">
        <a href="" onclick="setActive(this)">Product C</a>
      </li>                    
    </ul>

    <script type="text/javascript">
     function setActive(obj) {
       aObj = document.getElementById('productList').getElementsByTagName('li');
       for(i=0;i<aObj.length;i++) {
      if(aObj[i].name == obj.name) {
        aObj[i].className='active';
      } else {
        aObj[i].className='';
      }
       }
     }
    </script>
</html>
Robert Harvey
A: 

You can use

<%=Html.DropDownList("ddlList", (IEnumerable)ViewData["ddlList"], new { @class = "hello", className = "asdfasdf" ,anyproperty = "putsometext"})%>

Refer the article: http://altafkhatri.com/Technical/Assign_css_class_to_MVC_dropdownlist for more details