.NET MVC 3在C#中向SelectListItem添加属性

时间:2011-10-13 14:01:03

标签: c# .net html asp.net-mvc-3

所以我试图在下拉菜单中设置标签样式。我的MVC帮助器设置类似这样,但真实的东西来自数据库,因此数据不是硬编码的。

@{
    List<string> ListOfText = new List<string> { "FirstThing","SecondThing","ThirdThing"};
    List<string> ListOfValue = new List<string> { "1","2","3"};
    List<SelectListItems> ListOFSELCETLISTITEMS = new List<SelectListItem>();    

    for (int x = 0; x < 3; x++)
    {
        ListOFSELCETLISTITEMS .Add(new SelectListItem
        {
            Text = ListOfText[x],
            Value = ListOfValue[x],
            Selected = (selectedValue == ListOfValue[x])
        });
    }
}   
@Html.DropDown("NAME",ListOFSELCETLISTITEMS)

这给了我类似的东西

<select id="Name" name="Name">
    <option value="1">FirstThing</option>
    <option value="2">SecondThing</option>
    <option value="3">ThirdThing</option>
</select>

我需要的是这样的东西

<select id="Name" name="Name">
    <option value="1" class="option1">FirstThing</option>
    <option value="2" class="option2">SecondThing</option>
    <option value="3" class="option3">ThirdThing</option>
</select>

我尝试过像

这样的事情
@{
    List<string> ListOfText = new List<string> { "FirstThing","SecondThing","ThirdThing"};
    List<string> ListOfValue = new List<string> { "1","2","3"};
}
<select id="Name" name="Name">
    @ for (int x = 0; x < 3; x++)
    {
        <text>
        <option value="@ListOfValue[x]" @{if(selectedValue == ListOfValue[x])
            { @Html.Raw("selected='selected'") }}
            @class = '@Html.Raw("option"+x)'>
            @ListOfText[x]
        </option>
        </text>
    }   
</select>

但这似乎让控制器感到困惑,并且它无法识别上面的下拉值是否映射到

public ActionResult method(string Name)

在帖子的控制器上或获取。这条线

 @Html.DropDown("NAME",ListOFSELCETLISTITEMS)
视图中的

允许控制器理解该方法应该映射到该下拉列表的值。

我该怎么做?有没有办法解除控制器的控制,并且能够在没有Html.helpers的情况下手写HTML?

3 个答案:

答案 0 :(得分:3)

要直接渲染控制器操作,您可以尝试:

  

@ {Html.RenderAction(Action,Controller); }

调用应该返回包含内容的字符串的控制器操作。

[HttpGet]
public string Action(int id) 
{
   return your context in here
}

但是我认为添加Ajax操作更简洁,返回用于构建select的数据并在获得结果之后,使用jquery解决方案添加类(可以在AJAX响应中返回)

编辑:澄清:

假设你有一个Item的集合如下:

class Item {
   public int Value { get; set; }
   public string CssClass { get; set; }
   public string Description{ get; set; }
}
private const string EMPTY_OPTION = "<option value=''></option>";
[HttpGet]
public string Action(int id) 
{
    // Load a collection with all your option's related data
    IQueryable data = LoadSomethingFromDbOrWherever(id);
    // Build output
    StringBuilder sb = new StringBuilder();
    sb.AppendFormat("<select id='foo' name='foo'>");
    sb.AppendFormat(EMPTY_OPTION);
    foreach (Item b in data)
    {
            sb.AppendFormat("<option value='{0}' class='{1}'>{2}</option>",
                            b.Value, b.CssClass, b.Description);
    }
    sb.AppendFormat("</select>");
    return sb.ToString();
}

for ajax选项:

[HttpGet]
public JsonResult Action(int id) 
{
   //same as above, obtain a collection
    // Load a collection with all your option's related data
    IQueryable data = LoadSomethingFromDbOrWherever(id);
    var jsonData = new
            {
                    from c in data
                    select new
                    {
                        Value= c.Value,
                        CssClass = c.CssClass,
                        Description = c.Desription
                    }).ToArray()
            };
    return Json(jsonData);
}

通过$ .ajax调用此函数,在回调中你将拥有一个包含所有数据的javascript对象,然后使用jQuery构建选择选项。

此致

答案 1 :(得分:2)

使用jquery,您可以尝试这样的事情:

$('#Name option').each(function(){
    var i = $(this).attr('value');
    $(this).addClass('option'+i);
});

(我仍然是jquery的新手,但我试过这个并且它有效)

答案 2 :(得分:1)

编辑:我以前的帖子链接到错误的代码。

我建议您创建自己的HTML Helper扩展方法。这就是我过去的做法,遗憾的是我没有代码可以展示一个例子。

您基本上需要创建一个获取参数并返回htmlstring

的方法

你最终会替换

@Html.DropDown("NAME",ListOFSELCETLISTITEMS)

类似

@Html.MyDropDown("NAME",ListOFSELCETLISTITEMS)

在循环列表并创建要返回的格式正确的html字符串的地方,您可以根据需要添加更多额外属性