AliIybar at 13:54, 6 December 2016

2016-12-06T13:54:01Z

Dt1nh6: 1 revision imported

2016-05-09T13:27:46Z

1 revision imported

Macrop: Created page with "Category:MVC You can implement Ajax in two ways in MVC:- * Ajax libraries * Jquery Below is a simple sample of how to implement Ajax by using “Ajax” helper library. I..."

2014-12-01T23:00:35Z

Created page with "Category:MVC You can implement Ajax in two ways in MVC:- * Ajax libraries * Jquery Below is a simple sample of how to implement Ajax by using “Ajax” helper library. I..."

New page

[[Category:MVC]]
You can implement Ajax in two ways in MVC:-
* Ajax libraries
* Jquery

Below is a simple sample of how to implement Ajax by using “Ajax” helper library. In the below
code you can see we have a simple form which is created by using “Ajax.BeginForm” syntax.
This form calls a controller action called as “getCustomer”. So now the submit action click will
be an asynchronous ajax call.

<script language="javascript">
function OnSuccess(data1)
{
// Do something here
}
</script>
<div>
<%
var AjaxOpt = new AjaxOptions{OnSuccess="OnSuccess"};
%>
<% using (Ajax.BeginForm("getCustomer","MyAjax",AjaxOpt)) { %>
<input id="txtCustomerCode" type="text" /><br />
<input id="txtCustomerName" type="text" /><br />
<input id="Submit2" type="submit" value="submit"/></div>
<%} %>

In case you want to make ajax calls on hyperlink clicks you can use “Ajax.ActionLink” function
as shown in the below code.

[[File:Ajax1.jpg]]

So if you want to create Ajax asynchronous hyperlink by name “GetDate” which calls the “GetDate”
function on the controller , below is the code for the same. Once the controller responds this data is
displayed in the HTML DIV tag by name “DateDiv”.
<span id="DateDiv" />
<%:
Ajax.ActionLink("Get Date","GetDate",
new AjaxOptions {UpdateTargetId = "DateDiv" })
%>
Below is the controller code. You can see how “GetDate” function has a pause of 10 seconds.
public class Default1Controller : Controller
{
public string GetDate()
{
Thread.Sleep(10000);
return DateTime.Now.ToString();
}
}
The second way of making Ajax call in MVC is by using Jquery. In the below code you can see we are
making an ajax POST call to a URL “/MyAjax/getCustomer”. This is done by using “$.post”. All this
logic is put in to a function called as “GetData” and you can make a call to the “GetData” function on a
button or a hyper link click event as you want.
function GetData()
{
var url = "/MyAjax/getCustomer";
$.post(url, function (data)
{
$("#txtCustomerCode").val(data.CustomerCode);
$("#txtCustomerName").val(data.CustomerName);
}
)
}
What kind of events can be tracked in AJAX ?

[[File:Ajax2..jpg]]

← Older revision		Revision as of 13:54, 6 December 2016
Line 64:		Line 64:

	[[File:Ajax2..jpg]]		[[File:Ajax2..jpg]]
		+
		+	== Ajax Sample ==
		+	<pre class="brush:js;">
		+	function postForm(postData) {
		+	$.ajax({
		+	async: false,
		+	type: "POST",
		+	url: "/FormBuilder/JSon/SaveForm",
		+	data: JSON.stringify(postData),
		+	contentType: "application/json;charset=utf-8",
		+	dataType: "json",
		+	success: function (result) {
		+	alert('kk');
		+
		+	},
		+	error: function (response) {
		+	alert('error');
		+	}
		+	});
		+
		+	}
		+	</pre>

← Older revision	Revision as of 13:27, 9 May 2016
(No difference)

Implement Ajax in MVC - Revision history

AliIybar at 13:54, 6 December 2016

Dt1nh6: 1 revision imported

Macrop: Created page with "Category:MVC You can implement Ajax in two ways in MVC:- * Ajax libraries * Jquery Below is a simple sample of how to implement Ajax by using “Ajax” helper library. I..."