Mvc Ajax Post Form | Asp Net Core Ajax Form Post

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"; }

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") }


Explanation of JavaScript

• Foremost here I added two script from CDN. First is JQuery Validate and second one is JQuery Validate unobtrusive. JQuery Validate unobtrusive used to show validation at client side without submitting form. So here we can save time to make round trip to the server.
• All this JavaScript is added in Script section because of JQuery script is defined in layout file below of RenderBody() where this view will render when we run project. If we do not pass these scripts in this section, it will give JQuery is required because it will render before JQuery is rendered.
• In document ready event, I parse form element to JQuery Validate unobtrusive by form ID. When all the element is loaded in document JQuery Validate unobtrusive add special data attributes to all fields as per validation given in data annotation attributes as you can see in below image.

• In SaveStudent function first we check if all the fields value are as per our given validation or not if any error occur it will show in span tag otherwise it will go inside condition and execute rest of the script.
• For formData here we just serialize the form by its ID attribute rather than old way which we have shown in above method. Value is stored same as query string in this object as you see in below image

• Rest of Ajax call is same as we shown above.

You can download or access all these code from my GitHub.

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:




Processing an AJAX Form

Name

Email

Superhero Alias

Submit





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:








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.

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());

});

Create Asp.Net Core Project

Step 1

Open Visual Studio and click on create a new project.

Step 2

Select Asp.net Core Web App with Model View Controller and click on next button. You can also select Asp.net core without MVC or empty project but you have to add libraries and layout yourself. But in this template model, view and controller folder are already created with the required libraries and layout file.

Step 3

Enter your project name, location, and solution name and click on next button.

Step 4

Select targeted framework and other information like authentication if required etc. and click on Create button.

Step 5

Here I remove already created model, controller and its view. If you delete the existing controller, create new controller by right click on controller folder then Add>Controller.

Gave controller name and click on Add button.

jQuery ajax send form data

Khi bạn có một form HTML và muốn gửi dữ liệu từ form đó đến server mà không cần làm trang mới, jQuery ajax là một công nghệ mạnh mẽ để làm điều đó. Bằng cách sử dụng jQuery ajax, bạn có thể gửi các yêu cầu HTTP như GET, POST, PUT, DELETE và nhanh chóng xử lý các phản hồi từ server.

Cách thức gửi dữ liệu form bằng jQuery ajax khá đơn giản. Đầu tiên, bạn cần tạo một sự kiện submit cho form HTML. Khi form được submit, ta ngăn chặn hành vi mặc định của nó bằng cách sử dụng phương thức `preventDefault()` của jQuery. Sau đó, ta thu thập dữ liệu từ form bằng phương thức `serialize()` và gửi nó đến server bằng phương thức `ajax()`.

Dưới đây là mã ví dụ cho việc gửi dữ liệu form bằng jQuery ajax:

“`javascript$(‘form’).submit(function(event) {event.preventDefault(); // Ngăn chặn hành vi mặc định của form

var formData = $(this).serialize(); // Thu thập dữ liệu form

$.ajax({url: ‘server.php’, // Đường dẫn đến server xử lý dữ liệumethod: ‘POST’, // Phương thức gửi dữ liệudata: formData, // Dữ liệu formsuccess: function(response) {// Xử lý phản hồi từ serverconsole.log(response);},error: function(xhr, status, error) {// Xử lý lỗi nếu cóconsole.log(error);}});});“`

Trong mã ví dụ trên, chúng ta đã sử dụng sự kiện `submit` cho form và ngăn chặn hành vi mặc định của nó bằng cách sử dụng `preventDefault()`. Sau đó, chúng ta đã thu thập dữ liệu từ form bằng phương thức `serialize()` và gửi nó đến server bằng `ajax()`. Phản hồi từ server được xử lý trong các hàm `success()` hoặc `error()` tùy thuộc vào kết quả của yêu cầu Ajax.

FAQs (Câu hỏi thường gặp):1. Tại sao chúng ta cần sử dụng jQuery ajax để gửi dữ liệu form?jQuery ajax giúp chúng ta gửi dữ liệu từ một form HTML đến server mà không cần làm trang mới, giúp trải nghiệm người dùng trở nên mượt mà và nhanh chóng.

2. Thu thập dữ liệu từ form bằng phương thức nào và tại sao?Trong ví dụ trên, chúng ta đã sử dụng phương thức `serialize()` để thu thập dữ liệu từ form. Phương thức này giúp chúng ta thu thập tất cả các giá trị của các trường form một cách dễ dàng và sẵn sàng để gửi đi.

3. Có thể gửi dữ liệu form sử dụng phương thức GET không?Có, chúng ta có thể sử dụng phương thức `GET` thay vì `POST` để gửi dữ liệu form. Để làm điều này, bạn chỉ cần thay đổi giá trị của thuộc tính `method` trong phương thức `ajax()` thành `’GET’`.

4. Có cách nào để gửi file từ form sử dụng jQuery ajax không?Có, chúng ta có thể sử dụng `FormData` để gửi cả dữ liệu văn bản và các tệp tin từ form. Điều này đòi hỏi một số phức tạp hơn trong xử lý phía server, nhưng nó hoàn toàn khả thi khi làm việc với jQuery ajax.

Trên đây là một số điểm nổi bật về jQuery ajax send form data và cách gửi dữ liệu từ form HTML đến server. Sử dụng jQuery ajax giúp chúng ta xử lý dữ liệu form một cách nhanh chóng và mượt mà, nâng cao trải nghiệm người dùng trên trang web.

What Is Ajax?

