Ajax Jquery In Mvc | Example Explained – The Html Page

The ASP File – “gethint.asp”

The ASP file checks an array of names, and returns the corresponding name(s) to the browser:

response.expires=-1

dim a(30)

‘Fill up array with names

a(1)=”Anna”

a(2)=”Brittany”

a(3)=”Cinderella”

a(4)=”Diana”

a(5)=”Eva”

a(6)=”Fiona”

a(7)=”Gunda”

a(8)=”Hege”

a(9)=”Inga”

a(10)=”Johanna”

a(11)=”Kitty”

a(12)=”Linda”

a(13)=”Nina”

a(14)=”Ophelia”

a(15)=”Petunia”

a(16)=”Amanda”

a(17)=”Raquel”

a(18)=”Cindy”

a(19)=”Doris”

a(20)=”Eve”

a(21)=”Evita”

a(22)=”Sunniva”

a(23)=”Tove”

a(24)=”Unni”

a(25)=”Violet”

a(26)=”Liza”

a(27)=”Elizabeth”

a(28)=”Ellen”

a(29)=”Wenche”

a(30)=”Vicky”

‘get the q parameter from URL

q=ucase(request.querystring(“q”))

‘lookup all hints from array if length of q>0

if len(q)>0 then

hint=””

for i=1 to 30

if q=ucase(mid(a(i),1,len(q))) then

if hint=”” then

hint=a(i)

else

hint=hint & ” , ” & a(i)

end if

end if

next

end if

‘Output “no suggestion” if no hint were found

‘or output the correct values

if hint=”” then

response.write(“no suggestion”)

else

response.write(hint)

end if

%>

AJAX can be used for interactive communication with a database.

Demonstration: Implementation of Ajax using jQuery

Step 1

Create a new Project and choose ASP.NET MVC web application.

Step 2

Just Ignore the built-in Models and Controllers and make your own model.

Here I am creating a model called “Students” having properties studentID, studentName and studentAddress as shown below,


public class Student
{
[Key]
public int studentID { get; set; }
[Required]
public string studentName { get; set; }
[Required]
public string studentAddress { get; set; }
}


Add “using System.ComponentModel.DataAnnotations;” Attributes to Validate Model Data and then build the project once.

Step 3

Let’s create another model by inheriting the DbContext. It is a class that manages all the database operations, like database connection, and manages various entities of the Entity Model.

We can also say DbContext is a wrapper of ObjectContext. So, DbContext is a lightweight version of the ObjectContext and is exposes only the common features that are really required in programming.

Here I am creating a model called “StudentContext” as shown below,


public class StudentContext : DbContext
{
public DbSet

Students { get; set; }
}



Add “using System.Data.Entity;” that provides access to the core functionality of the entity framework.

Step 4

Now create a controller to written the code for inserting data into database, displaying data into view.

Here I am creating “Student” controller. Inside the Controller, I am creating an object of StudentContext for inserting and retrieving data from database. Also add the necessary namespace.


StudentContext context = new StudentContext();


Step 5

Now I’m creating the action methods for Inserting and retrieving the data to/from the database.

Here I am creating an [HttpPost] action method “createStudent” for inserting the JSON-Formatted data to database. I am Using [HttpPost] attribute to Save/Post the data as below:


[HttpPost]
public ActionResult createStudent(Student std)
{
context.Students.Add(std);
context.SaveChanges();
string message = "SUCCESS";
return Json(new { Message = message, JsonRequestBehavior.AllowGet });
}


Similarly, I am also creating JSON method “getStudent” to retrieve data from database and returning raw JSON data to be consumed by JavaScript in view as shown below,


public JsonResult getStudent(string id)
{
List

students = new List

();
students = context.Students.ToList();
return Json(students, JsonRequestBehavior.AllowGet);
}




Step 6

Now add a view to display the data and data inserting field. Here, I am adding a view named “Index.cshtml”. Then, write the HTML codes for making the data input field, submit button and also for displaying the data in same page. You can use bootstrap classes for designing. Here I am using bootstrap. My designing code is as below:

Please enter the details below.

Student Name

Student Address

ID	Student Name	Student Address

We can simply use the bootstrap class and call jQuery functions in ASP.NET MVC because during the project creation it will by default added to project and also linked to the template.

Step 7

Now I will write the script for inserting the data as well as retrieving and displaying it to the view. Just after the HTML code finished add the script shown below,


@section Scripts
{

}


We are using Ajax to refresh “tblStudent” so it refreshes only the particular table, rather than refreshing entire page. After clicking the “submitButton” the data from the input fields are taken in variable and redirected to action “createStudent” of “StudentController” to insert into the database. And, I have written a function “LoadData” to display the data from database to view continuously after inserting data. Inside “LoadData” function I am calling “getStudent” method which returns result in JSON and the JSON-Formatted data are presented in html by the underlying statements.

Step 8

Now, configure the Database connectionStrings in “web.config” file of the particular project as shown below,

