如何在asp.net mvc 3.0中将onclick事件注册到@ Html.RadioButtonForSelectList

时间:2012-07-12 10:19:20

标签: asp.net-mvc-3

我的模特

 public class IndexViewModel
{
    public IEnumerable<SelectListItem> TestRadioList { get; set; }

    [Required(ErrorMessage = "You must select an option for TestRadio")]
    public String TestRadio { get; set; }

    [Required(ErrorMessage = "You must select an option for TestRadio2")]
    public String TestRadio2 { get; set; }
}

public class aTest
{
    public Int32 ID { get; set; }
    public String Name { get; set; }
}

我的控制器

 public ActionResult Index()
    {
        List<aTest> list = new List<aTest>();
        list.Add(new aTest() { ID = 1, Name = "Yes" });
        list.Add(new aTest() { ID = 2, Name = "No" });
        list.Add(new aTest() { ID = 3, Name = "Not applicable" });
        list.Add(new aTest() { ID = 3, Name = "Muttu" });
        SelectList sl = new SelectList(list, "ID", "Name");
        var model = new IndexViewModel();
        model.TestRadioList = sl;
        return View(model);
    }

我的观点

@using (Html.BeginForm()) {
 <div>
    @Html.RadioButtonForSelectList(m => m.TestRadio, Model.TestRadioList)
</div>

}

辅助方法

public static class HtmlExtensions
{
    public static MvcHtmlString RadioButtonForSelectList<TModel, TProperty>(
        this HtmlHelper<TModel> htmlHelper,
        Expression<Func<TModel, TProperty>> expression,
        IEnumerable<SelectListItem> listOfValues)
    {
        var metaData = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
        var sb = new StringBuilder();

        if (listOfValues != null)
        {
            // Create a radio button for each item in the list
            foreach (SelectListItem item in listOfValues)
            {
                // Generate an id to be given to the radio button field
                var id = string.Format("{0}_{1}", metaData.PropertyName, item.Value);

                // Create and populate a radio button using the existing html helpers
                var label = htmlHelper.Label(id, HttpUtility.HtmlEncode(item.Text));
                var radio = htmlHelper.RadioButtonFor(expression, item.Value, new { id = id }).ToHtmlString();

                // Create the html string that will be returned to the client
                // e.g. <input data-val="true" data-val-required="You must select an option" id="TestRadio_1" name="TestRadio" type="radio" value="1" /><label for="TestRadio_1">Line1</label>
                sb.AppendFormat("<div class=\"RadioButton\">{0}{1}</div>", radio, label);
            }
        }

        return MvcHtmlString.Create(sb.ToString());
    }
}

以下是我正在使用的代码...不确定如何为控件提供onclick事件。在辅助方法中,我找不到任何合适的htmlattributes参数。根据我的要求。点击列表中的任何单选按钮我需要调用一个参数很少的js函数。这是我无法做到的。 Someonce请帮忙。提前谢谢。

1 个答案:

答案 0 :(得分:0)

我目前还没有办法测试这个,但一个粗略的想法是将IDictionary htmlAttributes添加到方法并将其传递到那里。如果您在视图中没有所需的onClick代码,那么您可以省略参数并在扩展方法中执行

    public static class HtmlExtensions
    {
        public static MvcHtmlString RadioButtonForSelectList<TModel, TProperty>(
            this HtmlHelper<TModel> htmlHelper,
            Expression<Func<TModel, TProperty>> expression,
            IEnumerable<SelectListItem> listOfValues,
            IDictionary<string, Object> htmlAttributes)
        {
            var metaData = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
            var sb = new StringBuilder();

            if (listOfValues != null)
            {
                // Create a radio button for each item in the list
                foreach (SelectListItem item in listOfValues)
                {
                    // Generate an id to be given to the radio button field
                    var id = string.Format("{0}_{1}", metaData.PropertyName, item.Value);

                    // Create and populate a radio button using the existing html helpers
                    var label = htmlHelper.Label(id, HttpUtility.HtmlEncode(item.Text));

                    htmlAttributes["id"] = id;
                    var radio = htmlHelper.RadioButtonFor(expression, item.Value, htmlAttributes).ToHtmlString();

                    // Create the html string that will be returned to the client
                    // e.g. <input data-val="true" data-val-required="You must select an option" id="TestRadio_1" name="TestRadio" type="radio" value="1" /><label for="TestRadio_1">Line1</label>
                    sb.AppendFormat("<div class=\"RadioButton\">{0}{1}</div>", radio, label);
                }
            }

            return MvcHtmlString.Create(sb.ToString());
        }
    }

然后使用类似的方式调用它:

@Html.RadioButtonForSelectList(m => m.TestRadio, Model.TestRadioList, new { onclick="someFunction();" })

或者你可以设置一个css类并绑定到click事件。例如,

<script type="text/javascript>
    $('.someClassName').click( function() {
    alert('clicked');
});
</script>

@Html.RadioButtonForSelectList(m => m.TestRadio, Model.TestRadioList, new { @class="someClassName" })