Получить текст из Html.DropDownListFor

При отправке формы мне нужно текстовое значение выбранного элемента в раскрывающемся списке. Моя модель состоит только из StatusID и описания.Получить текст из Html.DropDownListFor

Текст для раскрывающегося списка отображается правильно и когда я отправляю форму и получаю связанное значение для свойства StatusID, но свойство Description равно null.

Я добавил функцию JS с JQuery, когда форма была отправлена, чтобы получить соответствующее текстовое значение для моей модели на:

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>

источник

2013-09-01 sagesky36

Значения не публикуемое потому, что вам не хватает элемент управления HTML для Description собственности.

В вашем разделе:

  <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-01 20:08:33 Meryovi

Спасибо. Я забыл, что метки LabelFor не публикуют никаких данных ... – sagesky36

Я обновил свой ответ, чтобы выделить небольшую опечатку в одном из ваших селекторов jQuery. Рад помочь. – Meryovi

Попробуйте установить обработчик щелчка на кнопке вместо:

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

В качестве альтернативы вы можете просто получить описание на стороне сервера, используя Я бы. Воссоздать список вы хранящий в ViewData["statuses"] и сделать что-то вроде:

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

источник

2013-09-01 19:31:20 asymptoticFault

Он работает по методу на стороне сервера, но по-прежнему не входит в JS-метод на клиенте. Я надеялся использовать клиентскую методологию, так как мне не нужно было возвращаться в базу данных, чтобы повторно заполнить ViewData. Я сделаю редактирование на свой пост и покажу вам код клиента и сервера. Если у вас есть идеи, почему мой JS не попал, я был бы признателен за ответ от кого-либо. Большое спасибо за вашу помощь. асимптотикаFault :) – sagesky36

Я изменил свою функцию JS на следующее, но все еще не работает ... <входной тип = "отправить" ID = "ddlSubmit" value='@Resources.Add»/> – sagesky36

Получить текст из Html.DropDownListFor

ответ

Смежные вопросы