Chuyển tới nội dung
Home » Mvc Ajax Form Submit | Short Notes

Mvc Ajax Form Submit | Short Notes

How to change a form in MVC to submit with AJAX

mvc ajax submit form

[Tiêu đề]: Gửi Điêu với Sự Trợ Giúp của jQuery và AJAX: MVC Ajax Submit Form trong Asp.net Core

[Word count]: 1942

I. Giới thiệu:Trong phát triển ứng dụng web, việc gửi và nhận dữ liệu từ form là một nhiệm vụ quan trọng. Với việc sử dụng các công nghệ như Ajax, jQuery và MVC trong Asp.net Core, chúng ta có thể triển khai việc gửi bản mẫu (form) một cách nhanh chóng và không làm gián đoạn trang.

II. AJAX Submit Form MVCKhi xây dựng một trang web động, chúng ta thường muốn gửi form lên server mà không làm tải lại trang hiện tại. Đối tượng XMLHttpRequest (XHR) giúp chúng ta làm điều này một cách dễ dàng. Trong mô hình MVC (Model-View-Controller), việc gửi form bằng cách sử dụng AJAX có một số lợi ích như sau:

1. Gửi bản mẫu mà không làm tải lại trang: Khi người dùng gửi form bằng cách sử dụng AJAX, trang không phải được tải lại hoàn toàn, dẫn đến trải nghiệm người dùng mượt mà hơn.

2. Validation dữ liệu nhanh chóng: Chúng ta có thể thực hiện các kiểm tra và validation trên client side trước khi gửi form lên server. Điều này giúp giảm tải cho server và cung cấp phản hồi nhanh chóng đến người dùng.

III. Asp.net Core Ajax Form PostAsp.net Core cung cấp một tập hợp các phương thức và thuộc tính để hỗ trợ việc gửi form bằng AJAX. Để thực hiện việc này, chúng ta cần xác định các phương thức bắt đầu bằng chữ “HTTP” trong controller:

1. Phương thức HTTPGet trả về một PartialView chứa form:“`csharp[HttpGet]public IActionResult AjaxForm(){return PartialView();}“`

2. Phương thức HTTPPost nhận dữ liệu từ form và tiến hành xử lý:“`csharp[HttpPost]public IActionResult AjaxForm(FormModel formData){// Xử lý dữ liệureturn PartialView(“AjaxSuccess”);}“`

IV. jQuery AJAX Send Form DataĐể gửi form bằng AJAX trong Asp.net Core, chúng ta có thể sử dụng thư viện jQuery. Dưới đây là một ví dụ về cách gửi form bằng AJAX sử dụng jQuery:

“`javascript$(‘#ajaxForm’).submit(function (e) {e.preventDefault();var formData = $(this).serialize();

$.ajax({url: ‘/Controller/AjaxForm’,type: ‘POST’,data: formData,success: function (response) {$(‘#result’).html(response);}});});“`Trong ví dụ trên, chúng ta đã xử lý sự kiện submit của form và gửi dữ liệu với phương thức POST tới URL nơi form sẽ được xử lý bằng ASP.NET Core controller.

V. Ajax Serialize Form DataĐể thu thập dữ liệu từ form và gửi nó bằng AJAX, chúng ta cần serializing dữ liệu form thành một chuỗi. Điều này có thể được thực hiện bằng cách sử dụng phương thức `serialize()` trong jQuery như trong ví dụ dưới đây:

“`javascriptvar formData = $(‘#ajaxForm’).serialize();“`

Hàm `serialize()` tự động lặp qua các phần tử form (input, textarea, select) và thu thập dữ liệu của chúng thành một chuỗi query.

VI. Before Submit Form jQueryTrước khi gửi form bằng AJAX, chúng ta có thể thực hiện một số kiểm tra và xử lý trên client-side. Chẳng hạn, chúng ta có thể kiểm tra xem các trường trong form có được điền đầy đủ hay không. Dưới đây là một ví dụ về cách kiểm tra điều kiện trước khi gửi form:

“`javascript$(‘#ajaxForm’).submit(function (e) {e.preventDefault();

// Kiểm tra điều kiện trước khi gửi formif ($(‘#name’).val() === ”) {alert(‘Vui lòng nhập tên của bạn’);return;}

var formData = $(this).serialize();

$.ajax({url: ‘/Controller/AjaxForm’,type: ‘POST’,data: formData,success: function (response) {$(‘#result’).html(response);}});});“`

VII. Post Model to Controller MVC Using AJAXTrong Asp.net Core MVC, chúng ta có thể gửi một đối tượng model từ form lên server bằng cách sử dụng AJAX. Để thực hiện điều này, chúng ta cần sử dụng phương thức `JSON.stringify()` trong JavaScript để chuyển đổi đối tượng thành một chuỗi JSON và gửi nó:

“`javascript$(‘#ajaxForm’).submit(function (e) {e.preventDefault();var formData = $(‘#ajaxForm’).serializeArray();var jsonData = {};

$(formData).each(function (index, obj) {jsonData[obj.name] = obj.value;});

$.ajax({url: ‘/Controller/AjaxForm’,type: ‘POST’,data: JSON.stringify(jsonData),contentType: ‘application/json’,success: function (response) {$(‘#result’).html(response);}});});“`Trong ví dụ này, chúng ta đã chuyển đổi dữ liệu form thành một mảng JavaScript bằng phương thức `serializeArray()`. Sau đó, chúng ta đã tạo một đối tượng JSON từ mảng này và gửi nó bằng cách sử dụng phương thức `JSON.stringify()`.

VIII. Ajax Call Action Method MVC with ParametersKhi cần truyền các tham số từ form tới controller, chúng ta có thể sử dụng các thuộc tính có tên tương ứng với tên tham số trong controller. Dưới đây là một ví dụ về cách truyền tham số từ form tới controller bằng AJAX:

“`javascript$(‘#ajaxForm’).submit(function (e) {e.preventDefault();var formData = $(this).serialize();

$.ajax({url: ‘/Controller/AjaxForm’,type: ‘POST’,data: formData + ‘¶m1=’ + param1Value + ‘¶m2=’ + param2Value,success: function (response) {$(‘#result’).html(response);}});});“`Trong ví dụ này, chúng ta đã truyền tham số `param1` và `param2` từ form tới controller bằng cách nối chuỗi vào dữ liệu gửi đi.

*FAQs:

Q: AJAX submit form MVC là gì?A: AJAX submit form MVC cho phép gửi form lên server mà không làm tải lại trang. Chúng ta có thể sử dụng AJAX, jQuery và MVC trong Asp.net Core để triển khai tính năng này.

Q: Làm cách nào để gửi form bằng AJAX trong Asp.net Core?A: Chúng ta có thể sử dụng jQuery AJAX để gửi form bằng AJAX trong Asp.net Core. Chúng ta cần xác định phương thức HTTPPost trong controller để nhận dữ liệu từ form và tiến hành xử lý.

Q: Làm cách nào để truyền tham số từ form tới controller bằng AJAX?A: Để truyền tham số từ form tới controller bằng AJAX, chúng ta có thể nối chuỗi tham số vào dữ liệu gửi đi trong phương thức AJAX.

Q: Làm cách nào để kiểm tra điều kiện trước khi gửi form bằng AJAX?A: Chúng ta có thể sử dụng JavaScript để kiểm tra điều kiện trước khi gửi form bằng AJAX. Chẳng hạn, chúng ta có thể kiểm tra xem các trường trong form có được điền đầy đủ hay không.

Từ khoá người dùng tìm kiếm: mvc ajax submit form AJAX submit form MVC, Asp net Core Ajax form post, jQuery ajax send form data, Asp net MVC Ajax post to controller, Ajax serialize form data, Before submit form jQuery, Post model to controller mvc using ajax, Ajax call action method MVC with parameters

Chuyên mục: Top 64 mvc ajax submit form