In the above connectingString “StudentContext” is the name of class inherited from abstract Class “DbContext” in “StudentContext.cs” file. “RAVI-KANDEL” is the name of the Database Server and “Student” is the name of the Database. Change “RAVI-KANDEL” with your Database Server name. Finally, run your application and navigate to Student controller. Also you can configure “RouteConfig.cs” and set the controller to “Student” for direct navigation to the Student controller when loading the application.

You can add the records and can see added data in the table after the form-control as shown below,

Also, you can open the database server and see the data stored in database over there.

Please feel free to comment/feedback.

Happy Coding!

ASP AJAX

AJAX is about updating parts of a web page, without reloading the whole page.

What is AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX is a technique for creating fast and dynamic web pages.

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.

Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.

Sử dụng jQuery Ajax trong ASP.NET MVC

Sử dụng jQuery Ajax trong ASP.NET MVC

Trong bài viết này hướng dẫn sử dụng jQuery ajax với các phương thức Action sử dụng http verbs tương ứng.

Địa chỉ URL trong jQuery Ajax

• Được sử dụng truy cập thông qua trình duyệt url
• Được sử dụng để gọi trong JQuery ajax


public JsonResult UrlResponse() //truy cập sử dụng Url { return Json(new { Name = "UrlResponse", Response = "Response from Get", Date = DateTime.Now.ToString("dd/MM/yyyy hh:mm:ss tt") }, JsonRequestBehavior.AllowGet); }


Loại giao thức trong jQuery Ajax

• Có thể chỉ sử dụng cho gọi thông qua Ajax.
• Nếu sử dụng trình duyệt truy cập sẽ tạo ra lỗi.


[HttpGet] public JsonResult TypedResponse() //Lỗi nếu truy cập sử dụng Url { return Json(new { Name = "TypedResponse", Response = "Response from Get", Date = DateTime.Now.ToString("dd/MM/yyyy hh:mm:ss tt") }, JsonRequestBehavior.AllowGet); }


Bây giờ chúng ta sẽ bắt đầu sử dụng phương thức action trong MVC, và sử dụng JQuery Ajax gọi $.ajax.

Một số thành phần trong cách gọi ajax

1. Xác định phương thức action trong MVC được gọi trong Ajax.Thuộc tính url trong $.ajax xác định controller và action trong MVC, theo định dạng /{controller}/{action}

Ví dụ:


url: ‘/User/Create’ url: ‘/User/Get/20’


Hoặc có thể sử dụng phương thức Url.Action để xác định controller và action.


url: ‘@Url.Action(“User”,”Create”)’


2. Xác định http verb sử dụng trong Ajax.Thuộc tính type với các giá trị ‘GET/ POST/ PUT/ DELETE’ sử dụng trong Ajax tương ứng với HttpVerbs trong phương thức action MVC.

Ví dụ:

Type : “POST”

3. Xác định tham số nếu phương thức action trong MVC có sử dụng tham số.

Thuộc tính data xác định dữ liệu được truyền cho tham số trong phương thức action.

Ví dụ:


data: JSON.stringify({ user: { name: ‘Rintu’, email: ‘[email protected]’ } }), data: { name: ‘Rintu’, email: ‘[email protected]’ },


4. Nhận dữ liệu trả về sau khi thực hiện thành công.

Thuộc tính success xác định hàm nhận dữ liệu trả về.

Ví dụ:


success: function (data) { alert(data); },


5. Nếu xảy ra lỗi, thuộc tính error xác định hàm nhận lỗi trả về.

Ví dụ:


error: function (xhr) { alert(‘error’); }


Truyền tham số cơ bản từ jQuery ajax đến phương thức action MVC

Trong UserController MVC chứa phương thức action:


[HttpGet] public JsonResult Get(int id) { return Json("Response from Get", JsonRequestBehavior.AllowGet); }


Cách gọi phương thức action Get trong ajax:


$.ajax({ url: '@Url.Action(“User”,”Get”), dataType: "json", type: "GET", contentType: 'application/json; charset=utf-8', data: {id:1}, async: true, processData: false, cache: false, success: function (data) { alert(data); }, error: function (xhr) { alert('error'); } });


Truyền tham số là đối tượng json từ jQuery ajax đến phương thức action MVC

Phương thức action Create trong UserController nhận đối tượng user làm tham số.


// POST: /User/Create [HttpPost] public JsonResult Create(User user) { return Json("Response from Create"); }


Cách gọi trong jQuery ajax.

Tạo dữ liệu kiểu json trong ajax để truyền cho phương thức Create trong MVC.


/*POST*/ $.ajax({ url: '@Url("User","Create"), dataType: "json", type: "POST", contentType: 'application/json; charset=utf-8', data: JSON.stringify({ user: { name: 'Rintu', email: '[email protected]' } }), async: true, processData: false, cache: false, success: function (data) { alert(data); }, error: function (xhr) { alert('error'); } })


Truyền tham số phức hợp từ jQuery ajax đến phương thức action MVC

Phương thức action Edit trong UserController nhận 2 tham sô: id và đối tượng user.


[HttpPost] public JsonResult Edit(int id, User user) { return Json("Response from Edit"); }


Cách gọi phương thức action Edit trong jQuery ajax.


$.ajax({ url: '/User/Edit', dataType: "json", type: "POST", contentType: 'application/json; charset=utf-8', data: JSON.stringify({ id: 100, user: {name: 'Rintu', email: '[email protected]'} }), async: true, processData: false, cache: false, success: function (data) { alert(data); }, error: function (xhr) { alert('error'); } });



Bạn đang muốn tìm kiếm 1 công việc với mức thu nhập cao.

✅ Hoặc là bạn đang muốn chuyển đổi công việc mà chưa biết theo học ngành nghề gì cho tốt.✅ Giới thiệu với bạn Chương trình đào tạo nhân sự dài hạn trong 12 tháng với những điều đặc biệt mà chỉ có tại IMIC và đây cũng chính là sự lựa chọn phù hợp nhất dành cho bạn:👉 Thứ nhất: Học viên được đào tạo bài bản kỹ năng, kiến thức chuyên môn lý thuyết, thực hành, thực chiến nhiều dự án và chia sẻ những kinh nghiệm thực tế từ Chuyên gia có nhiều năm kinh nghiệm dự án cũng như tâm huyết truyền nghề.👉 Thứ hai: Được ký hợp đồng cam kết chất lượng đào tạo cũng như mức lương sau tốt nghiệp và đi làm tại các đối tác tuyển dụng của IMIC. Trả lại học phí nếu không đúng những gì đã ký kết.👉 Thứ ba: Cam kết hỗ trợ giới thiệu công việc sang đối tác tuyển dụng trong vòng 10 năm liên tục.👉 Thứ tư: Được hỗ trợ tài chính với mức lãi suất 0 đồng qua ngân hàng VIB Bank.👉 Có 4 Chương trình đào tạo nhân sự dài hạn dành cho bạn lựa chọn theo học. Gồm có:1) Data Scientist full-stack2) Embedded System & IoT development full-stack3) Game development full-stack4) Web development full-stack✅ Cảm ơn bạn đã dành thời gian lắng nghe những chia sẻ của mình. Và tuyệt vời hơn nữa nếu IMIC được góp phần vào sự thành công của bạn.✅ Hãy liên hệ ngay với Phòng tư vấn tuyển sinh để được hỗ trợ về thủ tục nhập học.✅ Chúc bạn luôn có nhiều sức khỏe và thành công!

Example Explained – The HTML Page

When a user selects a customer in the dropdown list above, a function called “showCustomer()” is executed. The function is triggered by the “onchange” event:

Select a customer:

Alfreds Futterkiste

North/South

Wolski Zajazd

Source code explanation:

If no customer is selected (str.length==0), the function clears the content of the txtHint placeholder and exits the function.

If a customer is selected, the showCustomer() function executes the following:

• Create an XMLHttpRequest object
• Create the function to be executed when the server response is ready
• Send the request off to a file on the server
• Notice that a parameter (q) is added to the URL (with the content of the dropdown list)

Benefits of Ajax

• Callbacks
• Making Asynchronous Calls
• User-Friendly
• Improve the speed, performance and usability of a web application

Implementation of Ajax can be done in two way in ASP.Net Application

• using Update Panel and,
• using jQuery

What Advances have Been Made to Ajax?

JavaScript is the client-side scripting language and XML is a mark-up language to define data. And we have, JSON(JavaScript Object Notation) as another mark-up language to define data as well. JSON is much easier to use with JavaScript than XML. After the combination of JavaScript and Ajax, the XML Web Services are being replaced by JSON Web Services.

Another major advance to JavaScript and Ajax is the JavaScript object library called jQuery, which is the free, open-source software. It is a wrapper for JavaScript. jQuery is used to write the JavaScript to navigate and manipulate a page and make asynchronous Ajax callbacks.

Hence, Ajax callbacks have become standard programming practices by using jQuery and JSON Web Services for designing and developing web applications.

The ASP File

The page on the server called by the JavaScript above is an ASP file called “getcustomer.asp”.

The source code in “getcustomer.asp” runs a query against a database, and returns the result in an HTML table:

response.expires=-1

sql=”SELECT * FROM CUSTOMERS WHERE CUSTOMERID=”

sql=sql & “‘” & request.querystring(“q”) & “‘”

set conn=Server.CreateObject(“ADODB.Connection”)

conn.Provider=”Microsoft.Jet.OLEDB.4.0″

conn.Open(Server.Mappath(“/datafolder/northwind.mdb”))

set rs=Server.CreateObject(“ADODB.recordset”)

rs.Open sql,conn

