1

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

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

提交表单时，我使用 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>

这是提交页面之前的相关源代码：

<!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>
4

2 回答 2

3

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

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

或者，您可以使用 id 在服务器端检索描述。重新创建您要存储的列表ViewData["statuses"]并执行以下操作：

// where list holds the same list that was set to ViewData["statuses"]
list.Where(x => x.StatusID == idFromPost).First().Description
于 2013-09-01T19:31:20.600 回答
2

该值未发布，因为您缺少该Description属性的 HTML 控件。

在你的部分：

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

您应该添加一个控件（Hidden或您喜欢TextBox的readonly属性），如下所示：

            <div class="display-label">
                @Html.LabelFor(model => Model.Description)
                @Html.TextBoxFor(model => Model.Description, new { @readonly = "readonly" })
            </div>

如果您不想在附加控件中显示所选值：

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

此外，您的 jQuery 事件处理程序中有一个小错字：

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

或者，您可以使用 asymptoticFault 的建议并使用发布的StatusID. 这还有一个额外的好处，那就是在您的表单到达服务器之前不太容易受到用户可能的操作的影响。

于 2013-09-01T20:08:33.327 回答