0

ajax と json について理解できないようです

カスケード ドロップダウンを実行したいのですが、データを div に取得して開始しようとしています。ここにスクリプトがあります

<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
<script src="~/Scripts/jquery-ui-1.8.20.min.js"></script>
<script>

    $(function () {
        $('#funtiontype').change(function () {
            var selectedValue = $(this).val();

            $.ajax(
                {
                  // url: $(this).data('url'),
                  // source: "/EmployeeReps/GetDescription",
                url: "~/EmployeeReps/GetDescription",
                type: 'GET',
                cache: false,
                data: {value: selectedValue },
                success: function (result) {
                      $('#description').html(result.employeelist);
                     }
                });

            });

        });

</script>

そして、コントローラー

[AcceptVerbs(HttpVerbs.Get)]
        public ActionResult GetDescription(string value)
        {

            //get the data from DB
            var employeelist =(from s in db.tble_employeeReps where s.em_function==value 
                             select s);


            return Json(employeelist.ToList(), JsonRequestBehavior.AllowGet);
        }

HTML @using (Html.BeginForm()) {

    <fieldset>

        <div class="editor-label">Function*</div>
        <div class="editor-field">

          <select id = "funtiontype">
               <option value = "">Please Select</option>
               <option value = "Finance">Finance</option>
               <option value = "Non-Finance">Non-Finance</option>
          </select>
        </div>

        <p></p>
        <p>
            <input type="submit" value="Vote" />
        </p>
    </fieldset>
    <div id="description"></div>
}

しかし、私はデータを取得するのに苦労しています。誰でも助けてください

よろしくお願いします

4

1 に答える 1

0

コントローラーのこの行：

        return Json(employeelist.ToList(), JsonRequestBehavior.AllowGet);

従業員のリストを JSON 文字列に変更しています。文字列はオブジェクトの配列です。

あなたのajax呼び出しで：

        $.ajax(
            {
              // url: $(this).data('url'),
              // source: "/EmployeeReps/GetDescription",
            url: "~/EmployeeReps/GetDescription",
            type: 'GET',
            cache: false,
            data: {value: selectedValue },
            success: function (result) {
                  $('#description').html(result.employeelist);
                 }
            });

        });

resultオブジェクトの同じ配列です。 resultと呼ばれるプロパティはありませんemployeelist。実際には従業員の配列になります。

その配列をループして、従業員を表示する HTML を作成する必要があります。

        $.ajax({
            url: "~/EmployeeReps/GetDescription",
            type: 'GET',
            cache: false,
            data: {value: selectedValue },
            success: function (result) {
                var employeeHTML = "";
                for(count = 0; count < result.length; count++) {
                    employeeHTML += "<p>" + result[count].EmployeeName + "</p>"; //your fields here
                }
                $('#description').html(employeeHTML);
            });
        });
于 2013-03-27T17:38:21.063 に答える