jQuery Ajaxに基づいて、ドロップダウンフレームのリフレッシュ連動を実現します。


本論文の例では、jQuery Ajaxがドロップダウンフレームのリフレッシュ連動なしの具体的なコードを共有しています。参考にしてください。具体的な内容は以下の通りです。
HTMLコード:

@{
  Layout = null;
}

@using DAL;
@using System.Data;

@{
  AreaDal areaDal = new AreaDal();
  string areaId = ViewBag.areaId;
  DataRow drArea = areaDal.GetArea(areaId);
  string countyId = drArea == null ? "-1" : drArea["countyId"].ToString();
  DataRow drCounty = areaDal.GetCounty(countyId);
  string cityId = drCounty == null ? "-1" : drCounty["cityId"].ToString();
  DataRow drCity = areaDal.GetCity(cityId);
  string provinceId = drCity == null ? "-1" : drCity["provinceId"].ToString();
}

<!DOCTYPE html>
<html>
<head>
  <title>    </title>
  <script type="text/javascript">
    //  
    function select(selId, id, callback) {
      $("#" + selId).val(id);
      if (callback) callback();
    }

    //     
    function getProvinces(callback) {
      $.ajax({
        type: "POST",
        url: "@Url.Content("~/Backstage/Area/GetProvinces")",
        data: {},
        success: function (text) {
          $("#province").html(text);
          if (callback) callback();
        },
        error: function () {
        }
      });
    }

    //     
    function getCities(pid, callback) {
      $.ajax({
        type: "POST",
        url: "@Url.Content("~/Backstage/Area/GetCities")",
        data: { "provinceId": pid, },
        success: function (text) {
          $("#city").html(text);
          if (callback) callback();
        },
        error: function () {
        }
      });
    }

    //      
    function getCounties(pid, callback) {
      $.ajax({
        type: "POST",
        url: "@Url.Content("~/Backstage/Area/GetCounties")",
        data: { "cityId": pid, },
        success: function (text) {
          $("#county").html(text);
          if (callback) callback();
        },
        error: function () {
        }
      });
    }

    //      
    function getAreas(pid, callback) {
      $.ajax({
        type: "POST",
        url: "@Url.Content("~/Backstage/Area/GetAreas")",
        data: { "countyId": pid, },
        success: function (text) {
          $("#area").html(text);
          if (callback) callback();
        },
        error: function () {
        }
      });
    }
  </script>
</head>
<body>
  <select id="province">
    <option value="-1">==   ==</option>
  </select>
  <select id="city">
    <option value="-1">==   ==</option>
  </select>
  <select id="county">
    <option value="-1">==   ==</option>
  </select>
  <select id="area">
    <option value="-1">==   ==</option>
  </select>
  <script type="text/javascript">
    //   
    $("#province").change(function () {
      var id = $(this).find("option:selected").val();
      getCities(id, function () {
        $("#city").change();
      });
    });

    //   
    $("#city").change(function () {
      var id = $(this).find("option:selected").val();
      getCounties(id, function () {
        $("#county").change();
      });
    });

    //    
    $("#county").change(function () {
      var id = $(this).find("option:selected").val();
      getAreas(id, function () {
        $("#area").change();
      });
    });

    getProvinces(function () {
      select("province", '@provinceId', function () {
        getCities('@provinceId', function () {
          select("city", '@cityId', function () {
            getCounties('@cityId', function () {
              select("county", '@countyId', function () {
                getAreas('@countyId', function () {
                  select("area", '@areaId');
                });
              });
            });
          });
        });
      });
    });
  </script>
</body>
</html>
Controllerコード:

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Text;
using System.Web.Mvc;
using DAL;

namespace Controllers.Backstage
{
  /// <summary>
  ///     
  /// </summary>
  public class AreaController : AdminBaseController
  {
    #region        
    private SQLiteHelper.SQLiteHelper sqliteHelper;
    private AreaDal areaDal;

    public AreaController()
    {
      sqliteHelper = new SQLiteHelper.SQLiteHelper();
      areaDal = new AreaDal();
    }
    #endregion

    #region             
    public ActionResult AreaSelect()
    {
      return PartialView();
    }
    #endregion

    #region      
    public ActionResult GetProvinces()
    {
      DataTable dt = areaDal.GetProvincesAll();

      StringBuilder sbHtml = new StringBuilder();
      sbHtml.Append("<option value='-1'>==   ==</option>");
      foreach (DataRow dr in dt.Rows)
      {
        sbHtml.AppendFormat("<option value='{0}'>{1}</option>", dr["id"].ToString(), dr["name"].ToString());
      }

      return Content(sbHtml.ToString());
    }
    #endregion

    #region       
    public ActionResult GetCities(string provinceId)
    {
      DataTable dt = areaDal.GetCities(provinceId);

      StringBuilder sbHtml = new StringBuilder();
      sbHtml.Append("<option value='-1'>==   ==</option>");
      foreach (DataRow dr in dt.Rows)
      {
        sbHtml.AppendFormat("<option value='{0}'>{1}</option>", dr["id"].ToString(), dr["name"].ToString());
      }

      return Content(sbHtml.ToString());
    }
    #endregion

    #region        
    public ActionResult GetCounties(string cityId)
    {
      DataTable dt = areaDal.GetCounties(cityId);

      StringBuilder sbHtml = new StringBuilder();
      sbHtml.Append("<option value='-1'>==   ==</option>");
      foreach (DataRow dr in dt.Rows)
      {
        sbHtml.AppendFormat("<option value='{0}'>{1}</option>", dr["id"].ToString(), dr["name"].ToString());
      }

      return Content(sbHtml.ToString());
    }
    #endregion

    #region         
    public ActionResult GetAreas(string countyId)
    {
      DataTable dt = areaDal.GetAreas(countyId);

      StringBuilder sbHtml = new StringBuilder();
      sbHtml.Append("<option value='-1'>==   ==</option>");
      foreach (DataRow dr in dt.Rows)
      {
        sbHtml.AppendFormat("<option value='{0}'>{1}</option>", dr["id"].ToString(), dr["name"].ToString());
      }

      return Content(sbHtml.ToString());
    }
    #endregion

  }
}
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。