2

这是我第一次使用我的 ASP MVC3 内网应用程序真正深入研究 jQuery。我需要自动完成功能才能引用数据库中的项目列表。我按照这里找到的教程并认为“好的，这看起来很容易”......现在在实现代码并研究其他方法并将我的头撞在键盘上至少四个小时之后，我离完成这项工作还差得远在我写代码之前。

这是视图中的代码，以及库声明。仅供参考 - 我正在接管这个项目，所以你看到的所有其他 javascript/Ajax 都是由比我更有经验的人编写的。我将所有代码都放在本节中，以防万一出现其他问题。

<link href="../../Content/jquery-ui-1.9.2.custom.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">

    $(function () {
       $("#BankName").autocomplete({
          source: '@Url.Action("GetBanks", "AgentTransmission")',
          minLength: 1
    });

    $(function () {
        $("#drpProducerType").change(function () {
            var value = $(this).val();
            if (value == "SoleProprietor") {
                $("#Role").val(value);
                $('#DSSfields').removeClass('noSee');
                $('#DSSfields').addClass('seeMe');
                //alert("Role must be set to \"Sole Proprietor\" as well. Monet will do this for you!");
            }
            else {
                //TO DO: add role stuff here as well
                $('#DSSfields').removeClass('seeMe');
                $('#DSSfields').addClass('noSee');
            }

        });
        $("#Role").change(function () {
            var value = $(this).val();
            if (value == "SoleProprietor") {
                $("#drpProducerType").val(value);
                alert("Producer Type changed to \"Sole Proprietor\" as well");
            }

        });
    });


    function ChangeChannel() {
        //this function called if Market Segment changes, to update the channel
        var pendistcode = document.getElementById('Pendist');
        if (pendistcode == null) alert('Error: Cannot find Market Segment control');

        $.ajax({
            type: 'POST',
            url: '/AgentTransmission/GetChannel/',
            data: { pendist: pendistcode.value },
            success: function (data) {
                //                alert("success: " + data);
                $('#channelName').html(data);
                $('#Channel').val(data);
            },
            error: function (data) {
                alert("failure to obtain Channel name");
            }
        });

        CheckTerritory('channel');

    } //end ChangeChannel

    function CheckTerritory(category) {
        //this function called when changes happen that could change the territory (inddist)

        //if the channel changed, or the alignment indicator, update the Territory
        if ((category == "channel") | (category == "align")) UpdateTerritory();

        //only trigger if the state or zip changed on the aligned address 
        if ((category == "L") && ($('#AlignmentL').attr('checked'))) UpdateTerritory();
        if ((category == "M") && ($('#AlignmentM').attr('checked'))) UpdateTerritory();

    } //end CheckTerritory

    function UpdateTerritory() {

        var i = $('#INDDist').val();
        var p = $('#Pendist').val();
       // alert(":" + i + ":" + p + ":");

        //if ((i == "") || (p == "")) return;
        if (p == "") return;

        if ($('#INDDist').val() == "864") {
            $('#INDDist').val("701");
        }
        else {
            if ($('#INDDist').val() == "") {
                $('#INDDist').val("864");
            }
        }
    } //end UpdateTerritory

    function MoreCompanies(row) {
        //if the user clicks on the plus sign, add more company rows
        if (row == '3') {
            $('#plus2').html(' ');
            $('#row3').removeClass('noSee');
            $('#row3').addClass('seeMe');
        }
        if (row == '4') {
            $('#plus3').html(' ');
            $('#row4').removeClass('noSee');
            $('#row4').addClass('seeMe');
        }
        if (row == '5') {
            $('#plus4').html(' ');
            $('#row5').removeClass('noSee');
            $('#row5').addClass('seeMe');
        }

    } //end MoreCompanies

    function CompanyFields() {

    } //end CompanyFields

    function ShowHideTerritory() {
        alert('sunshine');
    } //end ShowHideTerritory

</script>

自动完成应该在文本框上工作

    <div class="M-editor-label">
        Bank\Agency Name
    </div>
    <div class="M-editor-field">
        @Html.TextBoxFor(model => model.BankName, new { id = "BankName" })
        @Html.ValidationMessageFor(model => model.BankName)
    </div>

这是GetBanks控制器的方法。我已经在这个方法的第一行设置了一个断点，但我一直无法让它命中。

    //GET
    public JsonResult GetBanks(string search)
    {
        var banks = from c in db.BankListMaster.Where(n => n.BankName.Contains(search))
                        select c.BankName;

        banks = banks.Distinct();

        return Json(banks, JsonRequestBehavior.AllowGet);
    }

编辑

如果我用此方法建议的代码替换当前.autocomplete代码，我会在 Chrome 的调试器中收到以下错误：

Uncaught Error: cannot call methods on autocomplete prior to initialization; attempted to call method '/AgentTransmission/GetBanks'

这是新代码，我把它放在与我之前使用的完全相同的位置：

$(document).ready( function() {
  $('#BankName').autocomplete('@Url.Action("GetBanks", "AgentTransmission")', {
      dataType: 'json',
      parse: function(data) {
          var rows = new Array();
          for(var i=0; i<data.length; i++){
              rows[i] = { data:data[i], value:data[i].BankName };
          }
          return rows;
      },
      formatItem: function(row, i, n) {
          return row.BankName + ' - ' + row.Description;
      },
      width: 300,
      mustMatch: true,
  });
});
4

1 回答 1

2

我添加了一组额外的右括号来autocomplete清除它。小部件现在可以正常工作。

$(function () {
   $("#BankNameAuto").autocomplete({
      source: '@Url.Action("GetBanks", "AgentTransmission")',
      minLength: 1
    });
  });
于 2013-04-08T00:40:39.977 回答