Question

几乎完成了这个特定的项目。只是一些松散的结束（这是一个松散的结局但不是很少）我需要使用jquery动态填充下拉列表或某种项目列表。现在我有2个div将从webservice中拉出来。这些Web服务将填充SelectItems。我希望能够在div中按提交然后生成这些数据并将其拉回到我的视图中并显示给用户以用于他的目的...与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方法代码（其中一些代码被保留，因为它不是importatnt 请注意，我根据上面的数组生成表单输入字段。请注意，我有2个嵌套的div。一次潜水有提交，另一次有提交。第一个div是将具有下拉列表的那个...该列表由一个简单的SelectItems列表填充，我在控制器中填充并传递给视图...我有一些代码可以从中获取一些数据一项服务，现在如何将其恢复到此视图并填充下拉列表或可能是选择框？我想用Jquery做这件事，但如果我必须采取另一种方式，那就好了。如果你们有关于这个主题的任何教程都很棒......

UPDATE2 从控制器获取JSON数据

好的，我从控制器那里得到了JSON数据......现在我只需用它来填充我的selectBox。

    <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

不确定ListBox是否是最佳选择

最初似乎无法使ListBox不可见。看起来它想在页面加载后立即绑定到数据......这对我的目的不起作用。也许我应该切换到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位置值的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));
         });
     }

在提交MVC上动态填充选择列表

1 个答案: