動態填充提交MVC的選擇列表

Question

幾乎完成這個特定的項目。只是一些鬆散的結局（這是一個鬆散的結局，但無一例外）。
我需要動態填充下拉列表或某種使用jQuery的項目列表。現在我有2個div將從webservice中拉出。這些Web服務將填充SelectItems。我希望能夠按div提交，然後生成這些數據並將其拉回到我的視圖中，並將其顯示給用戶以用於他的目的...與div相同b。我怎樣才能使用JQuery來做到這一點？我已經看到了幾個這樣做的教程（「listId」）。改變了以前的selectList ...我可以通過提交按鈕來改變它嗎？順便提一下，我需要提交按鈕，因爲用戶將輸入一些數據來幫助縮小他的選擇範圍......關於如何解決這個問題的任何建議？我會繼續研究這一點，如果我偶然發現一種方法可以自己做到這一點，我會讓你知道的。

UPDATE 下面是一些我的看法代碼...

<%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> 
    <% } %> 

這將是我的大部分查看方法的代碼（因爲它沒有importatnt有一些是功不可沒的。
請注意，我基於上面的數組生成表單輸入字段。請注意，我有2個嵌套的div。一個潛水有一個提交，另一個div有一個提交。第一個div是那個有drop下拉列表...這個列表由填充在控制器中的SelectItems的簡單列表填充，並傳遞給視圖...我有一些代碼會得到這樣的結果我的數據來自一個服務，現在我怎樣才能讓它回到這個視圖，並填充一個下拉列表或可能是一個選擇框？我想用Jquery來做，但如果我必須以另一種方式來做，那很好。如果你們有關於這個問題，這將是美妙的任何教程...

UPDATE2從控制器 獲取JSON數據回

好吧，我得到JSON數據從控制器回來...現在我只需要用它填充我的選擇框。

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

我的選擇框：

<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

不知道如果列表框是最好的選擇

似乎無法讓列表框最初不可見的。它看起來像一旦頁面加載就要綁定到數據...這不適合我的目的。也許我應該切換到dropDownList ...

Answer 1

首先，第一個選擇列表：

<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 
    }); 
} 

現在填充第二個下拉菜單。第一個選擇列表中的樣本類型選擇使用JSON調用控制器，並返回填充了Sample location值的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)); 
     }); 
    }