response.write(”

do until rs.EOF

for each x in rs.Fields

response.write(”

“)

response.write(”

“)

next

rs.MoveNext

loop

response.write(“”)

%>

What is Ajax?

As we all know, AJAX means Asynchronous JavaScript and XML. It is a client-side script that communicates to and from a server/database without the need for a postback or a complete page refresh. The Ajax speeds up response time.

In other words, Ajax is the method of exchanging data with a server, and updating parts of a web page, without reloading the entire page.

Demonstration: Implementation of Ajax using jQuery

Step 1

Create a new Project and choose ASP.NET MVC web application.

Step 2

Just Ignore the built-in Models and Controllers and make your own model.

Here I am creating a model called “Students” having properties studentID, studentName and studentAddress as shown below,


public class Student
{
[Key]
public int studentID { get; set; }
[Required]
public string studentName { get; set; }
[Required]
public string studentAddress { get; set; }
}


Add “using System.ComponentModel.DataAnnotations;” Attributes to Validate Model Data and then build the project once.

Step 3

Let’s create another model by inheriting the DbContext. It is a class that manages all the database operations, like database connection, and manages various entities of the Entity Model.

We can also say DbContext is a wrapper of ObjectContext. So, DbContext is a lightweight version of the ObjectContext and is exposes only the common features that are really required in programming.

Here I am creating a model called “StudentContext” as shown below,


public class StudentContext : DbContext
{
public DbSet

Students { get; set; }
}



Add “using System.Data.Entity;” that provides access to the core functionality of the entity framework.

Step 4

Now create a controller to written the code for inserting data into database, displaying data into view.

Here I am creating “Student” controller. Inside the Controller, I am creating an object of StudentContext for inserting and retrieving data from database. Also add the necessary namespace.


StudentContext context = new StudentContext();


Step 5

Now I’m creating the action methods for Inserting and retrieving the data to/from the database.

Here I am creating an [HttpPost] action method “createStudent” for inserting the JSON-Formatted data to database. I am Using [HttpPost] attribute to Save/Post the data as below:


[HttpPost]
public ActionResult createStudent(Student std)
{
context.Students.Add(std);
context.SaveChanges();
string message = "SUCCESS";
return Json(new { Message = message, JsonRequestBehavior.AllowGet });
}


Similarly, I am also creating JSON method “getStudent” to retrieve data from database and returning raw JSON data to be consumed by JavaScript in view as shown below,


public JsonResult getStudent(string id)
{
List

students = new List

();
students = context.Students.ToList();
return Json(students, JsonRequestBehavior.AllowGet);
}




Step 6

Now add a view to display the data and data inserting field. Here, I am adding a view named “Index.cshtml”. Then, write the HTML codes for making the data input field, submit button and also for displaying the data in same page. You can use bootstrap classes for designing. Here I am using bootstrap. My designing code is as below:

Please enter the details below.

Student Name

Student Address

ID	Student Name	Student Address

We can simply use the bootstrap class and call jQuery functions in ASP.NET MVC because during the project creation it will by default added to project and also linked to the template.

Step 7

Now I will write the script for inserting the data as well as retrieving and displaying it to the view. Just after the HTML code finished add the script shown below,


@section Scripts
{

}


We are using Ajax to refresh “tblStudent” so it refreshes only the particular table, rather than refreshing entire page. After clicking the “submitButton” the data from the input fields are taken in variable and redirected to action “createStudent” of “StudentController” to insert into the database. And, I have written a function “LoadData” to display the data from database to view continuously after inserting data. Inside “LoadData” function I am calling “getStudent” method which returns result in JSON and the JSON-Formatted data are presented in html by the underlying statements.

Step 8

Now, configure the Database connectionStrings in “web.config” file of the particular project as shown below,

In the above connectingString “StudentContext” is the name of class inherited from abstract Class “DbContext” in “StudentContext.cs” file. “RAVI-KANDEL” is the name of the Database Server and “Student” is the name of the Database. Change “RAVI-KANDEL” with your Database Server name. Finally, run your application and navigate to Student controller. Also you can configure “RouteConfig.cs” and set the controller to “Student” for direct navigation to the Student controller when loading the application.

You can add the records and can see added data in the table after the form-control as shown below,

Also, you can open the database server and see the data stored in database over there.

Please feel free to comment/feedback.

Happy Coding!

Khóa học này là một khóa học ngắn giúp các bạn tạo một màn hình thêm sửa xóa tìm kiếm phân trang sử dụng ASP.NET MVC và JQuery AJAX để thao tác là chính.

Nhằm giúp các bạn hiểu cách làm việc từ backend đến frontend, TEDU làm một khóa học nhỏ giúp các bạn tập làm việc với JQuery AJAX sử dụng ASP.NET MVC làm controller backend để truy cập dữ liệu. Trong khóa học có sử dụng Entity Framework CodeFirst để migration dữ liệu.

Kết thúc khóa học này học viên có thể thêm sửa xóa tìm kiếm và phân trang dữ liệu trong bảng với Bootstrap modal popup và Jquery AJAX. Đồng thời hiểu được cách phân trang dữ liệu lớn trong AJAX MVC.

Họ và tên: Toàn Bạch

Nghề nghiêp: Senior Fullstack .NET Developer

Kỹ năng: Có hơn 8 năm làm dự án về ASP.NET MVC, WebForm, Web Service, Web API, ASP.NET Core, Angular SQL Server, JQuery, SOLID, Design Pattern, DevOps.

On my MVC View I have button:

When I click this button I need call one Action, do some stuff there and then Submit my form.

I have this jQuery:


$('#btnSave').click(function () { $.ajax({ url: "/Home/SaveDetailedInfo", type: "POST", data: JSON.stringify({ 'Options': someData}), dataType: "json", traditional: true, contentType: "application/json; charset=utf-8", success: function (data) { if (data.status == "Success") { alert("Done"); } else { alert("Error occurs on the Database level!"); } }, error: function () { alert("An error has occured!!!"); } }); });


Then I want to submit my form. In Controller I have 2 Actions:


public ActionResult SaveDetailedInfo(Option[] Options) { return Json(new { status = "Success", message = "Success" }); } [HttpPost] public ActionResult Save() { return RedirectToAction("Index", "Home"); }


The problem is when I have

type="submit"

in my button, I can’t reach

SaveDetailedInfo

Action, cause ajax gives me

error

, but when I remove

type="submit"

, ajax works fine, but

Save

Action never executes.

Please, any ideas how to execute both Actions? I thought maybe after

Ajax > Success

try to add

type=submit

through jquery and use

.click()

, but it sounds strange to me.

Tiếp tục với các bài viết trước, nay mình chia sẻ cách phân trang bằng Ajax trong ASP.NET MVC 5. Bài trước mình làm phân trang đơn giản bạn có thể xem lại tại đây

Bài này mình dùng code của bài trước chỉ sửa lại xiu là được! ::)Bạn mở file HomeController.cs trong thư mục Controllers lên và chỉnh thêm cho mình như code sau:

public ActionResult Lists() { return View(); } [HttpGet] public JsonResult getAllPost(string txtSearch, int? page) { var data = (from s in _db.Posts select s); if (!String.IsNullOrEmpty(txtSearch)) { ViewBag.txtSearch = txtSearch; data = data.Where(s => s.Title.Contains(txtSearch)); } if (page > 0) { page = page; } else { page = 1; } int start = (int)(page – 1) * pageSize; ViewBag.pageCurrent = page; int totalPage = data.Count(); float totalNumsize = (totalPage / (float)pageSize); int numSize = (int)Math.Ceiling(totalNumsize); ViewBag.numSize = numSize; var dataPost = data.OrderByDescending(x => x.Id).Skip(start).Take(pageSize); List listPost = new List (); listPost = dataPost.ToList(); // return Json(listPost); return Json(new { data = listPost,pageCurrent = page,numSize=numSize }, JsonRequestBehavior.AllowGet); }

+ getAllPost(): return về dữ liệu Json cho phía client xử lý, đồng thời cũng nhận dữ liệu từ client gửi đến để xử lý phân trang+ Lists(): return về View, do đó đồi hỏi bạn phải tạo một khung nhìn(View), sau khi tạo xong bạn sẽ được file Lists.cshtml trong thư mục Views/Post/Lists.cshtmlbạn open và chỉnh sửa giao điện file như sau:

@model MVC5_HelloWorld.Models.Post

List Posts

Add

Search

Search

STT	Title	Body	Created_at	Updated_at	Edit	Delete

Chú ý: chổ class=”load-list” và id=”load-pagination” dùng để hiển thị nội dùng ra và hiển thị nút phân trang

Xong giờ ta thiết lập code Ajax để xử lý phân trang trong ASP.NET MVC 5 thôi nào, trong đoạn code dưới đây mình có chú thích từng sự kiện, đoạn code dài quá, nên mình tách ra, cho dễ hình dung nghe

$(document).ready(function () { //function load pagination var load = function (txtSearch, page) { $.ajax({ url: ‘@Url.Action(“getAllPost”,”Post”)’, type: “GET”, data: { txtSearch:txtSearch , page: page }, dataType: ‘json’, contentType: ‘application/json;charset=utf-8’, success: function (result) { console.log(result); var str = “”; $.each(result.data, function (index, value) { //convert date to string var dateCreated = value.Created_at; var dateCreated_string = new Date(parseInt(dateCreated.replace(“/Date(“, “”).replace(“)/”, “”), 10)); var created_at = dateCreated_string.getFullYear() + “/” + dateCreated_string.getMonth() + “/” + dateCreated_string.getDate(); var dateUpdated = value.Updated_at; var dateUpdated_string = new Date(parseInt(dateUpdated.replace(“/Date(“, “”).replace(“)/”, “”), 10)); var Updated_at = dateUpdated_string.getFullYear() + “/” + dateUpdated_string.getMonth() + “/” + dateUpdated_string.getDate(); // //create list post var dateUpdated = new Date(value.Updated_at); str += ”

“; str += ”

“+(value.Id)+”

“; str += ”

“+value.Title + ”

“; str += ”

” + value.Body + ”

“; str += ”

” + created_at+ ”

“; str += ”

“+ Updated_at + ”

“; str += ”

Modify

“; str += ”

Delete

“; str += ”

“; //create pagination var pagination_string = “”; var pageCurrent = result.pageCurrent; var numSize = result.numSize; //create button previous if (pageCurrent > 1) { var pagePrevious = pageCurrent – 1; pagination_string += ‘

Previous

‘; } for (i = 1; i <= numSize; i++){ if (i == pageCurrent) { pagination_string += ‘

‘+pageCurrent+’

‘; } else { pagination_string += ‘

‘+i+’

‘; } } //create button next if (pageCurrent > 0 && pageCurrent < numSize) { var pageNext = pageCurrent + 1; pagination_string += ‘

Next

‘; } //load pagination $(“#load-pagination”).html(pagination_string); }); //load str to class=”load-list” $(“.load-list”).html(str); } }); } //load init load(null, 1); });

Bên trên là đoạn code mình xử lý load phân trang, mình sẽ chèn vào 2 tham số (txtSearch,page), thông thường ban đầu, page=1, txtSearch=null

url: ‘@Url.Action(“getAllPost”,”Post”)’: sẽ đi đến function getAllPost() file HomeControlle.cs, sao đó xử lý xong, return về dữ liệu theo kiểu Json

Các bạn có thể nhìn thấy mình có nhận dữ liệu về là kiểu Json, sao đó dùng $.earch() để lập dữ liệu ra. Bên cạnh đó bạn xem thẻ trong đoạn code trên mình có khai báo, giúp ta có thể dùng Ajax lấy ra số page để hiển thị

Tiếp tục ta xây dựng sự kiện click phân trang: ta sẽ click vào để lấy giá trị page

//click event pagination $(“body”).on(“click”,”.pagination li a”,function (event) { event.preventDefault(); var page = $(this).attr(‘data-page’); //load event pagination var txtSearch = $(“.txtSearch”).val(); if (txtSearch != “”) { load(txtSearch, page) } else { load(null, page); } });

Trong đoạn code trên mình click vào thẻ để lấy dữ liệu từ page-page, sau đó chèn vào hàm load(txtSearch,page) để gọi Ajax

Tiếp tục ta xây dựng hàm tìm kiếm

//click event search $(“#search”).click(function () { var txtSearch = $(“.txtSearch”).val(); if (txtSearch != “”) { load(txtSearch, 1) } else { load(null, 1); } });

Đoạn code bên trên mình bắt sự kiện click tìm kiếm, sao đó lấy giá trị tìm kiếm chèn vào làm load()

Đoạn code Full Ajax

$(document).ready(function () { //function load pagination var load = function (txtSearch, page) { $.ajax({ url: ‘@Url.Action(“getAllPost”,”Post”)’, type: “GET”, data: { txtSearch:txtSearch , page: page }, dataType: ‘json’, contentType: ‘application/json;charset=utf-8’, success: function (result) { console.log(result); var str = “”; $.each(result.data, function (index, value) { //convert date to string var dateCreated = value.Created_at; var dateCreated_string = new Date(parseInt(dateCreated.replace(“/Date(“, “”).replace(“)/”, “”), 10)); var created_at = dateCreated_string.getFullYear() + “/” + dateCreated_string.getMonth() + “/” + dateCreated_string.getDate(); var dateUpdated = value.Updated_at; var dateUpdated_string = new Date(parseInt(dateUpdated.replace(“/Date(“, “”).replace(“)/”, “”), 10)); var Updated_at = dateUpdated_string.getFullYear() + “/” + dateUpdated_string.getMonth() + “/” + dateUpdated_string.getDate(); // //create list post var dateUpdated = new Date(value.Updated_at); str += ”

“; str += ”

“+(value.Id)+”

“; str += ”

“+value.Title + ”

“; str += ”

” + value.Body + ”

“; str += ”

” + created_at+ ”

“; str += ”

“+ Updated_at + ”

“; str += ”

Modify

“; str += ”

Delete

“; str += ”

“; //create pagination var pagination_string = “”; var pageCurrent = result.pageCurrent; var numSize = result.numSize; //create button previous if (pageCurrent > 1) { var pagePrevious = pageCurrent – 1; pagination_string += ‘

Previous

‘; } for (i = 1; i <= numSize; i++){ if (i == pageCurrent) { pagination_string += ‘

‘+pageCurrent+’

‘; } else { pagination_string += ‘

‘+i+’

‘; } } //create button next if (pageCurrent > 0 && pageCurrent < numSize) { var pageNext = pageCurrent + 1; pagination_string += ‘

Next

‘; } //load pagination $(“#load-pagination”).html(pagination_string); }); //load str to class=”load-list” $(“.load-list”).html(str); } }); } //click event pagination $(“body”).on(“click”,”.pagination li a”,function (event) { event.preventDefault(); var page = $(this).attr(‘data-page’); //load event pagination var txtSearch = $(“.txtSearch”).val(); if (txtSearch != “”) { load(txtSearch, page) } else { load(null, page); } }); //click event search $(“#search”).click(function () { var txtSearch = $(“.txtSearch”).val(); if (txtSearch != “”) { load(txtSearch, 1) } else { load(null, 1); } }); //load init load(null, 1); });

Demo:

Benefits of Ajax

• Callbacks
• Making Asynchronous Calls
• User-Friendly
• Improve the speed, performance and usability of a web application

Implementation of Ajax can be done in two way in ASP.Net Application

• using Update Panel and,
• using jQuery

What Advances have Been Made to Ajax?

JavaScript is the client-side scripting language and XML is a mark-up language to define data. And we have, JSON(JavaScript Object Notation) as another mark-up language to define data as well. JSON is much easier to use with JavaScript than XML. After the combination of JavaScript and Ajax, the XML Web Services are being replaced by JSON Web Services.

Another major advance to JavaScript and Ajax is the JavaScript object library called jQuery, which is the free, open-source software. It is a wrapper for JavaScript. jQuery is used to write the JavaScript to navigate and manipulate a page and make asynchronous Ajax callbacks.

Hence, Ajax callbacks have become standard programming practices by using jQuery and JSON Web Services for designing and developing web applications.

AJAX is Based on Internet Standards

AJAX is based on internet standards, and uses a combination of:

• XMLHttpRequest object (to exchange data asynchronously with a server)
• JavaScript/DOM (to display/interact with the information)
• CSS (to style the data)
• XML (often used as the format for transferring data)

AJAX applications are browser- and platform-independent!

What is Ajax?

As we all know, AJAX means Asynchronous JavaScript and XML. It is a client-side script that communicates to and from a server/database without the need for a postback or a complete page refresh. The Ajax speeds up response time.

In other words, Ajax is the method of exchanging data with a server, and updating parts of a web page, without reloading the entire page.

Using Ajax in Asp.Net MVC

Ajax

So starting of from the beginning Ajax is used for Asynchronous Javascript and XML. We can use it for many purposes. Few basic uses of Ajax are:-

• Update page without reloading the page providing better performance.
• Request data from a server – after the page has loaded which can be used in loading Partial Views.
• Send data to a server without reload – in the background making it easier to performance Save, Delete operations smoothly.

Ajax in Asp.Net MVC

Ajax can be used anywhere where we can use jquery. But we will be watching few examples of different ways of using Ajax in Asp.Net MVC. We will be posting data on MVC Controller without refreshing the page. So let’s start from beginning:-

Step-1

So , first of all we will be creating a new view and adding few field on it . Now we will be trying to send the values of these fields on controller without reload and especially using Ajax.

So We will add a new view and few fields on it.

@{ ViewBag.Title = “Home Page”; }

Ajax Call Getting started

Employee Id:

Employee Name:

Employee Salary:

@{ ViewBag.Title = “Home Page”; }

Example Explained

In the example above, when a user types a character in the input field, a function called “showHint()” is executed.

The function is triggered by the onkeyup event.

Here is the HTML code:

Example

Start typing a name in the input field below:

First name:

Suggestions:

Code explanation:

First, check if the input field is empty (str.length == 0). If it is, clear the content of the txtHint placeholder and exit the function.

However, if the input field is not empty, do the following:

• Create an XMLHttpRequest object
• Create the function to be executed when the server response is ready
• Send the request off to an ASP file (gethint.asp) on the server
• Notice that q parameter is added gethint.asp?q=”+str
• The str variable holds the content of the input field

Ajax Call Getting started

Employee Id:

Employee Name:

Employee Salary:

$(function () { $(“#btnGet”).click(function () { var empIds = $(“#txtId”).val(); var empNames = $(“#txtName”).val(); var empSalarys = $(“#txtSalary”).val(); $.ajax({ type: “POST”, url: “/Home/AjaxMethod”, data: ‘{empId: “‘ + empIds + ‘” , empName: “‘ + empNames + ‘” , empSalary: “‘ + empSalarys + ‘” }’, contentType: “application/json; charset=utf-8”, dataType: “json”, success: function (response) { alert(“Hello: ” + response.EmpName + ” Your Employee Id Is: ” + response.EmpId + “And Your Salary Is: ” + response.EmpSalary); }, failure: function (response) { alert(response.responseText); }, error: function (response) { alert(response.responseText); } }); }); });

[HttpPost] public JsonResult AjaxMethod(string empId, string empName, string empSalary) { PersonModel person = new PersonModel { EmpId = empId, EmpName = empName, EmpSalary = empSalary }; return Json(person); }

// second $(function () { $(“#btnGet2”).click(function () { debugger; var empIds = $(“#txtId”).val(); var empNames = $(“#txtName”).val(); var empSalarys = $(“#txtSalary”).val(); $.ajax({ url: “/Home/AjaxMethod”, dataType: “json”, type: “POST”, cache: false, data: { empId: empIds, empName: empNames, empSalary: empSalarys }, success: function (response) { alert(“Hello: ” + response.EmpName + ” Your Employee Id Is: ” + response.EmpId + “And Your Salary Is: ” + response.EmpSalary); }, failure: function (response) { alert(response.responseText); }, error: function (response) { alert(response.responseText); } }) }) });

[HttpPost] public JsonResult AjaxMethod(string empId, string empName, string empSalary) { PersonModel person = new PersonModel { EmpId = empId, EmpName = empName, EmpSalary = empSalary }; return Json(person); }

//third $(function () { $(“#btnGet3”).click(function () { var intrestedInAll = { EmpId: $(“#txtId”).val(), EmpName: $(“#txtName”).val(), EmpSalary: $(“#txtSalary”).val(), }; debugger; $.ajax({ url: ‘/Home/AjaxMethodWithObject’, type: ‘POST’, data: { “queryFilter”: JSON.stringify(intrestedInAll) }, cache: false, success: function (response) { alert(“Hello: ” + response.EmpName + ” Your Employee Id Is: ” + response.EmpId + “And Your Salary Is: ” + response.EmpSalary); }, failure: function (response) { alert(response.responseText); }, error: function (response) { alert(response.responseText); } }); }); });

[HttpPost] public JsonResult AjaxMethodWithObject(string queryFilter) { PersonModel personModel = JsonConvert.DeserializeObject (queryFilter); return Json(personModel); }

//fourth $(function () { $(“#btnGet4”).click(function () { var personModel = { EmpId: $(“#txtId”).val(), EmpName: $(“#txtName”).val(), EmpSalary: $(“#txtSalary”).val(), }; personModel = JSON.stringify(personModel); debugger; $.ajax({ type: “POST”, url: “/Home/AjaxMethodWithModel”, data: personModel, dataType: “json”, contentType: ‘application/json; charset=utf-8’, success: function (response) { alert(“Hello: ” + response.EmpName + ” Your Employee Id Is: ” + response.EmpId + “And Your Salary Is: ” + response.EmpSalary); }, failure: function (response) { alert(response.responseText); }, error: function (response) { alert(response.responseText); } }); }); });

[HttpPost] public JsonResult AjaxMethodWithModel(PersonModel personModel) { PersonModel person = new PersonModel { EmpId = personModel.EmpId, EmpName = personModel.EmpName, EmpSalary = personModel.EmpSalary }; return Json(person); }

//fifth function GetAjaxDataPromise(url, postData) { debugger; var promise = $.post(url, postData, function (promise, status) { }); return promise; }; $(function () { $(“#btnGet5”).click(function () { debugger; var promises = GetAjaxDataPromise(‘@Url.Action(“AjaxMethod”, “Home”)’, { EmpId: $(“#txtId”).val(), EmpName: $(“#txtName”).val(), EmpSalary: $(“#txtSalary”).val() }); promises.done(function (response) { debugger; alert(“Hello: ” + response.EmpName + ” Your Employee Id Is: ” + response.EmpId + “And Your Salary Is: ” + response.EmpSalary); }); }); });

[HttpPost] public JsonResult AjaxMethod(string empId, string empName, string empSalary) { PersonModel person = new PersonModel { EmpId = empId, EmpName = empName, EmpSalary = empSalary }; return Json(person); }

[HttpPost] public JsonResult AjaxMethodWithModel(PersonModel personModel) { PersonModel person = new PersonModel { EmpId = personModel.EmpId, EmpName = personModel.EmpName, EmpSalary = personModel.EmpSalary }; return Json(person); }

The complete code for controller is

public class HomeController : Controller { public ActionResult Index() { return View(); } [HttpPost] public JsonResult AjaxMethod(string empId, string empName, string empSalary) { PersonModel person = new PersonModel { EmpId = empId, EmpName = empName, EmpSalary = empSalary }; return Json(person); } [HttpPost] public JsonResult AjaxMethodWithObject(string queryFilter) { PersonModel personModel = JsonConvert.DeserializeObject (queryFilter); return Json(personModel); } [HttpPost] public JsonResult AjaxMethodWithModel(PersonModel personModel) { PersonModel person = new PersonModel { EmpId = personModel.EmpId, EmpName = personModel.EmpName, EmpSalary = personModel.EmpSalary }; return Json(person); } }

Response-

So When jquery ajax request completed you can check the response from success method. You can check in the examples above. So this is how we can use Ajax in Asp.Net MVC.