mvc中json格式的使用方法示例

2021-12-15 01:14:34

View: 
<script type="text/javascript">
    $(document).ready(function() {
        GetByJquery();
        $("#ddlProvince").change(function() { GetCity() });
        $("#ddlCity").change(function() { GetDistrict() });
    });
    
    function GetByJquery() { 
        $("#ddlProvince").empty(); //清空省份SELECT控件 
        $.getJSON("/ajax/GetProvinceList", function(data) {
            $.each(data, function(i, item) {
                $("<option></option>")
                    .val(item["ProvinceID"])
                    .text(item["ProvinceName"])
                    .appendTo($("#ddlProvince"));
            });
            GetCity();
        });      
    } 
    function GetCity() { 
        $("#ddlCity").empty(); //清空城市SELECT控件
        var url ="/ajax/GetCityList/" + $("#ddlProvince").val();
        $.getJSON(url, function(data) {
            $.each(data, function(i, item) {
                $("<option></option>")
                    .val(item["CityID"])
                    .text(item["CityName"])
                    .appendTo($("#ddlCity"));
            });
            GetDistrict();
        });
    } 
    function GetDistrict() {
        $("#ddlDistrict").empty(); //清空市区SELECT控件
        var url = "/ajax/GetDistrictList/" + $("#ddlCity").val();
        
        $.getJSON(url, function(data) {
            $.each(data, function(i, item) {
                $("<option></option>")
                    .val(item["DistrictID"])
                    .text(item["DistrictName"])
                    .appendTo($("#ddlDistrict"));
            });
        });
    } 
</script>
<table><tr><td><select id="ddlProvince"/></td><td><select id="ddlCity"/></td><td><select id="ddlDistrict" /></td></tr></table> 
Controller : 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax; 
namespace MvcBBS.Controllers
{
    public class AjaxController : Controller
    {
        //
        // GET: /Ajax/ 
        /// <summary>
        /// 获取所有［省份］数据
        /// </summary>
        public ActionResult GetProvinceList()
        {
            if (!Request.IsAjaxRequest())
            {
                return Content("请不要非法方法,这是不道德的行为！");
            } 
            BLL.Province bll = new MvcBBS.BLL.Province();
            List<MvcBBS.Model.S_Province> modellist = bll.GetProvinceList(); 
            return Json(modellist);
        } 
        /// <summary>
        /// 获取某［省份］的所有［城市］数据
        /// </summary>
        public ActionResult GetCityList(int id)
        {
            if (!Request.IsAjaxRequest())
            {
                return Content("请不要非法方法,这是不道德的行为！");
            }
            BLL.Province bll = new MvcBBS.BLL.Province();
            List<MvcBBS.Model.S_City> modellist = bll.GetCityList(id);
            return Json(modellist);
        } 
        /// <summary>
        /// 获取某［城市］的所有［市区］数据
        /// </summary>
        public ActionResult GetDistrictList(int id)
        {
            if (!Request.IsAjaxRequest())
            {
                return Content("请不要非法方法,这是不道德的行为！");
            } 
            BLL.Province bll = new MvcBBS.BLL.Province();
            List<MvcBBS.Model.S_District> modellist = bll.GetDistrict(id); 
            return Json(modellist);
        } 
    }
}

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>SayHello</title>
    <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    <script type="text/javascript">
        var onsuccess = function () {
            alert("提交成功！");
        }
        $(function () {
            $("#jssubmit").click(function () {
                $.ajax({
                    url: "/ajax/SayHello",
                    type: "POST",
                    data: "str=" + $("#username").val()+"&pwd=4565",
                    success: function (data) {
                        alert(data+"提交成功！");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div>
    <% using (Ajax.BeginForm("SayHello", new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "divresult", OnSuccess = "onsuccess" }))
       {%>
       <input type="text" name="str" />
       <input type="password" name="pwd" />
       <input type="submit" value="Ajax提交" />
    <%} %>
    </div>
    <div id="divresult"></div>
    <div>
        <input type="text" id="username" />
       <input id="jssubmit" type="submit" value=js提交" />
    </div>
</body>
</html>

码农公寓

相关文章