(#40) Post data using ajax in mvc | Asp.Net MVC 5 tutorial-step by step in Hindi

Xem thêm tại đây: hanoilaw.vn

HttpPostedFileBase ajax post MVC

Mô hình MVC (Model-View-Controller) là một mô hình phát triển phần mềm phổ biến trong lập trình web. Nó giúp chia tách ứng dụng thành ba thành phần chính: Mô hình (Model) dùng để quản lý dữ liệu, Xem (View) dùng để hiển thị dữ liệu và Kiểm soát (Controller) dùng để xử lý logic nghiệp vụ.

Trong MVC, khi người dùng chọn tệp tin để tải lên, nó sẽ được gửi về máy chủ theo mặc định tải lên trang mới hoặc sử dụng biểu mẫu `form` để tải lên tệp tin. Tuy nhiên, với HTTPPostedFileBase Ajax post MVC, chúng ta có thể thực hiện tải lên tệp tin một cách dễ dàng và trơn tru mà không cần tải lại toàn bộ trang web.

Đây là một cách sử dụng HTTPPostedFileBase Ajax post MVC cơ bản:

1. Đầu tiên, chúng ta cần tạo một `View` có một biểu mẫu `form` hoặc một trường tệp tin “ để người dùng có thể chọn tệp tin muốn tải lên.

“`html@using (Html.BeginForm(“UploadFile”, “HomeController”, FormMethod.Post, new { enctype = “multipart/form-data” })){}“`

2. Tiếp theo, chúng ta cần tạo một `Controller` có một phương thức để xử lý tệp tin được tải lên. Trong phương thức này, chúng ta sẽ sử dụng `Request.Files` để truy cập vào danh sách tệp tin đã tải lên.

“`csharp[HttpPost]public ActionResult UploadFile(){try{var file = Request.Files[0];

// Xử lý tệp tin

return Json(new { success = true });}catch (Exception ex){return Json(new { success = false, message = ex.Message });}}“`

3. Tiếp theo, chúng ta cần thêm JavaScript để xử lý sự kiện tải lên. Chúng ta sẽ sử dụng AJAX để gửi tệp tin lên máy chủ mà không cần tải lại hoặc di chuyển đến một trang khác.

“`javascript$(“#fileUpload”).change(function (){var formData = new FormData();var file = this.files[0];formData.append(file.name, file);

$.ajax({url: “/HomeController/UploadFile”,type: “POST”,data: formData,processData: false,contentType: false,success: function (response) {if (response.success) {// Xử lý thành công} else {// Xử lý lỗi}},error: function (xhr, status, error) {// Xử lý lỗi}});});“`

Vậy là chúng ta đã hoàn thành việc tải lên tệp tin sử dụng HTTPPostedFileBase Ajax post MVC. Bằng cách sử dụng phương pháp này, chúng ta có thể tải lên và xử lý tệp tin một cách trơn tru và không gây phiền toái cho người dùng.

**FAQs**

1. **Làm thế nào để xử lý nhiều tệp tin được tải lên cùng một lúc?**Để xử lý nhiều tệp tin được tải lên cùng một lúc, chúng ta cần thay đổi phương thức `Request.Files` để duyệt qua danh sách tệp tin và xử lý từng tệp tin một.

2. **Làm thế nào để kiểm tra kiểu tệp tin được tải lên là hợp lệ?**Để kiểm tra kiểu tệp tin được tải lên, chúng ta có thể sử dụng thuộc tính `ContentType` của đối tượng `HttpPostedFileBase`. Chẳng hạn, để kiểm tra nếu tệp tin là hình ảnh, chúng ta có thể sử dụng điều kiện `if (file.ContentType.StartsWith(“image/”))`.

3. **Làm thế nào để giới hạn kích thước tệp tin được tải lên?**Để giới hạn kích thước tệp tin được tải lên, chúng ta có thể sử dụng thuộc tính `ContentLength` của đối tượng `HttpPostedFileBase`. Chẳng hạn, để giới hạn tệp tin cho phép có kích thước tối đa là 5MB, chúng ta có thể sử dụng điều kiện `if (file.ContentLength <= 5 * 1024 * 1024)`. 4. **Làm thế nào để lưu tệp tin được tải lên vào hệ thống tệp tin?** Để lưu tệp tin được tải lên vào hệ thống tệp tin, chúng ta có thể sử dụng phương thức `SaveAs` của đối tượng `HttpPostedFileBase`. Chẳng hạn, để lưu tệp tin vào thư mục `uploads`, chúng ta có thể sử dụng `file.SaveAs(Server.MapPath(“~/uploads/” + file.FileName))`. HTTPPostedFileBase Ajax post MVC là một công cụ mạnh mẽ cho việc tải lên và xử lý tệp tin trong ứng dụng ASP.NET MVC. Bằng cách sử dụng phương pháp này, chúng ta có thể cung cấp trải nghiệm tốt hơn cho người dùng và xử lý tệp tin một cách hiệu quả.

How to change a form in MVC to submit with AJAX
How to change a form in MVC to submit with AJAX

Short Notes

@Html.BeginForm

BeginForm is an extension method of @HtmlHelper class and used for creating, rendering the form tag in HTML.

For more detail visit this link.

@Ajax.BeginForm

BeginForm is an extension method of @AjaxHelper classes and used for creating, rendering the form tag in HTML. @Ajax.BeginForm Helper method submits the form asynchronously using JavaScript.

For more detail visit the link.

HTML Submit Button using FormAction, FormMehod

This FormAction attribute is new in HTML5 using INPUT type “submit”. FormMethod attribute is where we can define the method of submission “POST” or “GET”.

For more detail visit this link

Using jQuery set form Action property

We can change action property using jQuery and submit the form on the desired action.

For more detail visit this link

Using jQuery AJAX with FormData

We can submit the Form using jQuery Ajax with FormData. It’s a very simple and fast way to submit the form. FormData is used to create an object and pass the form data. This method or way is not good for more fields forms because we have to assign manually the value of form control to FormData object and property.

For more detail visit this link.

Using jQuery AJAX with serializeFormJSON

Using serializeFormJSON will auto pick the value and generate the object that we can get in the POST action method.

What is @Html.BeginForm?

BeginForm is @Html helper method is used to render FormTag as well as to post data from view (Form Data ) to controller.

@Html.BeginForm reduced our work — you have to just specify your ACTION, CONTROLLER and TYPE OF METHOD.

For using this System.Web.Mvc namespace and System.Web.Mvc.dll file are required. By default, in all MVC projects, System.Web.Mvc namespace is already used. @Html helper method is derived from System.Web.Mvc.

In the above image, you can see HTMLHELPER derived from System.Web.Mvc.

Syntax of @Html.BeginForm?

@Html.BeginForm()

There are a total of 13 overloaded ways to use and implement @Html.BeginForm.

In most projects, I used the following overloaded way.

  • @Html.BeginForm(“ActionMethod”,”CotrollerName”)
  • @Html.BeginForm(“ActionMethod”,”CotrollerName”,”FormMethod”)
  • @Html.BeginForm(“ActionMethod”,”CotrollerName”,”RouteValues”,”FormMethod”)
  • @Html.BeginForm(“ActionMethod”,”CotrollerName”,”FormMethod”,”HtmlAttributes”)

How does @Html.BeginForm work?

@Html.BeginForm posts the form to the server.

Type1

@using @Html.BeginForm()

Above goes to same action method name but on the POST side.

Type2

@Html.BeginForm(“ActionMethod”,”CotrollerName”,”FormMethod”) :

This example form is called “ActionMethod” of “ControllerName” with specific “FormMethod”.

E.g.
@Html.BeginForm(“detail”,”EmployeeController”,FormMethod.Post)

What is RouteValues?

Which data travel along with ActionMethod and Controller.

E.g.

http://www.maonjbkalla.weebly.com/courses

(In above URL, you can see there are no route values)

E.g.

http://www.maonjbkalla.weebly.com/courses/1

(In above url you can see 1 is routevalues)

Routevalues accepted by actionmethod.

What is HtmlAttributes?

We can add HtmlAttributes in @Html.BeginForm. HTML attribute like ID, CLASS, STYLE etc.

Syntax

@Html.BeginForm( action, controller, FormMethod, htmlAttributes )

E.g

@Html.BeginForm( “employeelist”, “employee”, FormMethod.Post, new { id=”formid” })

What is FormMethod?

FormMethod is a command which executes form as POST or GET. FormMethod made HTTP request either in GET or POST form.

E.g
@Html.BeginForm( “Login”, “Home”, FormMethod.Post, new { id=”formname” })

Task

We have to create the following screen and send entered data to the server and store into a database table.

We will be do the following to complete the task,

  1. Create Table called tblFriends.
  2. Create Asp.Net MVC Project.
  3. Create Code First Entity Framework dbContext classes.
  4. Create Model FriendModel.
  5. Create an ActionMethod called “FriendDetail” inside HomeController.
  6. Create view called “FriendDetail”

How many ways are there to submit a Form in ASP.NET MVC

Following are the ways to submit the form.

  • @Html.BeginForm with hard-code Action.
  • @Ajax.BeginForm with hard-code Action.
  • HTML Input Submit Button using FormAction, FormMethod attributes.
  • Using jQuery set form Action property.
  • Using jQuery AJAX with FormData.
  • Using jQuery AJAX with serializeFormJSON.
jQuery Ajax CRUD in ASP.NET Core MVC using Popup Dialog
jQuery Ajax CRUD in ASP.NET Core MVC using Popup Dialog

AJAX submit form MVC

AJAX (Asynchronous JavaScript and XML) là một kỹ thuật cho phép gửi và nhận dữ liệu từ máy chủ mà không cần phải tải lại trang web. Kỹ thuật này đã đạt được sự phổ biến rộng rãi và có ứng dụng rất cao trong việc xây dựng các ứng dụng web phức tạp và tương tác người dùng nhanh chóng. Trong bài viết này, chúng ta sẽ tìm hiểu về cách áp dụng kỹ thuật AJAX submit form trong mô hình MVC và các phỏng đoán thường gặp về chủ đề này.

Mô hình MVC (Model-View-Controller) là một mô hình thiết kế phần mềm phổ biến được sử dụng trong phát triển ứng dụng web. Nó chia các thành phần của ứng dụng thành ba phần chính: Model (mô hình), View (giao diện) và Controller (bộ điều khiển). Mô hình MVC giúp tách biệt logic dữ liệu, giao diện và điều khiển, giúp dễ dàng quản lý và bảo trì mã nguồn.

AJAX submit form trong MVC có thể được thực hiện bằng cách sử dụng các thư viện và framework JavaScript như jQuery, AngularJS hoặc ReactJS. Cách thức chính xoay quanh việc sử dụng các sự kiện JavaScript để gọi tới các API đã thiết kế trong phần Controller. Sau đó, dữ liệu được gửi và nhận thông qua các yêu cầu AJAX từ View tới máy chủ và ngược lại.

Đầu tiên, chúng ta cần thiết lập một đối tượng AJAX với các thông số cập nhật dữ liệu như URL, phương thức HTTP và dữ liệu cần gửi đi. Sau đó, chúng ta xử lý kết quả nhận được từ máy chủ, có thể là dữ liệu JSON hoặc HTML, và cập nhật giao diện tương ứng.

Trong mô hình MVC, phần Controller đảm nhiệm xử lý các yêu cầu từ View và cung cấp dữ liệu cho View hiển thị. Việc sử dụng AJAX submit form trong MVC thường diễn ra khi người dùng gửi một yêu cầu từ View và phản hồi của máy chủ được hiển thị ngay lập tức, mà không cần phải tải lại trang web. Ví dụ, khi người dùng nhập thông tin vào một form và nhấn nút submit, dữ liệu được gửi lên máy chủ bằng AJAX và máy chủ trả về kết quả mà không cần phải tải lại trang web.

FAQs (Phỏng đoán thường gặp):

1. Tại sao chúng ta nên sử dụng AJAX submit form trong MVC?– AJAX submit form trong MVC giúp cải thiện trải nghiệm người dùng bằng cách cho phép gửi và nhận dữ liệu mà không cần tải lại trang web. Điều này tạo ra một cảm giác linh hoạt và nhanh chóng, mà người dùng thích.

2. Có những thư viện nào hỗ trợ AJAX submit form trong mô hình MVC?– Có nhiều thư viện và framework hỗ trợ AJAX submit form như jQuery, AngularJS, và ReactJS. Chúng cung cấp các phương pháp và chức năng sẵn để thực hiện AJAX request và xử lý phản hồi từ máy chủ.

3. Có những thách thức nào khi sử dụng AJAX submit form trong MVC?– Một thách thức phổ biến khi sử dụng AJAX submit form trong MVC là quản lý thông tin dữ liệu và xử lý lỗi. Đảm bảo rằng dữ liệu nhập vào là hợp lệ và xử lý các lỗi máy chủ hoặc mạng cũng là một yếu tố quan trọng.

4. AJAX submit form có ảnh hưởng đến SEO không?– Do trang web sử dụng AJAX submit form không tải lại, các công cụ tìm kiếm khó khăn trong việc thu thập thông tin và cập nhật thay đổi trên trang. Để giải quyết vấn đề này, có thể sử dụng các kỹ thuật như AJAX crawling hoặc bổ sung nội dung tĩnh để đảm bảo công cụ tìm kiếm hiểu được nội dung của trang.

5. AJAX submit form có hỗ trợ cho các trình duyệt cũ không?– AJAX submit form có thể được sử dụng trong hầu hết các trình duyệt hiện đại như Chrome, Firefox, Safari và Edge. Tuy nhiên, có thể cần xử lý công việc phụ nếu muốn hỗ trợ trình duyệt cũ như Internet Explorer 11.

6. Có những tài liệu nào giúp tìm hiểu sâu về AJAX submit form trong MVC?– Có nhiều tài liệu trực tuyến, blog và sách về AJAX submit form trong MVC dành cho những người muốn tìm hiểu sâu về chủ đề này. Nếu bạn quan tâm, nên tham khảo tài liệu từ các tác giả như Mozilla Developer Network, jQuery Documentation và AngularJS Documentation.

Trên đây là một số kiến thức về AJAX submit form trong MVC. Hi vọng bài viết đã giúp bạn hiểu rõ hơn về cách áp dụng kỹ thuật này và giải đáp một số phỏng đoán thường gặp. Việc sử dụng AJAX submit form trong MVC không chỉ tăng tính tương tác người dùng mà còn cung cấp trải nghiệm người dùng tốt hơn.

Index

@Ajax.ActionLink(“Add New”, “Create”, new AjaxOptions() { HttpMethod = “GET”, UpdateTargetId = “info”, InsertionMode = InsertionMode.Replace })

@foreach (var item in Model) {

}

@Html.DisplayNameFor(model => model.name) Action
@Html.DisplayFor(modelItem => item.name) @Ajax.ActionLink(“Details”, “Details”, new{ id=item.id}, new AjaxOptions() { HttpMethod = “GET”, UpdateTargetId = “info”, InsertionMode = InsertionMode.Replace })



Create

View Page


@model CrudMvc.Models.myTable @{ ViewBag.Title = "Create"; Layout = "~/Views/Shared/_Layout.cshtml"; }

Asp.Net MVC jQuery AJAX Form Submit using Serialize Form Data into a Model
Asp.Net MVC jQuery AJAX Form Submit using Serialize Form Data into a Model

AJAX submit form MVC

I. AJAX trong mô hình MVC:Trong mô hình MVC, AJAX có thể được sử dụng để tạo biểu mẫu gửi dữ liệu mà không cần tải lại trang web. Điều này giúp tạo ra trải nghiệm người dùng mượt mà hơn và giảm tải cho máy chủ.

1. Tạo biểu mẫu:Đầu tiên, chúng ta cần tạo biểu mẫu HTML cho việc gửi dữ liệu. Biểu mẫu này sẽ gồm các trường nhập liệu (input) và một nút gửi dữ liệu (submit). Thêm vào đó, chúng ta cần một đoạn mã JavaScript để xử lý sự kiện khi người dùng bấm vào nút gửi.

2. Xử lý sự kiện gửi biểu mẫu:Khi người dùng bấm vào nút gửi, đoạn mã JavaScript sẽ được thực thi. Thông thường, nó sẽ sử dụng đối tượng XMLHttpRequest để gửi yêu cầu đến máy chủ. Sau khi nhận được phản hồi từ máy chủ, thông tin có thể được hiển thị trên trang mà không cần tải lại toàn bộ trang web.

3. Xử lý dữ liệu trên máy chủ:Trên máy chủ, chúng ta cần tạo một hàm xử lý yêu cầu gửi từ AJAX. Thông thường, hàm này sẽ nhận dữ liệu từ biểu mẫu và thực hiện các xử lý cần thiết như kiểm tra tính hợp lệ của dữ liệu, lưu trữ vào cơ sở dữ liệu, hoặc trả về kết quả cho trang web.

II. Phần hỏi đáp (FAQs):Dưới đây là một số câu hỏi thường gặp về việc sử dụng AJAX để gửi biểu mẫu trong mô hình MVC:

1. AJAX hoạt động như thế nào?Khi một biểu mẫu được gửi, AJAX sẽ gửi yêu cầu đến máy chủ mà không tải lại trang web. Máy chủ sẽ xử lý yêu cầu và trả về phản hồi. Phản hồi này sẽ được xử lý bởi JavaScript và có thể cập nhật thành phần trang web thích hợp mà không cần tải lại toàn bộ trang web.

2. AJAX có ưu điểm gì?Sử dụng AJAX để gửi biểu mẫu trong mô hình MVC mang lại các ưu điểm như: tăng tốc độ tải trang, cải thiện trải nghiệm người dùng, giảm tải cho máy chủ và tiết kiệm băng thông mạng.

3. Có những hạn chế nào khi sử dụng AJAX?Một vài hạn chế khi sử dụng AJAX là việc phải xử lý các lỗi phản hồi của server, khó xử lý các yêu cầu đa trình duyệt (cross-browser), và không thể gửi dữ liệu qua các tên miền khác (cross-domain).

4. Làm thế nào để kiểm tra tính hợp lệ của dữ liệu gửi đi?Có thể sử dụng các công cụ kiểm tra tính hợp lệ của dữ liệu trên máy chủ và trả về kết quả cho trang web thông qua AJAX. Đồng thời, JavaScript cũng có thể kiểm tra một số kiểu dữ liệu cơ bản (như email, số điện thoại) trước khi gửi yêu cầu đến máy chủ.

5. Có những khó khăn gì khi xử lý dữ liệu trên máy chủ?Xử lý dữ liệu trên máy chủ có thể đối mặt với các khó khăn như quản lý bảo mật, bảo vệ dữ liệu cá nhân của người dùng và kiểm soát lỗi xảy ra.

Trên đây là một số điểm nổi bật về việc sử dụng AJAX để gửi biểu mẫu trong mô hình MVC. AJAX không chỉ giúp tăng cường trải nghiệm người dùng mà còn giúp làm mượt mà quá trình tương tác với trang web. Tuy nhiên, việc sử dụng AJAX cần được thực hiện cẩn thận để đảm bảo bảo mật và tính ổn định của ứng dụng web.

Flow of article

In this article, you will learn the following concepts.

  • What is Form Submit?
  • How many ways to submit the Form?
  • Short Notes on various ways of Form Submission.
  • What is @Html.BeginForm?
  • Syntax of @Html.BeginForm?
  • Explanation of various overloaded method of Html.BeginForm.

    • What is RouteValues?
    • What is HtmlAttributes?
    • What is FormMethod?
  • Task
  • Step by Step Implementation of @Html.BeginForm
    (We will do a POST with @Html.BeginForm)
How to Insert Data into Database in  Asp.net MVC using Jquery Ajax
How to Insert Data into Database in Asp.net MVC using Jquery Ajax

FAST RECAP AND CODES

Here are all important files name and codes:

  1. Web.Config
    Connection String updated,
  1. tblFriend.cs
    Inside the model folder, we had created a class file and created a property as same as mentioned in table tblFriends.

    1. using System;
    2. using System.Collections.Generic;
    3. using System.ComponentModel.DataAnnotations;
    4. using System.Linq;
    5. using System.Web;
    6. namespace MVC_BeginForm.Models
    7. public class tblFriend
    8. [Key]
    9. public int FriendID { get; set; }
    10. public string FriendName { get; set; }
    11. public string CompanyName { get; set; }
    12. public string Email { get; set; }
  1. FriendDetail.cshtml

    1. @model MVC_BeginForm.Models.tblFriend
    2. @{
    3. ViewBag.Title = "FriendDetail";
    4. Layout = "~/Views/Shared/_Layout.cshtml";
    5. Asp net Core Ajax form post

      ASP.NET Core là một framework phát triển ứng dụng web mạnh mẽ và đa nền tảng được phát triển bởi Microsoft. Nó không chỉ hỗ trợ nhiều ngôn ngữ lập trình, như C# và F#, mà còn cho phép bạn xây dựng các ứng dụng web chạy trên các hệ điều hành khác nhau như Windows, MacOS và Linux.

      Ajax, viết tắt của Asynchronous JavaScript and XML, là một phương pháp cho phép tương tác giữa máy khách và máy chủ mà không làm tải lại toàn bộ trang web. Bằng cách sử dụng Ajax, chúng ta có thể gửi yêu cầu và nhận phản hồi từ máy chủ mà không cần làm mất liên lạc với trang web hiện tại.

      Có nhiều cách để thực hiện một Ajax form post trong ASP.NET Core. Trong bài viết này, chúng ta sẽ tập trung vào việc sử dụng thư viện jQuery để đơn giản hóa quá trình lập trình và tăng tính tương thích trên nhiều trình duyệt.

      Đầu tiên, hãy tạo một biểu mẫu HTML đơn giản chứa các trường và nút gửi. Ví dụ, chúng ta sẽ tạo một biểu mẫu đăng ký cho một người dùng với các trường như tên, email và mật khẩu.

      “`html

      “`

      Tiếp theo, chúng ta cần viết mã JavaScript để gửi dữ liệu biểu mẫu đến máy chủ và xử lý phản hồi trả về. Đầu tiên, chúng ta sẽ ngăn chặn việc gửi dữ liệu biểu mẫu một cách truyền thống bằng cách gán một hàm xử lý cho sự kiện submit của biểu mẫu. Sau đó, chúng ta sẽ gửi dữ liệu AJAX bằng cách sử dụng phương thức `$.ajax()` của jQuery.

      “`javascript$(function () {$(‘#registerForm’).submit(function (event) {event.preventDefault();

      var formData = {name: $(‘#name’).val(),email: $(‘#email’).val(),password: $(‘#password’).val()};

      $.ajax({type: ‘POST’,url: ‘/register’,data: formData,success: function (response) {// Xử lý phản hồi từ máy chủ},error: function (xhr, status, error) {// Xử lý lỗi nếu có}});});});“`

      Ở đây, chúng ta đã ngăn chặn mặc định thực hiện gửi biểu mẫu và gửi dữ liệu bằng cách thu thập giá trị của các trường và sử dụng phương thức POST để gửi dữ liệu đến đường dẫn `/register`. Sau đó, chúng ta đã xác định hai hàm xử lý: một cho thành công và một cho lỗi. Chúng ta có thể sử dụng hàm này để thực hiện các hành động sau khi nhận được phản hồi từ máy chủ, chẳng hạn như hiển thị thông báo thành công hoặc chuyển hướng người dùng đến trang khác.

      FAQs:1. Tại sao chúng ta cần sử dụng Ajax trong việc gửi dữ liệu biểu mẫu?Ajax cho phép gửi dữ liệu biểu mẫu mà không làm tải lại toàn bộ trang web, cung cấp trải nghiệm người dùng mượt mà hơn và giữ cho trạng thái của trang không thay đổi.

      2. Tôi có thể sử dụng Ajax trong ASP.NET Core mà không cần jQuery không?Đúng vậy, bạn có thể sử dụng các thư viện JavaScript khác như Axios hoặc Fetch API để gửi dữ liệu Ajax trong ASP.NET Core.

      3. Làm thế nào để xử lý dữ liệu biểu mẫu trên máy chủ ASP.NET Core?Trên máy chủ, bạn có thể sử dụng các tham số hoặc mô hình để ràng buộc và xử lý dữ liệu biểu mẫu được gửi từ phía máy khách. ASP.NET Core cho phép bạn xây dựng các API để thực hiện các xử lý này.

      4. Làm thế nào để hiển thị thông báo lỗi từ phía máy chủ trên máy khách?Khi nhận được phản hồi lỗi từ máy chủ, bạn có thể xử lý lỗi đó trong hàm error và hiển thị thông báo lỗi cho người dùng, ví dụ: `alert(‘Có lỗi xảy ra: ‘ + error)`. Bạn cũng có thể sử dụng các thư viện UI như Bootstrap hoặc Toastr để tạo thông báo lỗi ở giao diện đẹp hơn.

      ASP.NET Core Ajax Form Post tạo ra một cách dễ dàng để gửi và nhận dữ liệu biểu mẫu mà không làm tải lại trang. Qua bài viết này, bạn đã học cách sử dụng Ajax và jQuery để thực hiện thành công việc này.

      Hình ảnh liên quan đến chủ đề mvc ajax submit form

      Link bài viết: mvc ajax submit form.

      Xem thêm thông tin về bài chủ đề này mvc ajax submit form.

      • Asp.Net MVC jQuery AJAX Form Submit using Serialize Form …
      • Submit form using AJAX in Asp.Net mvc 4 – Stack Overflow
      • How to submit a form in asp.net mvc using ajax.beginform
      • MVC: How to submit a form in widget using AJAX call
      • Form Submit using Ajax in ASP.NET MVC – Microsoft TechNet
      • ASP.Net MVC: Submit Form using jQuery – ASPSnippets
      • Ajax form submit in asp.net MVC
      • Form – How to validate a form and submit its data via AJAX
      • jQuery Ajax Upload file Anda Data in MVC Core – Medium

      Xem thêm: https://hanoilaw.vn/category/blog blog

    In this article I will explain with an example, how to submit (post) a Form and send data from View to Controller using jQuery AJAX in ASP.Net Core MVC.
    This article will explain how to create Form Fields and then send data from View to Controller using Form Collection and jQuery AJAX in ASP.Net Core MVC.

    Controller

    The Controller consists of two Action methods.

    Action method for handling GET operation

    Inside this Action method, simply the View is returned.

    Action method for handling AJAX POST operation

    This Action method handles the AJAX Form submission and it accepts the value of the Form elements as parameter.
    Note: The following Action method handles AJAX calls and hence the return type is set to JsonResult.
    The FirstName and LastName values are merged and then returned back to the calling jQuery AJAX function after wrapping it into a JSON object.

    public class HomeController : Controller

    public IActionResult Index()

    return View();

    [HttpPost]

    public JsonResult Index(string firstName, string lastName)

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

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

    View

    The View consists of an HTML Form which has been created using the Razor Tag attributes with the following attributes.

    asp-action – Name of the Action. In this case the name is Index.

    asp-controller – Name of the Controller. In this case the name is Home.

    method – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.

    There are two TextBox fields created for capturing values for First Name and Last Name.

    There’s also an HTML Button at the end of the Form which has been assigned with a JavaScript OnClick event handler.

    When the Submit Button is clicked, the AjaxFormSubmit JavaScript function is called.

    First, the URL of the jQuery AJAX function is set using the value of the Action attribute of the Form.

    Then the values of the TextBoxes are fetched and are added to the FormData object.

    Note: The name specified in the FormData object and the parameter names in the Controller’s Action method must be same in order to fetch values.

    Finally, the received response is displayed using HTML SPAN.

    @{

    Layout = null;

    @addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers

    <br /> Index<br />

    First Name:

    Last Name:

    Screenshot

    Downloads

    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:

    5: How to validate a form using AJAX - Learn AJAX programming
    5: How to validate a form using AJAX - Learn AJAX programming

    Syntax

    $(selector).serialize()

    Here we learn how to submit Ajax Form using Jquery in Asp.net MVC, to keep the content more focused on Ajax Form, I have removed the validation details, so that the content does not looks long and remain focused on Ajax

    Step 1: Let’s design a simple Ajax form with just one textbox and AjaxOptions, we will see how to submit form using ajax jquery!


    Ajax.BeginForm

    is built-in method which takes many parameters, one important parameter AjaxOptions class, which has multiple parameters option while creating a new instance of that class.

    This is how you can create form in razor view.

    @using (Ajax.BeginForm("ajaxPostActionName", "controllerName", FormMethod.Post, new AjaxOptions { OnSuccess = "OnCommentpostSuccess", OnFailure = "OnCommentpostFailure", OnComplete = "OnCommentpostComplete", UpdateTargetId = "commentFormContainer" })) { @Html.AntiForgeryToken() Name : @Html.TextBox("txtCName") }

    Step 2: Add reference of required Jquery files and write Javascript function

    Now we need to write code in controller to capture ajax post form data, this can be done either in ActionResult or JsonResult. In first example we write an ActionResult to capture form data. parameter FormCollection contain form data.

    Step 3: Let's look at the code of ActionResult and see how to return Content(_message)

    [HttpPost] [ValidateAjaxAntiForgeryToken] public ActionResult ajaxPostActionName(FormCollection model) { string _message = null; StringBuilder _str = new StringBuilder(); _str.Append("

    "); _str.Append(string.Format("Name: {0}", model["txtCName"])); _str.Append(string.Format("Date Time: {0}", DateTime.Now)); _str.Append("

    "); _message = string.Format("Thanks {0}, Comment posted successfully on {1}", model["txtCName"],DateTime.Now); return Content(_message); }

    Step 4: Write a JsonResult and return Json(_message) . When you want to return JSON from your controller you need a JsonResult instead of ActionResult. Take a look at JSON result example from Asp.net mvc ajax form

    [HttpPost] [ValidateAjaxAntiForgeryToken] public JsonResult ajaxPostActionName(FormCollection model) { string _message = null; StringBuilder _str = new StringBuilder(); _str.Append("

    "); _str.Append(string.Format("Name: {0}", model["txtCName"])); _str.Append("

    "); // Send email // update /insert database _message = string.Format("Thanks {0}, Comment posted successfully on {1}", model["txtCName"],DateTime.Now); return Json(_message); }

    The difference between above two method is ActionResult returns plain string, and JsonResult return Json object, so if you have a custom object to return to GUI, JsonResult would be preferable

    Remember to use UpdateTargetId property in your Ajax function to update the GUI with message from controller.

    So far, we have seen how to submit ajax form, now another important aspect to make sure that the form is safe from CSRF (cross-site request forgery) attacks.

    Like in non ajax form we could simply add

    @Html.AntiForgeryToken()

    , but for jquery ajax post Anti Forgery Token implementation is done little differently.

    We need to write a small function like example below in our razor file, which will return a string value.

    @functions{ public string getAntiForgeryValue() { string cookieToken, formToken; AntiForgery.GetTokens(null, out cookieToken, out formToken); return cookieToken + ":" + formToken; } }

    Now we need to add the above token value in ajax form header.

    $.ajax( { url: "page-or-view-name", data: JSON.stringify(model_data), type:"post", dataType: "json", success: function(result){ $("#div1").html(result); }, headers: { 'RequestVerificationToken': '@getAntiForgeryValue()' } });

    In controller action we can add AjaxAntiForgeryToken as attribute like

    [ValidateAjaxAntiForgeryToken]

    we have specified in above code.

    You can write a method to validate the token values using

    AntiForgery.Validate(cookieToken, formToken);

    method, receive the values from HttpRequestMessage object.

    void ValidateRequestHeader(HttpRequestMessage request) { string cookieToken = ""; string formToken = ""; IEnumerable>string< tokenHeaders; if (request.Headers.TryGetValues("RequestVerificationToken", out tokenHeaders)) { string[] tokens = tokenHeaders.First().Split(':'); if (tokens.Length == 2) { cookieToken = tokens[0].Trim(); formToken = tokens[1].Trim(); } } AntiForgery.Validate(cookieToken, formToken); }

    Learn more about AntiForgery and CSRF Attacks.

    You also should learn

    Create

    @using (Html.BeginForm()) { @Html.ValidationSummary(true)

    myTable
    @Html.LabelFor(model => model.id)
    @Html.EditorFor(model => model.id) @Html.ValidationMessageFor(model => model.id)
    @Html.LabelFor(model => model.name)
    @Html.EditorFor(model => model.name) @Html.ValidationMessageFor(model => model.name)

    }

    @Html.ActionLink("Back to List", "Index")

    @section Scripts { @Scripts.Render("~/bundles/jqueryval") }

In this article I will explain with an example, how to submit (post) a Form and send data from View to Controller using jQuery AJAX in ASP.Net MVC Razor.
This article will explain how to create Form Fields and then send data from View to Controller using Form Collection and jQuery AJAX in ASP.Net MVC Razor.

Controller

The Controller consists of two Action methods.

Action method for handling GET operation

Inside this Action method, simply the View is returned.

Action method for handling AJAX POST operation

This Action method handles the AJAX Form submission and it accepts the value of the Form elements as parameter.

First, a check is performed whether valid Form values have been submitted and if the Form values are valid a BOOLEAN value TRUE is returned else a BOOLEAN value FALSE is returned.

public class HomeController : Controller

public ActionResult Index()

return View();

[HttpPost]

public ActionResult Index(string firstName, string lastName)

if (!string.IsNullOrEmpty(firstName) && !string.IsNullOrEmpty(lastName))

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

return Json(true);

return Json(false);

View

The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.

ActionName – Name of the Action. In this case the name is Index.

ControllerName – Name of the Controller. In this case the name is Home.

FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.

There are two TextBox fields created for capturing values for First Name and Last Name.

There’s also an HTML Button at the end of the Form which has been assigned with a JavaScript OnClick event handler.

When the Submit Button is clicked, the AjaxFormSubmit JavaScript function is called.

First, the URL of the jQuery AJAX function is set using the value of the Action attribute of the Form.

Then the values of the TextBoxes are fetched and are added to the FormData object.

Note: The name specified in the FormData object and the parameter names in the Controller’s Action method must be same in order to fetch values.

Finally, based on the received BOOLEAN response a JavaScript Alert Message Box with appropriate message is displayed.

@{

Layout = null;

<br /> Index<br />

@using (Html.BeginForm(“Index”, “Home”, FormMethod.Post, new { @id = “myForm” }))

First Name:

Last Name:

Screenshot

Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.

* All browser logos displayed above are property of their respective owners.

Downloads

(#39) Get data using ajax in mvc | mvc tutorial for beginners in .net c#
(#39) Get data using ajax in mvc | mvc tutorial for beginners in .net c#

Asp net Core Ajax form post

Ajax là viết tắt của “Asynchronous JavaScript and XML” – một kỹ thuật phổ biến trong phát triển web. Nó cho phép gửi yêu cầu đến máy chủ và nhận phản hồi mà không cần tải lại trang hoặc chờ đợi. Thành phần chính của Ajax chính là JavaScript, vì vậy, ASP.NET Core Ajax sẽ yêu cầu bạn kiến thức cơ bản về JavaScript.

Để bắt đầu, chúng ta cần thêm thư viện jQuery vào dự án ASP.NET Core của chúng ta. Đối với những ai không quen thuộc, jQuery là một thư viện JavaScript rất mạnh mẽ và đơn giản để thực hiện các yêu cầu Ajax. Bạn có thể sử dụng npm để cài đặt jQuery, hoặc đơn giản là gắn kết nó từ các nguồn tài nguyên bên ngoài.

Sau khi đã có thư viện jQuery, chúng ta có thể bắt đầu tạo một form đơn giản trong ASP.NET Core và sử dụng Ajax để gửi dữ liệu từ form đó đến máy chủ.

Trước tiên, hãy xem xét một ví dụ về form đăng ký người dùng. Form bao gồm các trường như tên, địa chỉ email và mật khẩu. Khi người dùng nhấn nút đăng ký, thông tin từ form sẽ được gửi đến máy chủ và xử lý.

Đầu tiên, hãy tạo form HTML trong tệp cshtml:

“`html

“`

Chúng ta đã thiết lập id và name cho mỗi trường để dễ dàng truy cập thông qua JavaScript. Cần chú ý rằng nút đăng ký có type là “button” thay vì “submit”, bởi vì chúng ta sẽ sử dụng Ajax để gửi form, không phải phương thức gửi thông thường.

Tiếp theo, chúng ta cần viết JavaScript để gửi yêu cầu Ajax:

“`javascript“`

Trong đoạn mã trên, chúng ta đã sử dụng jQuery để chờ đợi sự kiện “ready” của tài liệu. Khi tài liệu sẵn sàng, chúng ta đã gắn một chức năng cho nút đăng ký. Khi người dùng nhấp vào nút đó, chúng ta sẽ lấy giá trị từ mỗi trường và sử dụng phương thức Ajax của jQuery để gửi dữ liệu dưới dạng một yêu cầu POST đến “/Registration/Register” trên máy chủ.

Data truyền cho yêu cầu Ajax bao gồm tên, email và mật khẩu của người dùng. Nếu yêu cầu thành công, chúng ta sẽ cảnh báo người dùng rằng đăng ký thành công. Nếu có lỗi, chúng ta cũng sẽ cảnh báo người dùng về điều đó.

Ở phía máy chủ, chúng ta cần cung cấp một hành động xử lý yêu cầu Ajax. Trong ví dụ này, chúng ta sẽ tạo một hành động “Register” trong một “RegistrationController” đơn giản:

“`csharp[HttpPost]public IActionResult Register(string name, string email, string password){// Xử lý dữ liệu đăng ký ở đây

return Ok();}“`

Trong hành động “Register”, chúng ta nhận các tham số từ yêu cầu Ajax và tiến hành xử lý dữ liệu đăng ký. Trong ví dụ này, tôi đã bỏ qua xử lý thực tế và chỉ trả về một phản hồi “OK”.

Điều này chỉ là một trong số rất nhiều cách sử dụng Ajax trong ASP.NET Core. Bạn có thể sử dụng Ajax để thực hiện mọi loại yêu cầu như trích xuất dữ liệu, cập nhật giao diện người dùng mà không cần tải lại trang, gửi email, tạo / cập nhật dữ liệu trong cơ sở dữ liệu và nhiều hơn nữa. Điều quan trọng là hiểu cách tiếp cận và triển khai nó một cách chính xác.

Các câu hỏi thường gặp (FAQs):

1. ASP.NET Core Ajax khác với Ajax trong ASP.NET truyền thống như thế nào?ASP.NET Core Ajax và Ajax trong ASP.NET truyền thống có cùng mục tiêu là tạo nên giao tiếp không đồng bộ với máy chủ. Sự khác biệt chính là ASP.NET Core Ajax là một phần của ASP.NET Core Framework, hỗ trợ .NET Core ở các phiên bản mới nhất và mang lại nhiều cải tiến trong hiệu suất và tương thích. Trong khi đó, Ajax trong ASP.NET truyền thống hỗ trợ .NET Framework và các phiên bản cũ hơn.

2. Điều gì xảy ra nếu máy chủ không hỗ trợ Ajax?Nếu máy chủ không hỗ trợ Ajax, yêu cầu Ajax sẽ không hoạt động và máy chủ sẽ không thể xử lý các yêu cầu gửi từ Ajax. Vì vậy, việc sử dụng Ajax đòi hỏi sự hỗ trợ từ phía máy chủ.

3. Tại sao chúng ta cần thư viện jQuery để sử dụng Ajax?jQuery là một thư viện JavaScript giúp việc lập trình JavaScript trở nên dễ dàng hơn và cung cấp các phương thức đơn giản và mạnh mẽ để gửi yêu cầu Ajax. Nó làm cho Ajax trở nên trực quan và dễ thực hiện.

4. Điều gì xảy ra nếu yêu cầu Ajax gặp lỗi?Nếu yêu cầu Ajax gặp lỗi, chẳng hạn như máy chủ không phản hồi hoặc có lỗi xảy ra trong quá trình gửi yêu cầu, chúng ta có thể xử lý các lỗi này bằng cách sử dụng các phương thức trong JavaScript để hiển thị thông báo lỗi cho người dùng. Chẳng hạn, trong ví dụ trên, chúng ta đã sử dụng phương thức “error” của Ajax để hiển thị thông báo lỗi.

Hình ảnh liên quan đến chủ đề mvc ajax form submit

Link bài viết: mvc ajax form submit.

Xem thêm thông tin về bài chủ đề này mvc ajax form submit.

  • Asp.Net MVC jQuery AJAX Form Submit using Serialize Form …
  • Submit form using AJAX in Asp.Net mvc 4 – Stack Overflow
  • How to submit a form in asp.net mvc using ajax.beginform
  • MVC: How to submit a form in widget using AJAX call
  • Form Submit using Ajax in ASP.NET MVC – Microsoft TechNet
  • Ajax form submit in asp.net MVC
  • ASP.Net Core: AJAX Form Submit (Post) Example
  • ASP.NET MVC 5 Partial View with Ajax Form – Medium

Xem thêm: https://hanoilaw.vn/category/blog blog

Razor View Engine offers many UI controls, which eases the processing of many UI components when using an integration with the Server side. AJAx form control is one of many UI controls, which is being offered by Razor View engine.

Today, I shall be demonstrating the usage of Razor view engine control i.e. “AJAX Form” control with ASP.NET MVC5 platform.

Following are some prerequisites before you proceed further in this tutorial.

  1. Knowledge of an ASP.NET MVC5.
  2. Knowledge of an HTML.
  3. Knowledge of JavaScript.
  4. Knowledge of Bootstrap.
  5. Knowledge of jQuery.
  6. Knowledge of C# programming.

You can download the complete source code for this tutorial or you can follow the step by step discussion below. The sample code is being developed in Microsoft Visual Studio 2015 Enterprise.

Let’s begin now.

Step 1
Create a new MVC project and name it RazorAjaxControl.

Step 2
Open Views\Shared\_Layout.cshtml file and replace the code given below in it i.e.

  1. <br /> @ViewBag.Title<br />
    @Styles.Render(“~/Content/css”) @Scripts.Render(“~/bundles/modernizr”)

  2. @Styles.Render(“~/Plugin/Ladda-loader/css”)

@RenderBody()



Copyright © @DateTime.Now.Year –

Asma’s Blog

.

All rights reserved.



@*Scripts*@ @Scripts.Render(“~/bundles/jquery”) @Scripts.Render(“~/bundles/jqueryval”) @Scripts.Render(“~/bundles/bootstrap”)



@Scripts.Render(“~/scripts/custom-form”) @RenderSection(“scripts”, required: false)

In the code given above, we have simply added our basic layout.

Step 3Before we move further in this tutorial, we need to first add jquery.unobtrusive-ajax.js library. To add this library, go to Tools->NuGet Package Manager->Manage NuGet Packages for Solution, followed by searching for jquery.unobtrusive-ajax library and install this library into your project, as shown below.

Step 4

Now, open App_Start\BundleConfig.cs file and add jquery.unobtrusive-ajax.js file reference in it by replacing the code given below i.e.

  1. using System.Web;
  2. using System.Web.Optimization;
  3. namespace RazorAjaxControl {
  4. public class BundleConfig {
  5. public static void RegisterBundles(BundleCollection bundles) {
  6. bundles.Add(new ScriptBundle(“~/bundles/jquery”).Include(“~/Scripts/jquery-{version}.js”));
  7. bundles.Add(new ScriptBundle(“~/bundles/jqueryval”).Include(“~/Scripts/jquery.unobtrusive-ajax.js”, “~/Scripts/jquery.unobtrusive-ajax.min.js”, “~/Scripts/jquery.validate*”, “~/Scripts/jquery.validate.unobtrusive.js”, “~/Scripts/jquery.validate.unobtrusive.min.js”));
  8. bundles.Add(new ScriptBundle(“~/bundles/modernizr”).Include(“~/Scripts/modernizr-*”));
  9. bundles.Add(new ScriptBundle(“~/bundles/bootstrap”).Include(“~/Scripts/bootstrap.js”, “~/Scripts/respond.js”));
  10. bundles.Add(new ScriptBundle(“~/scripts/custom-form”).Include(“~/Scripts/custom-form.js”));
  11. bundles.Add(new StyleBundle(“~/Content/css”).Include(“~/Content/bootstrap.css”, “~/Content/site.css”));

In the configuration file given above, we have to simply add the required JavaScript and CSS style sheet files references in to our project.

Step 5
Now, create a new controller and name it Controllers\RazorAjaxController.cs and replace the code given below in it i.e.

  1. namespace RazorAjaxControl.Controllers {
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using System.Security.Claims;
  6. using System.Threading;
  7. using System.Threading.Tasks;
  8. using System.Web;
  9. using System.Web.Mvc;
  10. using Models;
  11. public class RazorAjaxController: Controller {#
  12. region Index view method.#region Get: /RazorAjax/Index
  13. method.
  14. public ActionResult Index() {
  15. try {} catch (Exception ex) {
  16. Console.Write(ex);
  17. return this.View();
  18. }#
  19. endregion# region POST: /RazorAjax/Index
  20. [HttpPost]
  21. [AllowAnonymous]
  22. [ValidateAntiForgeryToken]
  23. public ActionResult Index(RazorAjaxViewModel model) {
  24. try {
  25. if (ModelState.IsValid) {
  26. return this.Json(new {
  27. EnableSuccess = true, SuccessTitle = “Success”, SuccessMsg = model.Text
  28. });
  29. } catch (Exception ex) {
  30. Console.Write(ex);
  31. return this.Json(new {
  32. EnableError = true, ErrorTitle = “Error”, ErrorMsg = “Something goes wrong, please try again later”
  33. });
  34. }#
  35. endregion# endregion

In the code given above, I have simply created HTTP GET & HTTP POST methods. The HTTP POST method above will return a JSON package with our input text.

Step 6
Create Models\RazorAjaxtViewModels.cs model file and replace the code given below in it.

  1. using System.Collections.Generic;
  2. using System.ComponentModel.DataAnnotations;
  3. namespace RazorAjaxControl.Models {
  4. public class RazorAjaxViewModel {
  5. [Required]
  6. [Display(Name = “Text”)]
  7. public string Text {
  8. get;
  9. set;

In the code given above, we have created our simple view model to attach it to our UI.

Step 7
Now, create a new file Views\RazorAjax\Index.cshtml and replace the code given below in it.

  1. @using RazorAjaxControl.Models
  2. @model RazorAjaxControl.Models.RazorAjaxViewModel
  3. @{
  4. ViewBag.Title = “ASP.NET MVC5: Razor Ajax Form Comtrol”;

  5. ASP.NET MVC5: Razor Ajax Form Control


@using (Ajax.BeginForm(“Index”, “RazorAjax”, new AjaxOptions { HttpMethod = “POST”, OnSuccess = “onAjaxRequestSuccess” }, new { @id = “AjaxformId”, @class = “form-horizontal”, role = “form” }))


@Html.AntiForgeryToken()


@Html.TextBoxFor(m => m.Text, new { placeholder = Html.DisplayNameFor(m => m.Text), @class = “form-control” })


@Html.ValidationMessageFor(m => m.Text, “”, new { @class = “text-danger custom-danger” })



In the code given above, we have created a Razor view engine control i.e. AJAX form control with the line of code given below in it.

  1. @using (Ajax.BeginForm(“Index”, “RazorAjax”, new AjaxOptions { HttpMethod = “POST”, OnSuccess = “onAjaxRequestSuccess” }, new { @id = “AjaxformId”, @class = “form-horizontal”, role = “form” }))

In the line of code given above, notice the “OnSuccess” method i.e. “OnAjaxRequestSuccess”. This is JavaScript method, which will be called when a request of form is being posted to the server.

Step 8
Now, create a JavaScript file Scripts\custom-form.js and replace the code given below.

  1. $(document).ready(function() {
  2. $(“#AjaxformId”).submit(function(event) {
  3. var dataString;
  4. event.preventDefault();
  5. event.stopImmediatePropagation();
  6. var action = $(“#AjaxformId”).attr(“action”);
  7. dataString = new FormData($(“#AjaxformId”).get(0));
  8. contentType = false;
  9. processData = false;
  10. $.ajax({
  11. type: “POST”,
  12. url: action,
  13. data: dataString,
  14. dataType: “json”,
  15. contentType: contentType,
  16. processData: processData,
  17. success: function(result) {
  18. onAjaxRequestSuccess(result);
  19. },
  20. error: function(jqXHR, textStatus, errorThrown) {
  21. alert(“fail”);
  22. });
  23. });
  24. });
  25. var onAjaxRequestSuccess = function(result) {
  26. if (result.EnableError) {
  27. alert(result.ErrorMsg);
  28. } else if (result.EnableSuccess) {
  29. alert(result.SuccessMsg);
  30. $(‘#AjaxformId’).get(0).reset();

In the code given above, notice that we have created our AJAX control “OnSuccess” method i.e. “OnAjaxRequestSuccess” and also, we have hooked jQuery form submit method and the reason for this is simple, since we are using AJAX form control. On submitting the request to the Server, our request will be sent two times, where one is sent by AJAX form control and another one is sent by normal form submit request, so we have hooked jQuery submit method, which ensures that our request is sent only once to the Server.

Step 9
Now, execute the project and you will be able to see the output given below.

Conclusion

In this article, you learned about Razor view engine control i.e. AJAX form control. You will also learn to use AJAX form control with an ASP.NET MVC platform.

By Chris on Code and Andy Hattemer

jQuery can be paired with form submission to handle validation. This has the benefit of providing users with feedback on any errors in their input.

In this tutorial, you will be presented with a sample form that communicates to a PHP backend. The form will use jQuery to process a form without a page refresh (using AJAX), indicate any errors, and also display a success message.

Deploy your frontend applications from GitHub using DigitalOcean App Platform. Let DigitalOcean focus on scaling your app.

To complete this tutorial, you will need:

Note: This tutorial does not specify the latest versions of jQuery (currently 3.5.1) or Bootstrap (currently 5.0.0-beta1). However, many of the lessons in this tutorial still pertain to the latest versions.

This tutorial was verified with PHP v7.3.24, jQuery v2.0.3, and Bootstrap v3.0.3.

For the purposes of this tutorial, the backend will be written in PHP.

First, open a terminal window and create a new project directory:


mkdir jquery-form-validation

Navigate to this new project directory:


cd jquery-form-validation

Then, use your code editor to create a new

process.php

file:

This file will take values for

name

,

superheroAlias

. If any of these values are not provided, an error message will be sent back. Many other validations could be performed at this point, but for the purposes of this tutorial, you will only be ensuring these required inputs have been provided. Otherwise, if a value for

name

,

superheroAlias

are present, a success message will be sent back.

Note: In a real-world scenario, the backend would also be responsible for other tasks such as taking the data and saving changes to a database, creating a session, or sending an email.

Now that you have the form processing completed, you can create the form.

For the purposes of this tutorial, Bootstrap will be used to build out the views.

In your project directory, use your code editor to create an

index.html

file:


<br /> jQuery Form Example<br />

Processing an AJAX Form




The CDN (content delivery network) version of Bootstrap and jQuery will be referenced. The form’s

action

will be set to the PHP file that was created earlier. The form will consist of fields for

name

,

superheroAlias

. The form will also need a Submit button.

Open a terminal window and navigate to the project directory. And run the PHP server:


php -S localhost:8000

Visit

localhost:8000

in your web browser and observe the following:

Now that you have the form completed, you can create the script to handle form submission.

To submit a form via AJAX, your script will need to handle four tasks:

In your project directory, use your code editor to create a new

form.js

file:


$(document).ready(function () { $("form").submit(function (event) { var formData = { name: $("#name").val(), email: $("#email").val(), superheroAlias: $("#superheroAlias").val(), }; $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }).done(function (data) { console.log(data); }); event.preventDefault(); }); });

This code retrieves the data from the

name

,

superheroAlias

fields. It then performs an AJAX request to

process.php

with a payload of form data. After a successful connection, the console will log the response data.

event.preventDefault()

is used to prevent the form from behaving by default by reloading the page on submission.

After saving your changes to

form.js

, revisit the

index.html

file with your code editor. Add a reference to the new JavaScript file:


<br /> jQuery Form Example<br />



Now when a user presses the Submit button on the form, the JavaScript code will retrieve all the input values and send a POST request to

process.php

.

Note: You will be using the

.done

callback to handle a successful AJAX request. This used to be called

.success

, but that has since been deprecated in jQuery 1.8+.

Another alternative is to use

serialize

instead of pulling the form information individually.

The PHP script will process the inputs that the AJAX call sent and return the

$data[]

array that was created. You can observe this in your browser’s console after you submit your form:

Now that you have the form logic completed, you can create the script to handle form errors.

In the PHP script, the code checks to ensure that all the fields are required. If a field is not present, an error is sent back.

Revisit

form.js

and add the following highlighted lines of code:


// ... $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }).done(function (data) { console.log(data); if (!data.success) { if (data.errors.name) { $("#name-group").addClass("has-error"); $("#name-group").append( '

' + data.errors.name + "

" ); } if (data.errors.email) { $("#email-group").addClass("has-error"); $("#email-group").append( '

' + data.errors.email + "

" ); } if (data.errors.superheroAlias) { $("#superhero-group").addClass("has-error"); $("#superhero-group").append( '

' + data.errors.superheroAlias + "

" ); } } else { $("form").html( '

' + data.message + "

" ); } }); event.preventDefault(); }); // ...

This code checks to see if the response contains an error for each field. If an error is present, it adds a

has-error

class and appends the error message.

Now, revisit your form in a web browser and experiment with submitting data with the form.

If there are any errors that come back from the server, the form will provide feedback on any required fields:

And if there are no errors that come back from the server, the form will provide feedback for a successful submission:

Every time we submit the form, our errors from our previous submission are still there. You will need to clear them by removing them as soon as the form is submitted again.

Revisit

form.js

and add the following highlighted lines of code:


// ... $("form").submit(function (event) { $(".form-group").removeClass("has-error"); $(".help-block").remove(); // ... }); // ...

This code will remove the

has-error

class from all

.form-group

elements. It will also remove all

.help-block

elements with error messages.

If there is an error connecting to the server, there will be no JSON response from the AJAX call. To prevent users from waiting for a response that will never arrive, you can provide an error message for connection failures.

Revisit

form.js

and add the following highlighted lines of code:


// ... $.ajax({ type: "POST", url: "process.php", data: formData, dataType: "json", encode: true, }) .done(function(data) { // ... }) .fail(function (data) { $("form").html( '

Could not reach server, please try again later.

' ); }); // ...

If the server is broken or down for any reason, a user who attempts to submit a form will get an error message:

Now that you have the server error message complete, you have completed the example form.


$.postinstead of


$.ajax

jQuery also provides a

$.post

shorthand method as an alternative to

$.ajax

.

The

$.ajax

code in

form.js

could be rewritten with

$.post

:


$.post('process.php', function(formData) { // place success code here }) .fail(function(data) { // place error code here });

The advantage of

$.post

is it does not require as much connection configuration to be declared.

In this article, you built a sample form that communicates to a PHP backend with jQuery and displays any errors in the form.

As a next step, you will want to explore more complex validations like valid email addresses and dates. You may also be interested in applying client-side validations that work in the browser.

If you’d like to learn more about JavaScript, check out our JavaScript topic page for exercises and programming projects.

Want to deploy your application quickly? Try Cloudways, the #1 managed hosting provider for small-to-medium businesses, agencies, and developers – for free. DigitalOcean and Cloudways together will give you a reliable, scalable, and hassle-free managed hosting experience with anytime support that makes all your hosting worries a thing of the past. Start with $100 in free credits!

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Hello, can you guide on how to add google recaptcha to the form?

This comment has been deleted

specifically: when I fill out the form (correctly/incorrectly) I can see in the browser console the correct success true/false output, but the form does not deliver the success/fail message, it stays showing the form.

doesn’t seem to work!

This code doesn´t really work anymore: Uncaught ReferenceError: data is not defined is the error at the console. I don´t know why exactly this occurs. I am using php7.4.

Great tutorial! Very helpful!

I ran into one small issue trying to use $.post. If you want to use $.post instead of $.ajax with the code above, you need to add the ‘json’ type after the function:

$.post(‘process.php’, function(formData) { // place success code here }, ‘json’) .fail(function(data) { // place error code here });

Don’t work {“success”:false,“errors”:{“name”:“Name is required.”,“email”:“Email is required.”,“superheroAlias”:“Superhero alias is required.”}}

is not working

Extremely helpful, very simple and concise.

Thanks so much

This is great.

Could you possible include a working example or a download of a build working version?

Click below to sign up and get $200 of credit to try our products over 60 days!

Working on improving health and education, reducing inequality, and spurring economic growth? We’d like to help.

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

There are various types of techniques to submit a form in ASP.NET MVC. This is a series of 4 articles where you will learn various ways of form submission while working in ASP.NET MVC.

This article will increase your knowledge not only for Form Submission but also about the basic terminology of ASP.NET MVC Forms.

Introduction

This article helps beginner and advanced developers get VIEW form data into controller side with help of JQUERY AJAX. In this walk through you will see controller side received data on click of SUBMIT button.

Those who are new will enjoy learning how to make the empty template of Asp.Net MVC ready.

You will learn following things in this article

  • How to add jquery in project
  • Where NuGet stores installed Packages details
  • Jquery Ajax Form Submit using Serializing Form Data into a Model

Create a project called “AspNetMvcJqueryAjaxSerializeForm”

Click Ok to proceed

By default view after “AspNetMvcJqueryAjaxSerializeForm”project created.

In empty project template visual studio will not give any controller , model and view. All three folders called CONTROLLERS, MODELS and VIEWS are blank only Web.Config file exists inside VIEWS folder.

How to add jquery in project?

Now we are going to add Jquery into project with help of NUGET.

Right Click on Project title inside SOLULTION EXPLORER.

Select option called Manage NuGet Packages. . .

Follow the simple steps as given in image

STEPS

  1. Select browse to do search for jquery.
  2. Type “Jquery” to search.
  3. Single click on Jquery
  4. You can select your desired version.
  5. Click on Install

After selecting dialog box, in output window you will get this message:

In the above you can see jquery installed successfully. You can even see Package.config file.

Where NuGet store installed Packages details?

Package.config file maintains the list of NuGet packages.

Now we are going create new CONTROLLER called FriendController.

Right click on CONTROLLERS folder select ADD –> Controller

In FriendController you can see following ACTIONRESULT method is created

  1. Index.
  2. Details
  3. Create — HTTP GET
  4. Create – HTTP POST
  5. Edit — HTTP GET
  6. Edit – HTTP POST
  7. Delete – HTTP GET
  8. Delete – HTTP POST

Now we create model called “FriendModel”

Right click on Models folder.

Select ADD —> Class –>FriendModel (give name FRIENDMODEL)

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. namespace AspNetMvcJqueryAjaxSerializeForm.Models
  6. public class FriendModel
  7. public string FriendName { get; set; }
  8. public string Phone { get; set; }
  9. public string State { get; set; }

Build Project by Right clicking on Solution-Explorer.

At left side bottom you can see “Build Succeeded”.

Again Switch back to FriendController controller.

Right click on Create ActionResult.

Now you can see in Shared folder —> _Layout.cshtml created.

Double click on _Layout.cshtml file:

At bottom Visual Studio added Jquery link that is wrong because

We have added Jquery 3.4.1 .

Copy this link and paste at head section, we had added latest version of jquery and you can cross check in SCRIPTS folder the jquery version.

Change according current version you had downloaded from NuGet.

Move the this line

Code at top following location:

To check if jquery has started working or not you just put the following code at the bottom of Create.cshtml.

Press F5 and execute project you will get following screen:

You can see tin he above screenshot the ready alert box has appeared.

Now switch back to FriendController

Add namespace at top of the file

Using AspNetMvcJqueryAjaxSerializeForm.Models;

We added namespace because our model reside.

Now select Create HTTP Post method rename as AddFriend do following changes:

  1. [HttpPost]
  2. public ActionResult AddFriend(FriendModel fm)
  3. return RedirectToAction(“create”);

Now switch back to Create.cshtml file and update code.

  1. @{
  2. ViewBag.Title = “Create”;
  3. Chứng khoán hôm nay|Nhận định thị trường: VNIndex lan tỏa dòng tiền, phân tích cổ phiếu tiềm năng
    Chứng khoán hôm nay|Nhận định thị trường: VNIndex lan tỏa dòng tiền, phân tích cổ phiếu tiềm năng

    mvc ajax form submit

    Mô hình MVC (Model-View-Controller) là một mô hình phát triển phần mềm được sử dụng rộng rãi trong lĩnh vực phát triển ứng dụng web. Mô hình này chia ứng dụng thành ba phần chính: Model (mô hình), View (giao diện) và Controller (điều khiển).

    Model đại diện cho dữ liệu và nghiệp vụ của ứng dụng. Nó là nơi lưu trữ và xử lý dữ liệu, như truy vấn cơ sở dữ liệu và tương tác với các API bên ngoài.

    View là giao diện hiển thị dữ liệu cho người dùng. Nó thể hiện dữ liệu lấy từ Model và được điều khiển bởi Controller.

    Controller là điều khiển luồng dữ liệu và tương tác giữa Model và View. Nó nhận các yêu cầu từ người dùng thông qua giao diện và xử lý các yêu cầu đó bằng cách tương tác với Model và View.

    CRUD là viết tắt của Create (Tạo), Read (Đọc), Update (Cập nhật) và Delete (Xóa), là các hoạt động cơ bản trong quản lý dữ liệu. Mô hình MVC điều khiển và quản lý việc thực hiện các hoạt động CRUD này trên dữ liệu.

    Sự cần thiết của dữ liệu AJAX và xử lý form trên một trang web

    Dữ liệu AJAX (Asynchronous JavaScript and XML) được sử dụng để trao đổi dữ liệu với máy chủ mà không cần tải lại toàn bộ trang web. Kỹ thuật này giúp làm tăng tốc độ và trải nghiệm người dùng trên trang web.

    Khi người dùng gửi một form trên trang web, thông thường trang web sẽ bị tải lại hoàn toàn để xử lý yêu cầu. Điều này không chỉ làm giảm trải nghiệm của người dùng mà còn tốn thời gian và tài nguyên máy chủ.

    Bằng cách sử dụng AJAX, dữ liệu được gửi đi và nhận về bất đồng bộ, người dùng không cần chờ đợi cho đến khi trang web được tải lại. Điều này giúp giảm thiểu thời gian phản hồi và cải thiện trải nghiệm người dùng.

    Cách tạo một form AJAX sử dụng MVC

    Để tạo một form AJAX sử dụng MVC, chúng ta cần làm các bước sau:

    1. Tạo một form HTML thông thường trong giao diện View.2. Sử dụng JavaScript và jQuery để tránh phản hồi mặc định của form và thay vào đó gửi dữ liệu bằng AJAX.3. Định nghĩa một hàm trong Controller để xử lý yêu cầu và trả về phản hồi.4. Xử lý phản hồi từ phía máy chủ trong JavaScript và cập nhật giao diện dựa trên phản hồi đó.

    Các bước để xử lý form AJAX trên điều khiển

    Để xử lý form AJAX trên điều khiển, chúng ta cần thực hiện các bước sau:

    1. Nhận yêu cầu từ phía máy khách và kiểm tra dữ liệu.2. Thực hiện các thao tác CRUD tương ứng trên dữ liệu nếu dữ liệu hợp lệ.3. Trả về phản hồi về cho phía máy khách với kết quả xử lý.

    Xác thực dữ liệu và kiểm tra lỗi trong form sử dụng MVC

    Để xác thực dữ liệu và kiểm tra lỗi trong form sử dụng MVC, chúng ta cần làm các bước sau:

    1. Sử dụng các công cụ xác thực có sẵn trong MVC, như Data Annotation và ModelState, để xác thực và kiểm tra dữ liệu.2. Định nghĩa các quy tắc xác thực và kiểm tra lỗi trong Model.3. Tạo thông báo lỗi phù hợp để hiển thị cho người dùng trong View dựa trên kết quả kiểm tra lỗi.

    Cách xử lý và lưu dữ liệu form AJAX vào cơ sở dữ liệu

    Để xử lý và lưu dữ liệu form AJAX vào cơ sở dữ liệu, chúng ta cần thực hiện các bước sau:

    1. Nhận dữ liệu từ phía máy khách và kiểm tra tính hợp lệ của dữ liệu.2. Thực hiện các thao tác CRUD tương ứng trên dữ liệu nếu dữ liệu hợp lệ.3. Lưu dữ liệu vào cơ sở dữ liệu và trả về kết quả xử lý cho phía máy khách.

    Hiển thị thông báo và cập nhật giao diện sau khi submit form AJAX

    Sau khi gửi form AJAX và xử lý thành công, chúng ta cần hiển thị thông báo và cập nhật giao diện. Để làm điều này, chúng ta cần thực hiện các bước sau:

    1. Trả về phản hồi từ phía máy chủ và xử lý phản hồi trong JavaScript.2. Hiển thị thông báo thành công hoặc lỗi tùy thuộc vào kết quả xử lý.3. Cập nhật giao diện với dữ liệu mới nếu cần thiết.

    FAQs:

    Q: AJAX submit form MVC là gì?A: AJAX submit form MVC là kỹ thuật sử dụng AJAX để gửi form và xử lý yêu cầu trên mô hình MVC trong phát triển ứng dụng web.

    Q: HttpPostedFileBase ajax post MVC là gì?A: HttpPostedFileBase ajax post MVC là một lớp cung cấp chức năng xử lý và truy cập vào dữ liệu tệp tin được gửi lên từ một form AJAX trong mô hình MVC.

    Q: Asp net Core Ajax form post là gì?A: Asp net Core Ajax form post là một công nghệ của Asp.net Core Framework cho phép gửi và xử lý form bằng AJAX trong mô hình MVC.

    Q: Asp net form submit là gì?A: Asp net form submit là một sự kiện xảy ra khi người dùng gửi form trên trang web Asp.net và được xử lý trên máy chủ.

    Q: jQuery button submit form là gì?A: jQuery button submit form là một API của thư viện jQuery cho phép người dùng kích hoạt sự kiện gửi form khi nhấn vào một nút.

    Q: jQuery post form data là gì?A: jQuery post form data là một phương thức của jQuery cho phép gửi dữ liệu của form bằng phương thức POST đến một địa chỉ máy chủ.

    Q: Asp net MVC Form submit là gì?A: Asp net MVC Form submit là sự kiện xảy ra khi người dùng gửi một form trong ứng dụng Asp.net MVC và được xử lý trên máy chủ.

    Q: jQuery prevent form submit MVC ajax form submit là gì?A: jQuery prevent form submit MVC ajax form submit là một cách để ngăn chặn phản hồi mặc định của form và thay thế bằng việc gửi dữ liệu bằng AJAX trong mô hình MVC.

    Từ khoá người dùng tìm kiếm: mvc ajax form submit AJAX submit form MVC, HttpPostedFileBase ajax post MVC, Asp net Core Ajax form post, Asp net form submit, jQuery button submit form, jQuery post form data, Asp net MVC Form submit, jQuery prevent form submit

    Chuyên mục: Top 20 mvc ajax form submit

    (#40) Post data using ajax in mvc | Asp.Net MVC 5 tutorial-step by step in Hindi

    Xem thêm tại đây: hanoilaw.vn

    FriendDetail

  4. @using (Html.BeginForm())
  5. @Html.AntiForgeryToken()
  6. tblFriend
  7. @Html.ValidationSummary(true, “”, new { @class = “text-danger” })
  8. @Html.LabelFor(model => model.FriendName, htmlAttributes: new { @class = “control-label col-md-2” })
  9. @Html.EditorFor(model => model.FriendName, new { htmlAttributes = new { @class = “form-control” } })
  10. @Html.ValidationMessageFor(model => model.FriendName, “”, new { @class = “text-danger” })


@Html.LabelFor(model => model.CompanyName, htmlAttributes: new { @class = “control-label col-md-2” })


@Html.EditorFor(model => model.CompanyName, new { htmlAttributes = new { @class = “form-control” } })


@Html.ValidationMessageFor(model => model.CompanyName, “”, new { @class = “text-danger” })


@Html.LabelFor(model => model.Email, htmlAttributes: new { @class = “control-label col-md-2” })


@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = “form-control” } })


@Html.ValidationMessageFor(model => model.Email, “”, new { @class = “text-danger” })


@Html.ActionLink(“Back to List”, “Index”)


@section Scripts {


@Scripts.Render(“~/bundles/jqueryval”)

  1. HomeController.cs
    Default Controller file where we had created ActionMethods called
    • FriendDetail that is HTTPGET method.
    • FriendDetail that is HTTPPOST method where we had written code of saving a new record in tblFriends table of MBKTest database.

      1. [HttpGet]
      2. public ActionResult FriendDetail()
      3. return View();
      4. [HttpPost]
      5. public ActionResult FriendDetail(tblFriend _friend)
      6. MBKTestContext db = new MBKTestContext();
      7. db.Friends.Add(_friend);
      8. db.SaveChanges();
      9. return View();
  1. MBKTestContext.cs
    Context file which interacts with the database.

    1. using MVC_BeginForm.Models;
    2. using System;
    3. using System.Collections.Generic;
    4. using System.Data.Entity;
    5. using System.Linq;
    6. using System.Web;
    7. namespace MVC_BeginForm
    8. public class MBKTestContext : DbContext
    9. public MBKTestContext(): base(“MBKTest”)
    10. public DbSet

      Friends { get; set; }

Happy Coding. . .

jQuery serialize() Method

Example

Output the result of serialized form values:

$(“button”).click(function(){$(“div”).text($(“form”).serialize());});

Try it Yourself »

$(“div”).text($(“form”).serialize());

});

Ajax Form Submit to POST JSON Data in MySQL Database using PHP and AJAX
Ajax Form Submit to POST JSON Data in MySQL Database using PHP and AJAX

Step by Step Implementation of @Html.BeginForm

Table Structure

  1. CREATE TABLE [dbo].[tblFriends](
  2. [FriendID] [int] IDENTITY(1,1) NOT NULL,
  3. [FriendName] [varchar](100) NULL,
  4. [CompanyName] [varchar](100) NULL,
  5. [Email] [varchar](200) NULL,
  6. PRIMARY KEY CLUSTERED
  7. [FriendID] ASC
  8. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  9. ) ON [PRIMARY]

Insert Query Sample Records

  1. insert tblFriends (FriendName,CompanyName,Email) Values(‘Suhana Kalla’,’Kalla Infotech’,'[email protected]’)
  2. insert tblFriends (FriendName,CompanyName,Email) Values(‘Ashish Kalla’,’AK Infotech’,'[email protected]’)
  3. insert tblFriends (FriendName,CompanyName,Email) Values(‘Manoj Kalla’,’Durga Consultancy’,'[email protected]’)
  4. insert tblFriends (FriendName,CompanyName,Email) Values(‘Ganesh Vyas’,’Vyas Infoline’,'[email protected]’)
  5. insert tblFriends (FriendName,CompanyName,Email) Values(‘Rajesh Garg’,’Garg Infosys’,'[email protected]’)

Start Visual Studio 2015 or 2017, I am using Visual Studio Community 2015.

Select File –> New –>Project

Image No.01 — (create a new project called “MVC-BeginForm”)

As you can see the new project created is named “MVC-BeginForm”.

Image No.01 — (create a new project called “MVC-BeginForm”)

First Open Web.Config set Database connection string as follows,

Now switch to Solution Explorer by pressing [CTRL+R] or click on VIEW —>Solution Explorer.

Insert Package of Entity Framework

Now again right click on project

File Name : MBKTestContext and click on ADD button.

  1. using MVC_BeginForm.Models;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Data.Entity;
  5. using System.Linq;
  6. using System.Web;
  7. namespace MVC_BeginForm
  8. public class MBKTestContext : DbContext
  9. public MBKTestContext(): base(“MBKTest”)
  10. public DbSet

    Friends { get; set; }

Added namespace System.Data.Entity, MVC_BeginForm.Models because DbContext derived from System.Data.Entity and tblFriend derived from MVC_BeginForm.Models

  1. using System.Data.Entity;
  2. using MVC_BeginForm.Models;

Now click on MODELS folder and right click select ADD —> Class called tblFriend

Code Of tblFriend.cs

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.ComponentModel.DataAnnotations;
  6. namespace MVC_BeginForm.Models
  7. public class tblFriend
  8. [Key]
  9. public int FriendID { get; set; }
  10. public string FriendName { get; set; }
  11. public string CompanyName { get; set; }
  12. public string Email { get; set; }

Now switch back to MBKContext.cs

Add the following namespace MVC_BeginForm.Models

  1. using MVC_BeginForm.Models;

Double click on Controller Folder then select double click on HomeController.

Add following code into file.

  1. [HttpGet]
  2. public ActionResult FriendDetail()
  3. return View();
  4. [HttpPost]
  5. public ActionResult FriendDetail(tblFriend _friend)
  6. return View();

Now build your project by right click on Project name MVC_BeginForm

Now switch back to HomeController’s FriendDetail method right click and select ADD VIEW option

You can see in VIEWS—>HOME—>FriendDetail.cshtml file has been created.

Now switch back to HomeController again and add the following namespace,

Now, check your database’s table for more details.

You can see Record No.6 is added successfully.

Create

  • Friend Name
  • Phone
  • State
  • Now Press

    key to view output.

    Our next step is to insert Jquery Ajax Form Submit with Serializing because our article title is Asp.Net MVC jQuery AJAX Form Submit using Serialize Form Data into Model.

    Switch back to CREATE.CSHTML file to insert AJAX code.

    Now switch to CONTROLLER to mark BREAKPOINT or DEBUGGER

    You can see in the above form where we enter data. On clicking on SUBMIT button this data we should get in controller side ADDFRIEND method.

    As I clicked on SUBMIT button alert popup appeared.

    You can see values are separated with & symbol.

    In the above screen you can see we received data from view.

    To recap the article, we have taken following steps:

    1. Created Empty Asp.Net MVC project
    2. Installed Jquery from NuGet
    3. Created Controller called “FriendController”
    4. Created View “Create”
    5. Created ActionMethod “AddFriend”

    Putting all the important code at one place:

    I’m trying to learn asp.net and so far I can load other page contents without refreshing using

    Ajax.Actionlink

    and

    AjaxOptions()

    but I can’t figure it out how to use ajax when submitting a form. I did a lot of googling but couldn’t find the appropriate solution. Here are my codes,

    Controller page


    namespace CrudMvc.Controllers { public class HomeController : Controller { sampleDBEntities db = new sampleDBEntities(); // // GET: /Home/ public ActionResult Index() { return View(db.myTables.ToList()); } public PartialViewResult Details(int id = 0) { myTable Table = db.myTables.Find(id); return PartialView(Table); } [HttpGet] public PartialViewResult Create() { return PartialView(); } [HttpPost] public ActionResult Create(myTable table) { if (ModelState.IsValid) { db.myTables.Add(table); db.SaveChanges(); return RedirectToAction("Index"); } return View(table); } protected override void Dispose(bool disposing) { db.Dispose(); base.Dispose(disposing); } } }


    Index

    View page


    @model IEnumerable

    @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; }

    Submit form with ajax and store data into database
    Submit form with ajax and store data into database

    Keywords searched by users: mvc ajax form submit

    Post Form Data To Controller In Asp.Net Mvc Using Ajax - Dotnetxp
    Post Form Data To Controller In Asp.Net Mvc Using Ajax - Dotnetxp
    Mvc Ajax Submit Form: Hướng Dẫn Gửi Form Bằng Ajax Trong Mô Hình Mvc -  Hanoilaw Firm
    Mvc Ajax Submit Form: Hướng Dẫn Gửi Form Bằng Ajax Trong Mô Hình Mvc - Hanoilaw Firm
    Asp.Net Core Mvc Ajax Form Requests Using Jquery-Unobtrusive | Software  Engineering
    Asp.Net Core Mvc Ajax Form Requests Using Jquery-Unobtrusive | Software Engineering
    Asp.Net Mvc Jquery Ajax Form Submit Using Serialize Form Data Into A Model
    Asp.Net Mvc Jquery Ajax Form Submit Using Serialize Form Data Into A Model
    Html.Beginform() Vs Ajax.Beginform() In Mvc3 - Codeproject
    Html.Beginform() Vs Ajax.Beginform() In Mvc3 - Codeproject
    How To Submit A Form Using Ajax In Jquery ? - Geeksforgeeks
    How To Submit A Form Using Ajax In Jquery ? - Geeksforgeeks
    Asp.Net Core: Ajax Form Submit (Post) Example
    Asp.Net Core: Ajax Form Submit (Post) Example
    Sử Dụng Jquery Ajax Trong Asp.Net Mvc
    Sử Dụng Jquery Ajax Trong Asp.Net Mvc
    How To Use Ajax Beginform In Asp.Net Mvc - Youtube
    How To Use Ajax Beginform In Asp.Net Mvc - Youtube
    Jquery To Reset Or Clear All Asp.Net Or Html Controls Placed On Web Form ~  Asp.Net,C#.Net,Vb.Net,Mvc,Jquery,Javascipt,Ajax,Wcf,Sql Server Example
    Jquery To Reset Or Clear All Asp.Net Or Html Controls Placed On Web Form ~ Asp.Net,C#.Net,Vb.Net,Mvc,Jquery,Javascipt,Ajax,Wcf,Sql Server Example
    Using Ajax.Beginform In Asp.Net Mvc - Youtube
    Using Ajax.Beginform In Asp.Net Mvc - Youtube
    Github - Md-Mamunabdulkayum/Spring-Mvc-Crud-Form-Submit-And-Ajax: Spring Mvc  Crud Application(Spring Mvc 5.X, Hibernate 5.X , Bootstrap 3.X, Jquery,  Mysql)
    Github - Md-Mamunabdulkayum/Spring-Mvc-Crud-Form-Submit-And-Ajax: Spring Mvc Crud Application(Spring Mvc 5.X, Hibernate 5.X , Bootstrap 3.X, Jquery, Mysql)
    How To Pass Both Form Data And Credentials On Submit In Ajax ? -  Geeksforgeeks
    How To Pass Both Form Data And Credentials On Submit In Ajax ? - Geeksforgeeks
    How To Submit Ajax Forms With Jquery | Digitalocean
    How To Submit Ajax Forms With Jquery | Digitalocean
    Posting Javascript Types To Mvc 6 In .Net Core, Using Ajax | I Came, I  Learned, I Blogged
    Posting Javascript Types To Mvc 6 In .Net Core, Using Ajax | I Came, I Learned, I Blogged
    Asp.Net Mvc Ajax File Uploading Using Jquery - Development Passion
    Asp.Net Mvc Ajax File Uploading Using Jquery - Development Passion
    How To Change A Form In Mvc To Submit With Ajax - Youtube
    How To Change A Form In Mvc To Submit With Ajax - Youtube
    Upload Multiple File Using Ajax In Asp.Net Core 2.1
    Upload Multiple File Using Ajax In Asp.Net Core 2.1

    See more here: kientrucannam.vn

    Trả lời

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *