2014-04-05 42 views
1

我使用下面的代碼(mvc5),它應該做的基本的東西,但currenlty沒有工作... 有下拉列表框,當用戶從dev的選擇改變爲生產的 用戶和passowrd應該是啓用和用戶可以把值(通過嘲笑與Dev它應該灰色),這是我在模型和創建視圖中的代碼cshtml, 任何想法我是什麼想念這裏,我新到這個話題,所以它可以從基本... everymost ...更改值不工作

我添加NugatJquery ...

我也試着把調試器;腳本並沒有停止......

@model MvcAdmin04.Models.Ad 
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> 
<script src='https://code.jquery.com/ui/1.9.2/jquery-ui.min.js'></script> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.9.1.js"></script> 
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 


@{ 
    ViewBag.Title = "Create"; 
} 

<h2>Create</h2> 

<script type="text/javascript"> 


    $(document).ready(function() { 

     $('select[name="Type"]').change(function() { 

      if ($(this).val() === 'Production') { 

       $('input[name="User"]').prop("disabled", true); 
       $('input[name="Password"]').prop("disabled", true); 
      } 

      else { 
       $('input[name="User"]').prop("disabled", false); 
       $('input[name="Password"]').prop("disabled", false); 
      } 

     }); 
    }); 
</script> 


@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <h4>Ad</h4> 
     <hr /> 
     @Html.ValidationSummary(true) 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Name) 
       @Html.ValidationMessageFor(model => model.Name) 
      </div> 
     </div> 


     <div class="form-group"> 
      @Html.LabelFor(model => model.Type, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.DropDownListFor(model => model.SelectedType, Model.Type) 

      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.User, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.User) 
       @Html.ValidationMessageFor(model => model.User) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.Password, new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.EditorFor(model => model.Password) 
       @Html.ValidationMessageFor(model => model.Password) 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Create" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
} 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 

這是模型類

public class Ad 
    { 
     public int ID { get; set; } 
     public string Name { get; set; } 

     public string User { get; set; } 

     public string Password { get; set; } 
     public string SelectedType { get; set; } 

     public IEnumerable<SelectListItem> Type 
     { 
      get 
      { 
       return new[] 
       { 
        new SelectListItem {Value = "D", Text = "Dev"}, 
        new SelectListItem {Value = "p", Text = "Production"} 
       }; 
      } 
     } 
    } 


    public class AdDBContext : DbContext 
    { 
     public DbSet<Ad> Ad { get; set; } 
    } 
} 

編輯這是生成的HTML

<!DOCTYPE html> 
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> 
<script src='https://code.jquery.com/ui/1.9.2/jquery-ui.min.js'></script> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.9.1.js"></script> 
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Create - My ASP.NET Application</title> 
    <link href="/Content/bootstrap.css" rel="stylesheet"/> 
<link href="/Content/site.css" rel="stylesheet"/> 

    <script src="/Scripts/modernizr-2.7.2.js"></script> 

</head> 
<body> 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="/">Application name</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="/">Home</a></li> 
        <li><a href="/Home/About">About</a></li> 
        <li><a href="/Home/Contact">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
    <div class="container body-content"> 

<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script> 
<script src='https://code.jquery.com/ui/1.9.2/jquery-ui.min.js'></script> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.9.1.js"></script> 
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 




<h2>Create</h2> 

<script type="text/javascript"> 

    debugger; 

    $(document).ready(function() { 

     $('select[name="SelectedType"]').change(function() { 

      if ($(this).val() === 'Production') { 

       $('input[name="User"]').prop("disabled", true); 
       $('input[name="Password"]').prop("disabled", true); 
      } 

      else { 
       $('input[name="User"]').prop("disabled", false); 
       $('input[name="Password"]').prop("disabled", false); 
      } 

     }); 
    }); 

    //debugger; 
    //$(document).ready(function() { 



    // $('select[name="Type"]').change(function() { 

    //  if ($(this).text() === 'Production') 
    //  { 

    //   $('input[name="User"]').prop("disabled", true); 
    //   $('input[name="Password"]').prop("disabled", true); 
    //  } 

    //  else { 
    //   $('input[name="User"]').prop("disabled", false); 
    //   $('input[name="Password"]').prop("disabled", false); 
    //  } 

    // }); 
    //}); 
</script> 


<form action="/Ad/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="5wRMjqbC-JHJITeGyZ4vO5oNxDca2gty3pEbpwvvttC_Rzpt5_TYKz3MRGGO_pZwc2YA1MdpeVTtBdSaUBpYcpgAdD-cO3vr5kX6saypfjc1" /> <div class="form-horizontal"> 
     <h4>Ad</h4> 
     <hr /> 


     <div class="form-group"> 
      <label class="control-label col-md-2" for="Name">Name</label> 
      <div class="col-md-10"> 
       <input class="text-box single-line" id="Name" name="Name" type="text" value="" /> 
       <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span> 
      </div> 
     </div> 


     <div class="form-group"> 
      <label class="control-label col-md-2" for="Type">Type</label> 
      <div class="col-md-10"> 
       <select id="SelectedType" name="SelectedType"><option value="D">Dev</option> 
<option value="p">Production</option> 
</select> 

      </div> 
     </div> 

     <div class="form-group"> 
      <label class="control-label col-md-2" for="User">User</label> 
      <div class="col-md-10"> 
       <input class="text-box single-line" id="User" name="User" type="text" value="" /> 
       <span class="field-validation-valid" data-valmsg-for="User" data-valmsg-replace="true"></span> 
      </div> 
     </div> 

     <div class="form-group"> 
      <label class="control-label col-md-2" for="Password">Password</label> 
      <div class="col-md-10"> 
       <input class="text-box single-line" id="Password" name="Password" type="text" value="" /> 
       <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span> 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Create" class="btn btn-default" /> 
      </div> 
     </div> 
    </div> 
</form> 
<div> 
    <a href="/Ad">Back to List</a> 
</div> 


     <hr /> 
     <footer> 
      <p>&copy; 2014 - My ASP.NET Application</p> 
     </footer> 
    </div> 

    <script src="/Scripts/jquery-2.1.0.js"></script> 

    <script src="/Scripts/bootstrap.js"></script> 
<script src="/Scripts/respond.js"></script> 


    <script src="/bundles/jqueryval"></script> 



<!-- Visual Studio Browser Link --> 
<script type="application/json" id="__browserLink_initializationData"> 
    {"appName":"Chrome","requestId":"09332098e94e4748a99c116ce85ee15c"} 
</script> 
<script type="text/javascript" src="http://localhost:49365/e9b081667d0b4a229d1a83e0178d7868/browserLink" async="async"></script> 
<!-- End Browser Link --> 

</body> 
</html> 
+0

你能發佈生成HTML只是爲了確定? – Incognito

+0

@ Kuma-你是什麼意思生成的HTML,讓我知道如何得到它,我會發布它... –

+0

@Kuma - 此外,我把調試;在開始的腳本中,它並沒有停止... –

回答

1

當你寫@Html.DropdownFor(model=>model.SelectedType,...) select元素的名稱應該是SelectedType本質上不是Type! 因此,如下

$(document).ready(function() { 

    $('select[name="SelectedType"]').change(function() { 

     if ($(this).val() === 'Production') { 

      $('input[name="User"]').prop("disabled", true); 
      $('input[name="Password"]').prop("disabled", true); 
     } 

     else { 
      $('input[name="User"]').prop("disabled", false); 
      $('input[name="Password"]').prop("disabled", false); 
     } 

    }); 
}); 

編輯修改您的JS代碼:請刪除您的兩行代碼,你導入jQuery和jQueryUI的庫兩次

+0

感謝Bellash,我嘗試了它,並沒有正常工作......另外我把關鍵字調試器;在腳本的開頭爲文檔準備好了,它不會停止,有什麼想法? –

+0

這是因爲你導入jquery和jqueryui庫兩次!請刪除這兩行' ' – Bellash

+0

我已經刪除它們,仍然不工作....不停止在調試器中...我也試圖做相反的事情,如刪除第一個,保持第二個,不工作.. –