Jquery 从Html.DropDownListFor获取文本_Jquery_Forms_Asp.net Mvc 4

Jquery 从Html.DropDownListFor获取文本

jquery forms asp.net-mvc-4

Jquery 从Html.DropDownListFor获取文本,jquery,forms,asp.net-mvc-4,Jquery,Forms,Asp.net Mvc 4,提交表单时，我需要下拉列表中所选项目的文本值。我的模型只包含一个StatusID和一个描述当我提交表单并获取StatusID属性的关联值时，下拉列表的文本会正确显示，但Description属性为null 提交表单时，我在jQuery中添加了一个JS函数，用于在以下位置检索模型的关联文本值： var selTypeText = $("#StatusID option:selected").text(); 但是，它永远不会进入JS函数内部来命中该断点要让它执行JS函数，我缺少什么？以下是我

提交表单时，我需要下拉列表中所选项目的文本值。我的模型只包含一个StatusID和一个描述

当我提交表单并获取StatusID属性的关联值时，下拉列表的文本会正确显示，但Description属性为null

提交表单时，我在jQuery中添加了一个JS函数，用于在以下位置检索模型的关联文本值：

var selTypeText = $("#StatusID option:selected").text();

但是，它永远不会进入JS函数内部来命中该断点

要让它执行JS函数，我缺少什么？

以下是我的看法：

@model YeagerTechModel.Status
@using YeagerTechResources
@{
    ViewBag.Title = "check for DDL";
}
<h2>
    "Dropdownlistfor retrieval"</h2>
@using (Html.BeginForm("AddSingleStatus", "Status", new AjaxOptions { HttpMethod = "POST", }))
{
    @Html.ValidationSummary(true)
    <table>
        <tr>
            <td>
                <div class="display-label">
                    @Html.LabelFor(model => Model.Description);
                </div>
                <div class="editor-field">
                    @Html.DropDownListFor(model => Model.StatusID, new SelectList((YeagerTechModel.Status[])ViewData["statuses"], "StatusID", "Description"));
                    @Html.ValidationMessageFor(model => Model.StatusID)
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value='@Resources.Add' />
            </td>
        </tr>
    </table>
}

<script>
$(function () {
    $("form").submit(function(){
        var selTypeText= $("#StatusID option:selected").text();
        $("#Description").val(selTypeText);           
    });
});
</script>

@model YeagerTechModel.Status
@使用技术资源
@{
ViewBag.Title=“检查DDL”；
}
“用于检索的下拉列表”
@使用（Html.BeginForm（“AddSingleStatus”，“Status”，新的AjaxOptions{HttpMethod=“POST”，}））
{
@Html.ValidationSummary（true）
@LabelFor（model=>model.Description）；
@Html.DropDownListFor（model=>model.StatusID，新选择列表（（YeagerTechModel.Status[]）视图数据[“Status”]，“StatusID”，“Description”）；
@Html.ValidationMessageFor（model=>model.StatusID）
}
$（函数（）{
$（“表格”）。提交（函数（）{
var selTypeText=$（“#StatusID选项：选中”）.text（）；
$（“#说明”）.val（selTypeText）；
});
});

以下是提交页面前的相关源代码：

<!DOCTYPE html>
<html>
<head>
    <title>check for DDL</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />

    <link href="/Content/kendo/2013.1.703/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/kendo/2013.1.703/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/kendo/2013.1.703/kendo.blueopal.min.css" rel="stylesheet" type="text/css" />
    <link href="/Content/kendo/2013.1.703/kendo.dataviz.blueopal.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/kendo/2013.1.703/jquery.min.js"></script>
    <script src="/Scripts/kendo/2013.1.703/kendo.all.min.js"></script>
    <script src="/Scripts/kendo/2013.1.703/kendo.aspnetmvc.min.js"></script>
    <script src="/Scripts/jquery.validate.min.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="/Scripts/modernizr-2.6.2.js"></script>

<h2>
    "Dropdownlistfor retrieval"</h2>
<form action="/Status/AddSingleStatus?HttpMethod=POST&amp;InsertionMode=Replace&amp;LoadingElementDuration=0" id="form0" method="post"><div class="validation-summary-valid" id="validationSummary"><ul><li style="display:none"></li>
</ul></div>    <table>
        <tr>
            <td>
                <div class="display-label">
                    <label for="Description">Description</label>;
                </div>
                <div class="editor-field">
                    <select id="StatusID" name="StatusID"><option value="1">Not Started</option>
<option value="2">In Progress</option>
<option value="3">Completed</option>
<option value="4">Deferred</option>
<option value="8">Reassigned</option>
<option value="9">NonIssue</option>
<option value="10">In Review</option>
<option value="11">Non Starter</option>
<option value="13">Post Review</option>
<option value="14">Reassigned</option>
</select>;
                    <span class="field-validation-valid" id="StatusID_validationMessage"></span>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value='Add' />
            </td>
        </tr>
    </table>
</form><script type="text/javascript">


<script>
$(function () {
    $("form0").submit(function(){
        var selTypeText= $("#StatusID option:selected").text();
        $("#Description").val(selTypeText);           
    });
});
</script>


检查DDL
“用于检索的下拉列表”


描述
没有开始
进行中
完整的
推迟
重新分配
不发行
回顾
非初学者
事后审查
重新分配
;
$（函数（）{
$（“form0”）.submit（函数（）{
var selTypeText=$（“#StatusID选项：选中”）.text（）；
$（“#说明”）.val（selTypeText）；
});
});

尝试将单击处理程序附加到按钮：

$(':submit').click(function () {
    var selTypeText= $("#StatusID option:selected").text();
    $("#Description").val(selTypeText);  
});

或者，您也可以使用id在服务器端检索描述。重新创建存储在

ViewData[“status”]

中的列表，然后执行以下操作：

// where list holds the same list that was set to ViewData["statuses"]
list.Where(x => x.StatusID == idFromPost).First().Description

请尝试将单击处理程序附加到按钮：

$(':submit').click(function () {
    var selTypeText= $("#StatusID option:selected").text();
    $("#Description").val(selTypeText);  
});

或者，您也可以使用id在服务器端检索描述。重新创建存储在

ViewData[“status”]

中的列表，然后执行以下操作：

// where list holds the same list that was set to ViewData["statuses"]
list.Where(x => x.StatusID == idFromPost).First().Description

由于

Description

属性缺少HTML控件，因此未过帐该值

在你的部分：

            <div class="display-label">
                @Html.LabelFor(model => Model.Description);
            </div>

如果不希望在其他控件中显示选定值：

            <div class="display-label" style="display:none;">
                @Html.HiddenFor(model => Model.Description)
            </div>


@Html.HiddenFor（model=>model.Description）

另外，jQuery事件处理程序中有一个小的输入错误：

<script>
$(function () {
    // Here says "form0", it should be: "#form0"
    $("form0").submit(function(){
        var selTypeText= $("#StatusID option:selected").text();
        $("#Description").val(selTypeText);           
    });
});
</script>


$（函数（）{
//这里说的是“form0”，应该是：“form0”
$（“form0”）.submit（函数（）{
var selTypeText=$（“#StatusID选项：选中”）.text（）；
$（“#说明”）.val（selTypeText）；
});
});

或者，您可以使用渐近故障的建议，并使用发布的

StatusID

检索服务器端代码中的描述。这样做的另一个好处是，在表单到达服务器之前，不易受到用户可能的操作。

由于缺少

Description

属性的HTML控件，因此不会发布该值

在你的部分：

            <div class="display-label">
                @Html.LabelFor(model => Model.Description);
            </div>

如果不希望在其他控件中显示选定值：

            <div class="display-label" style="display:none;">
                @Html.HiddenFor(model => Model.Description)
            </div>


@Html.HiddenFor（model=>model.Description）

另外，jQuery事件处理程序中有一个小的输入错误：

<script>
$(function () {
    // Here says "form0", it should be: "#form0"
    $("form0").submit(function(){
        var selTypeText= $("#StatusID option:selected").text();
        $("#Description").val(selTypeText);           
    });
});
</script>


$（函数（）{
//这里说的是“form0”，应该是：“form0”
$（“form0”）.submit（函数（）{
var selTypeText=$（“#StatusID选项：选中”）.text（）；
$（“#说明”）.val（selTypeText）；
});
});

或者，您可以使用渐近故障的建议，并使用发布的

StatusID

检索服务器端代码中的描述。这样做的另一个好处是，在表单到达服务器之前，不易受到用户可能的操作。

它通过服务器端方法工作，但仍然无法进入客户端的JS方法。我希望使用客户机方法，因为我不必返回数据库来重新填充ViewData。我将对我的帖子进行编辑，并向您展示客户端和服务器端代码。如果你有任何想法为什么我的JS没有被击中，我将感谢任何人的回答。非常感谢您的帮助：）我将我的JS函数更改为以下内容，但仍然无法工作$（“#ddlSubmit”）。单击（函数（）{var selTypeText=$（“#StatusID选项：selected”）.text（）；$（“#说明”）.val（selTypeText）；}）；它通过服务器端方法工作，但仍然没有进入客户端的JS方法。我希望使用客户机方法，因为我不必返回数据库来重新填充ViewData。我将对我的帖子进行编辑，并向您展示客户端和服务器端代码。如果你有任何想法为什么我的JS没有被击中，我将感谢任何人的回答。非常感谢您的帮助：）我将我的JS函数更改为以下内容，但仍然无法工作$（'#ddl