• ASP.Net Core: AJAX Form Submit (Post) Example

ASP.Net Core: AJAX Form Submit (Post) Example

  • 561 Views
  • Last Post 28 October 2022
superadmin posted this 27 October 2022

Trong bài viết này, mình sẽ giải thích bằng một ví dụ, cách gửi (đăng) form  từ View  đến Controller  bằng cách sử dụng jQuery AJAX trong ASP.Net Core MVC.

 

Đầu tiên tạo dự án .net core MVC

 ở controller home mình sẽ viết 1 active để nhận yêu cầu từ view theo phương thức HTTPPOST

input đầu vào là dạng parameter/ hoặc object cũng ok 

mình sẽ hướng dẫn dạng tham số trước nhé

code thế này nhé: 

 

        [HttpPost]

        public JsonResult IndexAjax(string firstName, string lastName)

        {

            string name = string.Format("Name: {0} {1}", firstName, lastName); ;

            return Json(new { Status = "success", Name = name });

        }

 

 

View: 

View  bao gồm một form HTML đã được tạo bằng cách sử dụng thuộc tính  Razor Tag attributes với các thuộc tính sau.

   

Ở tag form có các thông số: 

   asp-action - Tên của Action. Trong trường hợp này, tên là IndexAjax.

 

   asp-controller - Tên của Controller. Trong trường hợp này, tên là Home -  trang chủ.

 

   method="post" Phương thức form , tức là GET hoặc POST.

   Trong trường hợp này, nó sẽ được đặt thành POST.

   Có hai trường TextBox được tạo để nhập các giá trị cho Tên và Họ.

  Ngoài ra còn có một button HTML ở cuối Form  đã được chỉ định với trình xử lý sự kiện JavaScript OnClick.

  Khi nhấp vào nút Gửi, hàm JavaScript AjaxFormSubmit được gọi.

 

   Mình sẽ viết script function như sao:

 

Khi button Submit sẽ gọi hàm: 

lấy data từ các input thêm vào đối tượng FormData.

Và post về action IndeAjax và trả kết quả json về client 

 

và đây là kết quả: 

Souce code: 

 

Order By: Standard | Newest | Votes
superadmin posted this 28 October 2022

Souce code: Controller

 

using DemoTestCode.Models;

using Microsoft.AspNetCore.Mvc;

using System.Diagnostics;

 

namespace DemoTestCode.Controllers

{

    public class HomeController : Controller

    {

        private readonly ILogger<HomeController> _logger;

 

        public HomeController(ILogger<HomeController> logger)

        {

            _logger = logger;

        }

 

        public IActionResult Index()

        {

            return View();

        }

 

        public IActionResult IndexAjax()

        {

            return View();

        }

 

        [HttpPost]

        public JsonResult IndexAjax(string firstName, string lastName)

        {

            string name = string.Format("Name: {0} {1}", firstName, lastName); ;

            return Json(new { Status = "success", Name = name });

        }

 

 

        public IActionResult Privacy()

        {

            return View();

        }

 

        [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]

        public IActionResult Error()

        {

            return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });

        }

    }

 

}

superadmin posted this 28 October 2022

Code View:

 

 

    <form id="myForm" method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="IndexAjax">

        <table>

            <tr>

                <td>First Name: </td>

                <td><input type="text" id="txtFirstName"/></td>

            </tr>

            <tr>

                <td>Last Name: </td>

                <td><input type="text" id="txtLastName"/></td>

            </tr>

            <tr>

                <td></td>

                <td><input type="button" value="Submit" onclick="AjaxFormSubmit()"/></td>

            </tr>

        </table>

        <hr/>

        <span id="lblName"></span>

    </form>

 

 

 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">

        function AjaxFormSubmit() {

            //Set the URL.

            var url = $("#myForm").attr("action");

 

            //Add the Field values to FormData object.

            var formData = new FormData();

            formData.append("firstName", $("#txtFirstName").val());

            formData.append("lastName", $("#txtLastName").val());

             debugger;

            $.ajax({

                type: 'POST',

                url: url,

                data: formData,

                processData: false,

                contentType: false

            }).done(function (response) {

                

 

                if (response.status == "success") {

                    $("#lblName").html(response.name);

                }

            });

        }

    </script>

 

Categories
Search
Popular Tags
Hot Topics



Close