[Day 24] 當ASP.NET MVC遇到Ajax (二)

2018 iT 邦幫忙鐵人賽

DAY 24

Modern Web

ASP.NET MVC網頁程式介紹系列第 24 篇

2018鐵人賽 asp.net mvc

小魚

2018-01-02 20:39:01

17719 瀏覽

今天繼續昨天的Ajax的分享，
今天分享到後端的部分，
首先在Controller這邊接收Post資料

[HttpPost]
public ActionResult Village(string id = "")
{
    List<Village> list = db.GetVillageList(id);
    string result = "";
    if (list == null)
    {
        //讀取資料庫錯誤
        return Json(result);
    }
    else
    {
        result = JsonConvert.SerializeObject(list);
        return Json(result);
    }
}

先從資料庫抓出List資料，
然後使用之前介紹的第三種方式Json.Net轉換成Json文字，
再回傳到前端讓頁面接收，

下面是抓List資料的Function

public List<Village> GetVillageList(string id)
{
    try
    {
        Connect();
        string sql = @" SELECT `VillageId`, `Village` FROM `Village` WHERE `CityId` = @cityId";
        MySqlCommand cmd = new MySqlCommand(sql, conn);
        cmd.Parameters.Add("@cityId", id);
        List<Village> list = new List<Village>();

        using (MySqlDataReader dr = cmd.ExecuteReader())
        {
            while (dr.Read())
            {
                Village data = new Village();
                data.VillageId = dr["VillageId"].ToString();
                data.VillageName = dr["Village"].ToString();
                list.Add(data);
            }
        }
        return list;
    }
    catch (Exception ex)
    {
        string error = ex.ToString();
        return null;
    }
    finally
    {
        Disconnect();
    }
}

如此結合昨天的前端部分，
就完成了Ajax完整的流程。

--
小弟不才，
如果有謬誤或是要補充的，
都歡迎一起來討論！

[Day 23] 當ASP.NET MVC遇到Ajax (一)

[Day 25] 用ASP.NET MVC 做簡單的註冊及登入系統(一)

系列文

ASP.NET MVC網頁程式介紹共 30 篇

RSS系列文訂閱系列文

248 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 則留言

wilson1966

iT邦研究生 2 級 ‧ 2019-01-23 13:22:45

string sql = "SELECT VillageId,Village FROM Village Where CityId=" + id;

回應 3
檢舉

小魚 iT邦大師 1 級 ‧ 2019-01-23 18:30:59 檢舉

如果id是數字還好,
文字就不適合這樣寫了.

itsteven iT邦新手 5 級 ‧ 2021-05-11 09:04:47 檢舉

string sql = "select VillageId,Village from Village where CityId=@CityId";
cmd.Parameters.AddWithValue("@CityId", id);

請問我這樣寫法好嗎，因為原文好像沒有把cityId的篩選條件寫上去，他會拿到所有的village資料

小魚 iT邦大師 1 級 ‧ 2021-05-11 12:42:29 檢舉

itsteven wilson1966
之後漏寫CityId了...
剛剛有修正了,
不過沒有實機測試過,
看起來應該是沒有錯吧...

要用AddWithValue應該也可以,
實機跑看看能不能跑就知道了.

登入發表回應

zyxa9527

iT邦新手 5 級 ‧ 2020-02-15 09:53:52

我都按照大大的步驟走沒錯誤但都沒成功啟動change的感覺
請問可能是什麼原因呢?

 try {
        $("#city").change(function () {
            var value = $("#city").val();
            console.log(value);

            $.ajax({
                type: "Post",
                url: "../Home/Village?id=" + value,
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                success: function (data) {
                    $("#village").empty();
                    if (data == "") {
                    $("#village").append("<option value=''>請選擇縣111</option>");
                    }
                    else {
                     var jo = JSON.parse(data);
                     $("#village").append("<option value=''>請選擇333</option>");
                     for (i = 0; i < jo.length; i++) {
                         $("#village").append("<option value='" + jo[i].VillageId + "'>" + jo[i].VillageName + "</option>");
                     }
                    }
                },
                failure: function (errMsg) {
                  $("#village").empty();
                  $("#village").append("<option value=''>請選擇縣222</option>");
                }
            })
        });
    }
    catch (e) {
        logMyErrors(e) // 把例外物件傳給錯誤處理器)
    }

回應 2
檢舉

小魚 iT邦大師 1 級 ‧ 2020-02-16 08:57:19 檢舉

F12是個好東西,
先確認是後端的問題的還是前端的問題,
然後...你有載入jQuery了嗎?

zyxa9527 iT邦新手 5 級 ‧ 2020-02-18 09:44:36 檢舉

阿果然是jQuery的問題
後來改路徑就Ok了感謝
學了會看F12之外也上了寶貴的一課

登入發表回應

我要留言

立即登入留言

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙

ASP.NET MVC網頁程式介紹系列 第 24 篇