我的网站上有以下内容.

来源[DropDownList]

网站

搜索引擎

其他

其他来源[TextBox]

我想使用ASP.Net验证器(我认为比较验证器),这样当在下拉列表中选择“其他”并且没有输入文本时,将触发验证并且无法提交页面.

这可能吗？

我试图在下拉列表中将“其他”选项的值设置为string.empty并将其与空文本框进行比较,但这不起作用.

我继承的整个事情都在一个向导控件中,否则我会挂起一些客户端脚本来自己触发验证.我不认为我可以用向导控件做到这一点？

提前致谢.

ASP.NET提供的验证器都不允许您基于另一个控件执行条件验证.但是,您可以通过使用在客户端,服务器端或两者上执行验证的CustomValidator来实现此目的(建议至少使用服务器端验证).验证器与向导一起使用效果很好.

ASP.NET标记示例：

<asp:DropDownList ID="OptionsDropDownList" runat="server">
        <asp:ListItem Text="Website" />
        <asp:ListItem Text="Search Engine" />
        <asp:ListItem Text="Other" />
    </asp:DropDownList>
    <asp:TextBox ID="OtherTextBox" runat="server" />
    <asp:CustomValidator ID="custvOptionsDropDownList" runat="server" ControlTovalidate="OptionsDropDownList"
        ValidateEmptyText="true" display="Dynamic" ClientValidationFunction="validateOtherTextBox"
        ErrorMessage="This field is required!" OnServerValidate="ValidateOtherTextBox" />

用于ClientValidationFunction的Javascript：

<script type="text/javascript" language="javascript">
    function validateOtherTextBox(event,args) {
        var textBox = document.getElementById('<%= OtherTextBox.ClientID %>').value;
        if (args.Value == 'Other')
            args.IsValid = (textBox != '');
        else
            args.IsValid = true;
    }
</script>

OnServerValidate的代码隐藏：

protected void ValidateOtherTextBox(object source,ServerValidateEventArgs args)
    {
        if (OptionsDropDownList.SelectedValue == "Other")
        {
            args.IsValid = (OtherTextBox.Text.Trim() != "");
        }
    }

请注意,您可以选择实施所需的任何内容.您可以完全跳过Javascript验证并删除该代码和ClientValidationFunction属性.另请注意,Javascript通过使用ClientID属性引用目标控件.这是必需的,因为ASP.NET在输出页面时会分配不同的ID,并且您希望以这种方式将其提供给Javascript方法(在页面上查看源代码,您将看到控件名称有额外的前缀等).

我正在使用MVC，我仍然是MVC的新手。任何人都可以告诉我，如果你可以填写一个下拉列表，并选择另一个下拉列表的数据。

我想使用Jquery来避免回发，从而使页面更流畅。

模型：

namespace MvcApplicationrazor.Models
{
    public class CountryModel
    {
        public List<State> StateModel { get; set; }
        public SelectList FilteredCity { get; set; }
    }
    public class State
    {
        public int Id { get; set; }
        public string StateName { get; set; }
    }
    public class City
    {
        public int Id { get; set; }
        public int StateId { get; set; }
        public string CityName { get; set; }
    }
}

控制器：

public ActionResult Index()
        {
            CountryModel objcountrymodel = new CountryModel();
            objcountrymodel.StateModel = new List<State>();
            objcountrymodel.StateModel = GetAllState();
            return View(objcountrymodel);
        }


        //Action result for ajax call
        [HttpPost]
        public ActionResult GetCityByStaeId(int stateid)
        {
            List<City> objcity = new List<City>();
            objcity = GetAllCity().Where(m => m.StateId == stateid).ToList();
            SelectList obgcity = new SelectList(objcity,"Id","CityName",0);
            return Json(obgcity);
        }
        // Collection for state
        public List<State> GetAllState()
        {
            List<State> objstate = new List<State>();
            objstate.Add(new State { Id = 0,StateName = "Select State" });
            objstate.Add(new State { Id = 1,StateName = "State 1" });
            objstate.Add(new State { Id = 2,StateName = "State 2" });
            objstate.Add(new State { Id = 3,StateName = "State 3" });
            objstate.Add(new State { Id = 4,StateName = "State 4" });
            return objstate;
        }
        //collection for city
        public List<City> GetAllCity()
        {
            List<City> objcity = new List<City>();
            objcity.Add(new City { Id = 1,StateId = 1,CityName = "City1-1" });
            objcity.Add(new City { Id = 2,StateId = 2,CityName = "City2-1" });
            objcity.Add(new City { Id = 3,StateId = 4,CityName = "City4-1" });
            objcity.Add(new City { Id = 4,CityName = "City1-2" });
            objcity.Add(new City { Id = 5,CityName = "City1-3" });
            objcity.Add(new City { Id = 6,CityName = "City4-2" });
            return objcity;
        }

视图：

@model MvcApplicationrazor.Models.CountryModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript">
    function GetCity(_stateId) {
        var procemessage = "<option value='0'> Please wait...</option>";
        $("#ddlcity").html(procemessage).show();
        var url = "/Test/GetCityByStaeId/";

        $.ajax({
            url: url,data: { stateid: _stateId },cache: false,type: "POST",success: function (data) {
                var markup = "<option value='0'>Select City</option>";
                for (var x = 0; x < data.length; x++) {
                    markup += "<option value=" + data[x].Value + ">" + data[x].Text + "</option>";
                }
                $("#ddlcity").html(markup).show();
            },error: function (reponse) {
                alert("error : " + reponse);
            }
        });

    }
</script>
<h4>
 MVC Cascading Dropdown List Using Jquery</h4>
@using (Html.BeginForm())
{
    @Html.DropDownListFor(m => m.StateModel,new SelectList(Model.StateModel,"StateName"),new { @id = "ddlstate",@,@onchange = "javascript:GetCity(this.value);" })
    <br />
    <br />
    <select id="ddlcity" name="ddlcity">

    </select>

    <br /><br />
  }

这是类似的
How to Display Selected Item in Bootstrap Button Dropdown Title

只有区别,我的下拉列表不是静态的,它是通过ajax响应填充的.
以下代码不适用于< li>动态填充的项目.

为了测试上面的内容,我有意把静态< li>当我点击该项目时,我可以在控制台中看到成功消息.但是,当我点击< li>这些都是动态附加的,我在控制台中没有任何东西.

我相信,我在这里遗漏了一些jQuery基础知识. jQuery gurus,评论/想法？

以下是一些进一步澄清的代码.

Java脚本代码：

在控制台中打印所选选项

$(".dropdown-menu li a").click(function () {
        console.log("Selected Option:"+$(this).text());
});

从ajax JSON响应中填充下拉列表

$.each(response,function (key,value) {
    $("#dropDownUL").append("<li> <a tabindex=\"-1\" href=\"#\" align=\"left\"> " + value + "</a> </li>");
})

HTML代码：

<div>
    <div id="dropDownId"id="dLabel" role="button" data-toggle="dropdown" data-target="#">
        Collections
        <b></b>
    </div>           
    <ul id="dropDownUL"role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#" align="left">Static test Option</a></li>
    </ul>


</div>

所以,再次,如果我点击静态测试选项,我可以在控制台中看到消息：选择选项：静态测试选项

但是,当我点击从ajax响应填充的Option2 Option 3时,我在控制台中看不到任何东西.

让我知道如果有什么不清楚.我会尝试进一步解释.

$(document).on('click','.dropdown-menu li a',function () {
    console.log("Selected Option:"+$(this).text());
});

这只是简单的事件委托…在页面加载时不存在的元素必须将事件委托给在页面加载时确实存在的静态父元素.

我们利用jQuery的.on()来完成这个.

$(staticElement).on(event,dynamicElement,function(){ //etc });

义务编辑

请不要将元素实际绑定到$(document),而是选择最接近的是静态的父元素.这是出于性能原因.