Динамически заполненный список выбора при отправке MVC - PullRequest
0 голосов
/ 28 июля 2011

Почти сделано с этим конкретным проектом.Просто пара свободных концов (это чертовски свободный конец, но тем не менее).
Мне нужно динамически заполнить выпадающий список или какой-то список элементов, используя jquery.Теперь у меня есть 2 деления, которые будут извлекать из веб-службы.Эти веб-сервисы будут заполнять SelectItems.Я хочу иметь возможность нажать «Отправить» в div a, а затем сгенерировать эти данные, вернуть их себе в представление и показать их пользователю для использования в своих целях ... То же самое с div b.Как я могу сделать это с помощью Jquery?Я видел несколько учебных пособий, которые делают это ("listId"). Изменение предыдущего списка selectList ... Могу ли я даже сделать это с помощью кнопки отправки?Кстати, мне нужны кнопки отправки, потому что пользователь будет вводить некоторые данные, чтобы сузить свой выбор ... Любой совет, как можно поступить по этому поводу?Я буду продолжать исследовать это, и если я наткнусь на метод, который сделает это сам, я сообщу вам.

ОБНОВЛЕНИЕ Вот некоторые из представленных мной кодов представления ...

<%using (Html.BeginForm("AddPatient", "PatientACO", new { @PopID = Model },  
FormMethod.Post, new { name = "addPat", id = "addPatiD" }))
{ %>

 <div style="float: right; width: 450px; height: 337px;">
<%

  string[] paths = new string[13];
  paths[0] = "FirstName";
  paths[1] = "LastName";
  paths[2] = "DateOfBirth";
  paths[3] = "City";
  paths[4] = "State";
  paths[5] = "Country";
  paths[6] = "Postal Code";
  paths[7] = "deathIndicator";
  paths[8] = "email";
  paths[9] = "gender";
  paths[10] = "language";
  paths[11] = "NextOfKin";
  paths[12] = "Phone";
 %>
 Other Criteria<br />
 <table>

 <%foreach (string name in paths)
 {
  if ((name.CompareTo("MRN") != 0) || (name.CompareTo("DateOfBirth") != 0) ||          name.CompareTo("DischargeDateTime") != 0) || (name.CompareTo("AdminDate") != 0) || (name.CompareTo("PCPAppointmentDateTime") != 0))
  {
      //Response.Write("<p>");
      %><%=Html.TextBox(string.Format("{0}", name), null)%><%
      Response.Write("<br />");
  }
  if ((name.CompareTo("DateOfBirth") == 0) || (name.CompareTo("DischargeDateTime") == 0) || (name.CompareTo("AdminDate") == 0) || (name.CompareTo("PCPAppointmentDateTime") == 0))
  {
      //Response.Write("<p>");
      %><%=Html.TextBox(string.Format("{0}", name), (name.Contains("Date") ?   DateTime.Today.ToString() : string.Empty), new { @class = "datepicker" })%><%
      Response.Write("<br />");
     }
  }  
  %>
 </table>
 <input id="DemoSubmit" type="submit" value="Search By Other" class="button"   style="float: left; width:auto;"/>
  </div>

  <%
  }%>
    <% using (Html.BeginForm("SearchByMRN", "PatientACO", new { @PopID = ViewData["POPID"]}, FormMethod.Post))%>
   <%{%>
<div style="float: left; width: 350px;">
<table>
     Patient MRN   
   <%:Html.TextBox("Identifier Value", "Enter Value", null)%> 
   <%  %>
   <%:Html.DropDownList("MRN", (List<SelectListItem>)ViewData["MRNDROPDOWNLIST"])%>
   <input id="MRNSubmit" type="submit" value="Search By MRN" class="button"                  style="float:    left; width:auto;" />
    </table>
   </div>
   <select id="PatientListToAdd" name="patList" disabled="disabled">
   </select>  
   <div>
   </div>
   <%   } %>

Это будет большая часть моего кода метода View (некоторые из них скрыты, потому что они не импортируются.
Обратите внимание, что я генерирую поля ввода формы на основе этого массива выше. Примечаниечто у меня есть 2 вложенных div. У одного погружения есть отправка, а у другого div есть отправка. Первый div - это тот, у которого будет выпадающий список ... Этот список заполняется простым списком элементов SelectItems, которые я заполняюв контроллере и перейти к представлению ... У меня есть некоторый код, который будет получать некоторые данные из службы, теперь, как я могу вернуть их в это представление и заполнить, возможно, раскрывающийся список или, возможно, поле выбора? Я хотел бысделайте это с Jquery, но если мне придется сделать это каким-то другим способом, это хорошо. Если у вас, ребята, есть какие-то учебники по этому вопросу, которые были бы фантастическими ...

UPDATE2 Getting данные JSON с контроллера

Хорошо, я получаю данные JSON с контроллера ... Теперь мне просто нужно заполнить его selectBox им.

    <input id="MRNSubmit" type="submit" value="Search By MRN" class="button" style="float: left; width:auto;" />

myполе выбора:

    <select id="PatientListToAdd" name="patList" disabled="disabled"></select>

Функция JavaScript, которая пытается заполнить поле выбора:

    $(function () {
    $("#MRNSubmit").click(function (e) {
        e.preventDefault();
        var data = [];
        $.getJSON("/PatientACOController/SearchByDemographic", null, function (data) {
            data = $.map(data, function (item, a) {
                return "<option value=" + item.Value + ">" + item.Text + "</option>";
            });
            $("#PatientListToAdd").html(data.join(""));
        });
    });
});

Это не работает, что говорится ... В чем может быть проблема?

UPDATE3

Не уверен, что ListBox - лучший выбор

Невозможно сделать ListBox невидимым изначально.Похоже, что он хочет привязать к данным, как только страница загружается ... Это не будет работать для моих целей.Может быть, я должен переключиться на dropDownList ...

1 Ответ

0 голосов
/ 17 августа 2015

Во-первых, первый список выбора:

    <td>
        <div class="editor-field">

            @{
var listItems = new List<SelectListItem>();

listItems.Add(new SelectListItem { Text = "", Value = "" });
listItems.Add(new SelectListItem { Text = "Routine", Value = "R" });
listItems.Add(new SelectListItem { Text = "Repeat", Value = "P" });
listItems.Add(new SelectListItem { Text = "Confirmation", Value = "C" });
listItems.Add(new SelectListItem { Text = "Triggered", Value = "T" });
listItems.Add(new SelectListItem { Text = "Assessment", Value = "A" });
listItems.Add(new SelectListItem { Text = "Special", Value = "S" });

            }

            @Html.DropDownListFor(m => m.SampType, listItems, new { @style = "height:28px;" })

        </div>
    </td>

Теперь вызов функции JSON:

 $("#SampType").change(function () {

     $('#SPID').val("");

 function retrieveSamplePoints(thisPWS, thisSampleType) {  
     $.ajax({
         url: "/Home/GetSPIDList/",
         data: { id: thisPWS, sampletype: thisSampleType },
         type: 'POST',
         success: handleGetSamplePointListResponse,
         error: function (xhr) { alert("Error..."); } //ASK JOHN
     });
 }

теперь заполняется 2-й выпадающий список. Выбор типа образца в первом списке выбора вызывает контроллер с использованием JSON и возвращает объект JSON, заполненный значениями для местоположения образца, а затем перебирает цикл, чтобы заполнить второй раскрывающийся список. Это работает для меня, и, вероятно, единственный необходимый вам код - это последняя функция javascript, populateSPIDDropDown.

 //Fill WSFSPID DROPDOWN WITH APPROPRIATE LOCATIONS FOR SAMPLE TYPE
     function handleGetSamplePointListResponse(responseObject) {
         populateSPIDDropDown("WSF", responseObject);
     }

     function populateSPIDDropDown(dropdownId, jsonObject) {
         //alert("inside populate SPIDDropDown");

         //remove all items from list
         $('#' + dropdownId).find('option').remove();

         //add the options in for this list
         $.each(jsonObject, function () {
             $('#' + dropdownId)
          .append($('<option>', { value: this.Value })
          .text(this.Text));
         });
     }
...