Dynamically populating select list on submit MVC

Almost done with this particular project. Just a couple of loose ends (this is one hell of a loose end but none-the-less).

I need to dynamically populate a drop down list or some kind of list of items using jquery. Now I have 2 divs that are going to be pulling from webservice's. These webservices are going to be populating a SelectItems. I want to be able to press submit in div a and then generate this data and pull it back into my view and display it to the user to use for his purposes... Same with div b. How can i do this using Jquery? I have seen several tutorials that do this ("listId").change of a previous selectList... Can I even due that with a submit button? I need the submit buttons by the way, because the user will be entering some data to help narrow his selection... Any advice on how one might go about this? I will continue to research this and should I stumble upon a method to do this by myself I will let you know.

UPDATE Here is some of the view code that I have...

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

That would be most of my View method code (some of it is withheld because it isn't importatnt.

Note that I g开发者_StackOverflow社区enerate the form input fields based on that array up above. Note that I have 2 nested divs. One dive has a submit, and the other div has a submit. The first div is the one that will have the drop down list... That list is populated by a simple list of SelectItems that I populate in the controller and pass to the view... I have some code that will get some data from a service, now how can I get it back to this view and populate maybe a Dropdown list or perhaps a select Box? I would like to do it with Jquery, but if I have to do it someother way that is fine. If you guys have any tutorials on this subject that would be fantastic...

UPDATE2 Getting JSON data back from controller

Ok, I am getting JSON data back from the controller... Now I just have to populate my selectBox with it.

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

my select box:

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

JavaScript function that attempts to populate select Box:

    $(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(""));
        });
    });
});

It is not working that being said... What could the problem be?

UPDATE3

Not sure if ListBox is the best choice

Can't seem to make ListBox invisible initially. It looks like it wants to bind to data as soon as the page loads... That will not work for my purposes. Maybe I should switch to dropDownList...

---

First, the 1st select list:

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

Now call to JSON function:

 $("#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
     });
 }

now populate the 2nd dropdown. Sample type selection in first selectlist call the controller using JSON and returns a JSON object populated with the values for Sample location and then loops through to populate the 2nd dropdown. This works for me, and probably the only code you need is the last javascript function, 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));
         });
     }