AJAX stand for Asynchronous JavaScript and XML. AJAX allows you to send and receive data asynchronously without reloading the web page. So it is fast. A user can continue to use the application while the client program requests information from the server in the background. It is used to communicate with the server without refreshing the web page and thus increasing the user experience and better performance.

AJAX submit form MVC

Trong kiến trúc MVC, mô hình (model) đại diện cho dữ liệu và xử lý logic của ứng dụng, còn người xem (view) là giao diện người dùng và bộ điều khiển (controller) là thành phần chịu trách nhiệm kiểm soát xu hướng điều hướng và xử lý các sự kiện từ người dùng. Khi người dùng gửi một biểu mẫu, mô hình sẽ tiếp nhận dữ liệu và thực hiện quá trình xử lý, sau đó trả về kết quả cho người dùng thông qua người xem.

Tuy nhiên, trong trường hợp sử dụng truyền thống không sử dụng AJAX, sau khi người dùng gửi một biểu mẫu, trang web sẽ được tải lại hoàn toàn và tất cả các dữ liệu hiển thị trên trang sẽ bị mất. Điều này không chỉ làm mất thời gian cho người dùng, mà còn có thể gây mất dữ liệu và gây phiền toái.

Với AJAX, truyền dữ liệu qua mưới thức gửi không đồng bộ (asynchronous), mô hình sẽ nhận dữ liệu thông qua AJAX và thực hiện xử lý. Người xem không cần phải tải lại toàn bộ trang và chỉ cần cập nhật phần cần thiết. Điều này giúp cải thiện trải nghiệm người dùng và tăng tốc độ phản hồi của ứng dụng.

Trong kiến trúc MVC, điều quan trọng là bảo đảm rằng cấu trúc của ứng dụng vẫn được duy trì khi sử dụng AJAX để gửi biểu mẫu. Việc này thường được thực hiện bằng cách sử dụng các yêu cầu AJAX để gửi dữ liệu và truy xuất mô hình từ bộ điều khiển.

Cách tiếp cận phổ biến trong AJAX submit form MVC là sử dụng JavaScript và jQuery để tiến hành việc gửi dữ liệu. JavaScript cung cấp các phương thức để tạo yêu cầu AJAX và jQuery giúp việc thao tác với DOM dễ dàng hơn. Người xem có thể gửi các yêu cầu AJAX tới bộ điều khiển và xử lý phản hồi trả về từ mô hình.

Để thực hiện đúng MVC, việc xử lý biểu mẫu và truy xuất mô hình nên được thực hiện bởi các hành động (actions) trong bộ điều khiển. Mỗi biểu mẫu có thể gắn kết với một hành động trong bộ điều khiển, sẽ được kích hoạt khi người dùng gửi biểu mẫu. Hành động này sẽ nhận dữ liệu từ biểu mẫu và gọi các phương thức dùng để xử lý trong mô hình. Sau khi xử lý, bộ điều khiển sẽ trả lại kết quả cho người xem thông qua AJAX.

Một số câu hỏi thường gặp về AJAX submit form MVC:

Q: AJAX submit form trong MVC là gì?A: AJAX submit form trong MVC là phương pháp sử dụng AJAX để gửi biểu mẫu và cập nhật trang web theo mô hình MVC.

Q: Điều gì xảy ra khi một biểu mẫu được gửi bằng AJAX trong MVC?A: Khi một biểu mẫu được gửi bằng AJAX trong MVC, dữ liệu từ biểu mẫu sẽ được gửi đến bộ điều khiển thông qua yêu cầu AJAX. Bộ điều khiển sẽ xử lý dữ liệu và gọi các phương thức tương ứng trong mô hình. Sau đó, kết quả xử lý sẽ được trả về cho người xem để cập nhật trang web tương ứng.

Q: Lợi ích của việc sử dụng AJAX submit form trong MVC là gì?A: Việc sử dụng AJAX submit form trong MVC giúp cải thiện trải nghiệm người dùng bằng cách cung cấp phản hồi nhanh chóng và tương tác mượt mà. Nó cũng giúp giảm tải trang web và tối ưu hóa hiệu suất mạng.

Q: Phải sử dụng ngôn ngữ lập trình nào để thực hiện AJAX submit form trong MVC?A: Ngôn ngữ lập trình phổ biến như JavaScript và framework như jQuery thường được sử dụng để thực hiện AJAX submit form trong MVC.

Q: Có những bước nào cần thực hiện khi sử dụng AJAX submit form trong MVC?A: Các bước cơ bản bao gồm việc gửi yêu cầu AJAX từ người xem tới bộ điều khiển, xử lý dữ liệu và gọi phương thức tương ứng trong mô hình, sau đó trả lại kết quả cho người xem để cập nhật trang web.

Trên đây là một số thông tin về AJAX submit form trong MVC. Việc sử dụng AJAX trong môi trường MVC giúp tăng cường khả năng tương tác và cải thiện trải nghiệm người dùng.

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

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

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

• Asp.Net MVC jQuery AJAX Form Submit using Serialize Form …
• Submit form using AJAX in Asp.Net mvc 4 – Stack Overflow
• Submit (POST) FormData to Controller using jQuery AJAX in …
• MVC: How to submit a form in widget using AJAX call
• How to submit a form in asp.net mvc using ajax.beginform
• How To Submit AJAX Forms with JQuery – DigitalOcean
• 4 Ways to Create Form in ASP.NET MVC – Complete C# Tutorial
• Getting Data From View to Controller in MVC – C# Corner
• How to submit a form in asp.net mvc using ajax.beginform
• Form Submit using Ajax in ASP.NET MVC – Microsoft TechNet
• Ajax form submit in asp.net MVC
• How To Submit AJAX Forms with JQuery – DigitalOcean
• jQuery Ajax Upload file Anda Data in MVC Core – Medium

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