TagHelper的下拉框

2019-12-08 23:53:35 阅读：224 来源： 互联网

标签：Code Name public CoreTest countryManager addTagHelper TagHelper 下拉框

1.创建注册数据等

1）Startup.cs

    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
            services.AddHttpContextAccessor();
            services.AddTransient<ICountryManager, CountryManager>();
        }

        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseStaticFiles();

            app.UseMvc();

        }
    }

2）Model

public class Country
    {
        /// <summary>
        /// 编码
        /// </summary>
        public string Code { get; set; }

        /// <summary>
        /// 名称
        /// </summary>
        public string Name { get; set; }
    }

3）Data

using CoreTest.Model;
using System.Collections.Generic;

namespace CoreTest.Manager
{
    public interface ICountryManager
    {
        IEnumerable<Country> GetAll();
    }

    public class CountryManager : ICountryManager
    {
        public readonly List<Country> _countryList;

        public CountryManager()
        {
            _countryList = new List<Country>
            {
                new Country{ Code="001",Name="China" },
                new Country{ Code="002",Name="Japan" },
                new Country{ Code="003",Name="USA" },
            };
        }

        public IEnumerable<Country> GetAll()
        {
            return _countryList;
        }
    }

}

4）TagHelper的下拉框控件对象

    [HtmlTargetElement("country-list")]
    public class CountryListTagHelper:TagHelper
    {
        private readonly ICountryManager _countryManager;

        public string SelectedValue { get; set; }

        public CountryListTagHelper(ICountryManager countryManager)
        {
            _countryManager = countryManager;
        }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "select";
            output.Content.Clear();
            foreach (var item in _countryManager.GetAll())
            {
                var selected = "";
                if (SelectedValue != null && SelectedValue.Equals(item.Code, StringComparison.CurrentCultureIgnoreCase))
                {
                    selected = "selected=\"selected\"";
                }
                var listItem = $"<option value=\"{item.Code}\" {selected}>{item.Name}</option>";
                output.Content.AppendHtml(listItem);
             }
        }
    }

5）页面上的引用

@page
@model CoreTest.Pages.EditModel
@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *,CoreTest
@{
}
<form method="post">
    <p>
        <label>姓名：</label>
        <input type="text" asp-for="@Model.Input.Name" />
    </p>
    <p>
        <label>年龄：</label>
        <input type="number" asp-for="@Model.Input.Age" />
    </p>
    <p>
        <label>性别：</label>
        <select asp-for="@Model.Input.Sex"></select>
    </p>
    <p>
        <label>电话号码：</label>
        <input type="text" asp-for="@Model.Input.Phone" />
    </p>
    <p>
        <label>国籍：</label>
        <country-list selected-value="002"></country-list>
    </p>
</form>

效果：

注：

1）Startup记得注册接口服务对象（1.1的红色部分）

2）在单独的页面上使用TagHelperHelper

@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers

3）使用该项目中所有的TageHelper（@addTagHelper typeName，AssemblyName）

@addTagHelper *,CoreTest

// 方式一，程序集下所有的Taghelper
@addTagHelper *,CoreTest

// 方式二，明确指定路径
@addTagHelper "CoreTest.CountryListTagHelper,CoreTest"

// 方式三，模糊匹配
@addTagHelper "CoreTest.CountryList*,CoreTest"

感谢：https://www.cnblogs.com/hager/p/5817335.html

标签：Code,Name,public,CoreTest,countryManager,addTagHelper,TagHelper,下拉框
来源： https://www.cnblogs.com/dzw159/p/12008693.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

TagHelper的下拉框