Lập trình ASP.NET MVC – Bài 48: Cách đọc dữ liệu từ file XML và binding ra Dropdownlist bằng Ajax



Mã nguồn bài học Onlineshop:
Khóa học làm dự án thực tế với ASP.NET MVC, WebAPI, AngularJS:
Bài này chúng ta sẽ học cách đọc dữ liệu từ file XML ra Dropdown List sử dụng AJAX và C#.
Bước 1: Thay đổi thêm trường cho database.
Bước 2: Đọc dữ liệu từ XML bằng C#.
Bước 3: Đọc dữ liệu từ JSON trả về trong Javascript.
Bước 4: Binding ra dropdown list
Bước 5: Viết sự kiện onchange cho dropdown list để lấy ra danh sách quận huyện
Mã nguồn:

ASP.NET MVC – #48: Đọc dữ liệu từ XML ra Dropdownlist bằng Ajax | Load data to dropdown XML AJAX

▶ More information about TEDU:
Website:
Hotline: 0966 036 626
Email: tedu.international@gmail.com

▶ CLICK TO SUBSCRIBE:
#tedu #aspnetmvc #mvc

DO NOT REUPLOAD

Nguồn: https://daihocphuongdong.com

Xem thêm bài viết khác: https://daihocphuongdong.com/cong-nghe/

  • Anh ơi !!Em muốn hỏi là nếu muốn mỗi lần thoát ra đăng nhập lại nó lại gọi đến trang xác nhận đăng nhập thì làm thế nào ạ !! EM cảm ơn

    Long Trần 24/05/2020 23:28 Reply
  • Cảm ơn admin! Video rất hay và bổ ích, nhưng có cách nào lưu tên tỉnh thành thay vì ID của nó vào cơ sở liệu không admin?

    Đinh Võ Quan 24/05/2020 23:28 Reply
  • thank you so much

    Nguyễn Cảnh 24/05/2020 23:28 Reply
  • em có làm thêm phần show huyện, xã mà k đc anh giúp em với, phần WardModel là em làm giống phần DistrictModel, em có kiểm tra filde userController.js thì k thấy nhận phần js loadWard..
    em debug thì nó ra ntn: System.InvalidOperationException: 'Sequence contains no matching element'

    code controller:
    public JsonResult LoadWard(int districtID)
    {
    var xmlDoc = XDocument.Load(Server.MapPath(@"~assetsclientdataProvinces_Data.xml"));

    var xElement = xmlDoc.Element("Root").Elements("Item")
    .Single(x => x.Attribute("type").Value == "district" && int.Parse(x.Attribute("id").Value) == districtID);

    var list = new List<WardModel>();
    WardModel precinct = null;
    foreach (var item in xElement.Elements("Item").Where(x => x.Attribute("type").Value == "precinct"))
    {
    precinct = new WardModel();
    precinct.ID = int.Parse(item.Attribute("id").Value);
    precinct.Name = item.Attribute("value").Value;
    precinct.DistrictID = int.Parse(xElement.Attribute("id").Value);
    list.Add(precinct);

    }
    return Json(new
    {
    data = list,
    status = true
    });
    }

    code js:
    var user = {
    init: function () {

    user.loadProvince();
    user.registerEvent();
    },
    registerEvent: function () {
    $('#ddlProvince').off('change').on('change', function () {
    var id = $(this).val();
    if (id != '') {
    user.loadDistrict(parseInt(id));
    user.loadWard(parseInt(id));
    }
    else {
    $('#ddlDistrict').html('');
    $('#ddlWard').html('');

    }
    });
    },

    loadProvince: function () {

    $.ajax({
    url: '/User/LoadProvince',
    type: "POST",
    dataType: "json",
    success: function (response) {
    if (response.status == true) {
    var html = '<option value="">–Chọn tỉnh thành–</option>';
    var data = response.data;
    $.each(data, function (i, item) {
    html += '<option value="' + item.ID + '">' + item.Name + '</option>'
    });
    $('#ddlProvince').html(html);
    }
    }
    })
    },
    loadDistrict: function (id) {
    $.ajax({
    url: '/User/LoadDistrict',
    type: "POST",
    data: { provinceID: id },
    dataType: "json",
    success: function (response) {
    if (response.status == true) {
    var html = '<option value="">–Chọn quận huyện–</option>';
    var data = response.data;
    $.each(data, function (i, item) {
    html += '<option value="' + item.ID + '">' + item.Name + '</option>'
    });
    $('#ddlDistrict').html(html);
    }
    }
    })
    },
    loadWard: function (id) {
    debugger
    $.ajax({
    url: '/User/LoadWard',
    type: "POST",
    data: { districtID: id },
    dataType: "json",
    success: function (response) {
    if (response.status == true) {
    var html = '<option value="">–Chọn phường xã–</option>';
    var data = response.data;
    $.each(data, function (i, item) {
    html += '<option value="' + item.ID + '">' + item.Name + '</option>'
    });
    $('#ddlWard').html(html);
    }
    }
    })
    }
    }
    user.init();

    LVM 24/05/2020 23:28 Reply
  • Chào Toàn. Mình đang làm theo bạn thêm phần Phường xã, mình đã thêm trong userController để gọi sự kiện LoadPrecinct. Tuy nhiên, khi chạy trên nền Firefox thì chương trình bắt được sự kiện LoadPrecinct, còn khi chạy trên Google Chrome thì nó không bắt được. Mong bạn giúp đỡ. Cám ơn bạn.
    Code của mình là:
    var user = {
    init: function () {

    user.loadProvince();
    user.registerEvent();
    },
    registerEvent: function () {
    $('#ddlProvince').off('change').on('change', function () {
    var id = $(this).val();
    if (id != '') {
    user.loadDistrict(parseInt(id));
    }
    else {
    $('#ddlDistrict').html('');
    $('#ddlPrecinct').html('');
    }
    });
    $('#ddlDistrict').off('change').on('change', function () {

    var id = $(this).val();
    var districtid = $('#ddlProvince').val();
    if (id != '') {

    user.loadPrecinct(parseInt(id), parseInt(districtid));

    }
    else {

    $('#ddlPrecinct').html('');

    }

    });
    },
    loadProvince: function () {
    $.ajax({
    url: '/User/LoadProvince',
    type: "POST",
    dataType: "json",
    success: function (response) {
    if (response.status == true) {
    var html = '<option value="">–Chọn tỉnh thành–</option>';
    var data = response.data;
    $.each(data, function (i, item) {
    html += '<option value="' + item.ID + '">' + item.Name + '</option>'
    });
    $('#ddlProvince').html(html);
    }
    }
    })
    },
    loadDistrict: function (id) {
    $.ajax({
    url: '/User/LoadDistrict',
    type: "POST",
    data: { provinceID: id },
    dataType: "json",
    success: function (response) {
    if (response.status == true) {
    var html = '<option value="">–Chọn quận huyện–</option>';
    var data = response.data;
    $.each(data, function (i, item) {
    html += '<option value="' + item.ID + '">' + item.Name + '</option>'
    });
    $('#ddlDistrict').html(html);
    }
    }
    })
    },
    loadPrecinct: function (id, districtid) {
    $.ajax({
    url: '/User/LoadPrecinct',
    type: "POST",
    data: { districtID: id, provinceID: districtid },
    dataType: "json",
    success: function (response) {
    if (response.status == true) {
    var html = '<option value="">–Chọn phường xã–</option>';
    var data = response.data;
    $.each(data, function (i, item) {
    html += '<option value="' + item.ID + '">' + item.Name + '</option>'
    });
    $('#ddlPrecinct').html(html);
    }
    }
    })
    }
    }
    user.init();

    Hưng Đoàn Ngọc 24/05/2020 23:28 Reply
  • Đỉnh của đỉnh, thích ajax từ admin dạy 😀

    Huy Lê 24/05/2020 23:28 Reply
  • Bạn ơi làm Video hướng dẫn đọc file Excel từ folder bằng ExcelDataReader. Thanks!

    Tuan Anh 24/05/2020 23:28 Reply
  • Mình có video hướng dẫn đọc file excel không. Cảm ơn Tedu!

    Tuan Anh 24/05/2020 23:28 Reply
  • Cám ơn thầy Toàn !

    Doan Nguyen Trong 24/05/2020 23:28 Reply
  • Anh Toàn cho em hỏi lúc mình đăng ký thì ID Tỉnh Thành lưu vào database rồi nhưng lúc mình muốn Update dữ liệu thì làm sao để DropdownList nhận đúng ID để show lên vậy ạ? Em làm theo cách của anh nhưng chỉ load được danh sách Tỉnh Thành thôi, lúc lấy từ cơ sở dữ liệu ra để Update nó không hiển thị được tỉnh thành mà mình đã chọn.

    Hoàng Nguyễn Tiến 24/05/2020 23:28 Reply
  • Anh ơi em muốn bind dữ liệu ra TextBoxFor thì làm như nạo ạ. Như ở trong ví dụ này em muốn Thay vì Bind ra dropdownlist thì em Bind ra TextBoxFor thì ở @Html.TextBoxFor() Trong dấu ngoặc thì sẽ làm cú pháp code như nào ạ. Thank Anh

    Hào Đoàn Văn 24/05/2020 23:28 Reply
  • thầy có thể hướng dẫn làm phần product, csdl data type là xml, cách thêm sửa xóa trường này được không, chứ mỗi đọc dữ liệu từ file xml thế thì code tương tác với trường moreimage xml thì làm ra sao ? em khá mơ hồ, nói tóm lại là em không biết làm việc vơi trường này, trường này tương tác với file xml như thế nào, thầy có thể share nguồn hướng dẫn cũng dc không ạ ?

    Trần Công Sáng 24/05/2020 23:28 Reply
  • thầy ơi, cho em hỏi nếu muốn sửa phần quận/huyện này cho user trong phần admin thì phải sửa code thế nào ạ?

    Ryan Frost 24/05/2020 23:28 Reply
  • <3

    Tiến Mai Duy 24/05/2020 23:28 Reply
  • Video hay, chi tiết và chuyên sâu cho người học viết code. Cách viết code javácript của TEDU nhìn rất là pro, sáng nay ngồi viết lại một số function theo kiểu init này nhưng mình lại gặp phải vấn đề là function của mình có tham số truyền vào. Ví dụ mình muốn viết lại hàm ChangeStatus dùng chung cho toàn bộ phần admin. Thì khi viết tham số truyền vào cho nó là chuỗi controller như thế này:
    var common={
    init: function(){
    common.changeStatus(controller);
    common.changeHomview(controller);
    }
    changeStatus: function (controller) {
    // code ….
    }, ( chổ này kết thúc bởi dấu , hay 😉

    changeHomview: function(controller){
    // code …
    }
    common.init();

    Vậy bên view của html thì mình gọi cái hàm này như thế nào? và trong java script giữa các hàm kết thúc bởi dấu ; hay , mình debug mà chưa được

    Trung Nguyễn 24/05/2020 23:28 Reply

Leave a Reply

Your email address will not be published. Required fields are marked *