时间戳

首页 > 解决方案 > 在部分视图下拉列表中未触发更改事件

asp.net-mvc - 在部分视图下拉列表中未触发更改事件

问题描述

我有一个包含 DropdownList 和标签的部分视图。标签的初始值为空白，下拉菜单显示“选择选项”。我在部分视图的底部有一个脚本来处理下拉列表的 On Change 事件，但它永远不会被触发。我在它的开头放了一个断点，但 IDE 只是显示这个断点永远不会被命中。

部分视图代码：

@*model IEnumerable<ArdentTestv6.Repositories.SelectProjectTypes_Result>*@
@*model ArdentTestv6.Repositories.ProjectListEntities*@

@Html.DropDownList("ProjTypeName", 
(IEnumerable<SelectListItem>)ViewBag.ptName, "Select option", new { 
@id="pType" })
<label id="ptid">

</label>

<script type="text/javascript" language="javascript">

$("#pType").change(function () {
    debugger;
    $.ajax({
        url: "ProjectTypes/_ListProjectTypes",
        method: "POST",
        data: "TypeID=" + $(this).val(),
        dataType: "json",
        success: function (response) {
            window.location.reload();
        $("#ptid").val = $(this).val()
            // handle
        }
    });
});
</script>

加载父视图时，下拉列表被填充并正确呈现。渲染父视图的 HTML 源代码如下：

<!DOCTYPE html>
<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.6.2.js"></script>

</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">

            <img src="/Images/logo.jpg" width="576" height="73" />

        </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>
                <li><a href="/ProjectLists">Projects</a></li>
                <li><a href="/Housekeeping">Housekeeping</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container body-content">



<!--<h2>Create New Project</h2>-->
<br />

<form action="/ProjectLists/Create" method="post">    <div class="form-horizontal">
    <h4>Create New Project</h4>
    <hr />


    <div class="form-group">
        <label class="control-label col-md-2" for="Project_Type">Project Type</label>
        <div id="ddlDiv" class="col-md-10">



<select id="pType" name="ProjTypeName"><option value="">Select option</option>
<option value="1">DCO</option>
<option value="2">CPO</option>
<option value="3">TWA</option>
</select>
<label id="ptid">

</label>

<!--<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"> 
</script>-->
<script type="text/javascript" language="javascript">

$("#pType").change(function () {
    debugger;
    $.ajax({
        url: "ProjectTypes/_ListProjectTypes",
        method: "POST",
        data: "TypeID=" + $(this).val(),
        dataType: "json",
        success: function (response) {
            window.location.reload();
        $("#ptid").val = $(this).val()
            // handle
        }
    });
});
</script>
        </div>
    </div>

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

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

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

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

    <div class="form-group">
        <label class="control-label col-md-2" for="DateStart">DateStart</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" data-val="true" data-val-date="The field DateStart must be a date." id="DateStart" name="DateStart" type="datetime" value="" />
            <span class="field-validation-valid text-danger" data-valmsg-for="DateStart" data-valmsg-replace="true"></span>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="DateCompleted">DateCompleted</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" data-val="true" data-val-date="The field DateCompleted must be a date." id="DateCompleted" name="DateCompleted" type="datetime" value="" />
            <span class="field-validation-valid text-danger" data-valmsg-for="DateCompleted" 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="/ProjectLists">Back to List</a>
</div>


    <hr />
    <footer>
        <p>&copy; 2018  - Logged in as Ardent-HP\Ardent</p>
    </footer>
</div>

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

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



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

</body>
</html>

标签： asp.net-mvconchange

解决方案

推荐阅读