Question

我正在使用以下代码（mvc5），它应该做基本的事情，但是当前没有工作...... 当用户将选择从 dev更改为生产时，会出现下拉列表框 user和passowrd应该启用，用户可以放置值（通过defult defult它应该变灰），这是我在模型和创建视图cshtml中的代码，任何想法我在这里想念的是什么，我对这个话题不熟悉所以它可以从基本的... ...

我为Nugat添加Jquery ...

我还尝试在脚本中放置调试器; ，但它没有停止......

@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>

Answer 1

当你写@Html.DropdownFor(model=>model.SelectedType,...)时，select元素的名称应该是SelectedType，而不是Type！因此，编辑您的js代码如下

$(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);
        }

    });
});

编辑：请在代码中删除两行，导入jquery和jqueryui库两次

下拉列表中的值更改不起作用

1 个答案: