2014-07-23 88 views
1

我使用引導3選擇插件,使我的下拉列表更加花哨。它完美的工作,直到我添加一個簡單的RequiredFieldValidator到另一個控件,如文本框的頁面。所有漂亮的下拉列表都會更改爲典型的下拉菜單。引導選擇不與Asp.Net驗證工作

這裏是我的HTML:

<asp:DropDownList ID="ddlCategories" runat="server" CssClass="show-menu-arrow selectpicker" DataSourceID="dsCategories" DataTextField="CategoryName" DataValueField="CategoryID"> 
</asp:DropDownList> 

而且JS:

$(window).on('load', function() { 
    $('.selectpicker').selectpicker({ 
    }); 
}); 

我知道Asp.Net驗證添加一些JavaScript代碼的網頁,我想他們造成了一些衝突。我也用$.noConflict()沒有成功。

我需要知道如何解決這個問題。

編輯:

所呈現標記是這樣的:

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 

</title> 
    <script src="/js/jquery-1.10.2.min.js"></script> 
    <script src="/js/bootstrap.js"></script> 
    <script src="/js/bootstrap-select.js"></script> 
    <link href="/assets/css/bootstrap.css" rel="stylesheet" /> 

    <script type="text/javascript"> 
     $(window).on('load', function() { 
      $('.selectpicker').selectpicker({ 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form method="post" action="Test2.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1"> 
<div class="aspNetHidden"> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="Lu54Lc5gUoMcES3FS5vAFbfEDc2WKzPnEz29Y/3ecH2fPQjmLCl030G8zXJfv035qxsI7TaEKDLL7vpb2xD61vH7RnpFzze8sAOGlMFp+Vw=" /> 
</div> 


<script src="/WebResource.axd?d=x2nkrMJGXkMELz33nwnakDs9KKDZZn2GO2GOnzQ8bhnAg5hg1uDK_xxs2F4qGzZL4suzNGfgwk1f_Kqd7w6GL2Mz9JWbGv_Uo50eVnuTPU81&amp;t=634773918900000000" type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
function WebForm_OnSubmit() { 
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false; 
return true; 
} 
//]]> 
</script> 

<div class="aspNetHidden"> 

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="vRZe0MAmYSmodYTkQXHZO1ZKY9EsMANgK1GXMQfTQ/Lke9yD8gU8jV56OwuAerfGHV5FTQnt+m2zQwARykzPYNpaD2HUK+lPDeGfKZazORSavMSQXAZHoeLR8Yzltk+3oS5ytg9B7n2ikrVh+v5DI1Ags0aEZzExyTTjsOFgBxOaBU8PcHXOyE/7XMK3TTOx" /> 
</div> 
    <div> 
     <select name="DropDownList1" id="DropDownList1" class="show-menu-arrow selectpicker"> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 

</select> 
    <input name="TextBox1" type="text" id="TextBox1" /> 
    <span data-val-controltovalidate="TextBox1" data-val-errormessage="RequiredFieldValidator" id="RequiredFieldValidator1" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">RequiredFieldValidator</span> 
    </div> 
    </form> 
</body> 
</html> 
+0

定義「不工作」你在控制檯中有任何錯誤? –

+0

您需要提供更多信息,但我最初的猜測是將'CausesValidation =「false」'添加到DropDownList – Khan

+0

顯示渲染的標記。 –

回答

0

結束時,我終於找到了答案!當我第一次在該項目的頁面上使用驗證器時,出現錯誤:「WebForms UnobtrusiveValidationMode需要爲'jquery'提供ScriptResourceMapping。」

我使用Google搜索和this SO page,我找到了2個解決方案。有人建議禁用ASP.Net 4.5的新功能,另一個建議添加一些代碼來正確配置它。

我拿了後者(加ScriptResourceMappingApplication_Start)。我在我的項目的其他地方遇到了這個問題。

在經歷了幾天的苦苦掙扎而沒有得到答案之後,我突然意識到這可能是問題的原因。

所以我改變了我的代碼,並添加了一些關鍵的Web.config,它現在完美的工作!

0

我覺得你在沒有衝突的版本的實現的jQuery的正確方法。

請嘗試:

<script type="text/javascript"> 
    jQuery.noConflict(); 
    jQuery(window).on('load', function() { 
     jQuery('.selectpicker').selectpicker({ 
     }); 
    }); 
</script> 
+0

它沒有解決問題。 –

0

嘗試調用所有的引導相關的腳本頁面