How to update TextBox in MVC Ajax
We cannot provide the ID of the textbox control directly in the UpdateTargetId property. Boer, we can work to make this happen. Please put on the hit mention code for the same.
// This callback method after successful ajax request.
function fnOnSuccess(context) {
alert(context); //this context having all the current ajax req & res information.
var response = context.get_data(); //Using this get_data() method we can get the response from server.
$('#txtajaxResponse')[0].value = response;
}
<!-- Code in .aspx page -->
<%=Ajax.ActionLink("TextBox in UpdateTargetId","GetInfo","Ajax",new AjaxOptions{OnSuccess = "fnOnSuccess"}) %>
<%=Html.TextBox("txtajaxResponse")%>
Thank you, Pon Kumar Pandian.T
a source to share
you can achieve this simple concept using
1- Post \ Get
2- Ajax
Note: just replace $ ("# myform"). html () with $ ("# mytext"). text = "data"
1- Using Get \ Post
/////// Controller post and get simple text value
[HttpPost]
public string Contact(string message)
{
return "<h1>Hi,</h1>we got your message, <br />" + message + " <br />Thanks a lot";
}
//// in the view add a link to Javascript (jQuery) files
@section Scripts{
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.intellisense.js"></script>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
}
/// then add the Post method like this:
<script type="text/javascript">
/// post and get text value
$("#send").on("click", function () {
$.post('', { message: $('#msg').val() })
//// empty post('') means post to the default controller,
///we are not pacifying different action or controller
/// however we can define a url as following:
/// var url = "@(Url.Action("GetDataAction", "GetDataController"))"
.done(function (response) {
$("#myform").html(response);
})
.error(function () { alert('Error') })
.success(function () { alert('OK') })
return false;
});
</script>
2. Also you can use Get only like this:
/////Controller = Home
//// Action = FullName
///// get only simple text message
[HttpGet]
public string FullName()
{
return "full Name: Mahmoud Sayed";
}
/// in view:
$("#getfullname").on("click", function () {
var url = "@(Url.Action("FullName", "Home"))"
$.get(url, { })
.done(function (response) {
$("#myform").html(response)
})
.error(function () { alert('Error') })
.success(function () { alert('OK') })
return false;
});
</script>
3 Now let's say you want to do this using $ .Ajax and JSON:
// Post JSON data add using System.Net;
[HttpPost]
public JsonResult JsonFullName(string fname, string lastname)
{
var data = "{ \"fname\" : \"" + fname + " \" , \"lastname\" : \"" + lastname + "\" }";
//// you have to add the JsonRequestBehavior.AllowGet
//// otherwise it will throw an exception on run-time.
return Json(data, JsonRequestBehavior.AllowGet);
}
Then inside your view: add an event, click on the type input button, or even submit: Just make sure the JSON data is well formatted.
$("#jsonGetfullname").on("click", function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "@(Url.Action("JsonFullName", "Home"))",
data: "{ \"fname\" : \"Mahmoud\" , \"lastname\" : \"Sayed\" }",
dataType: "json",
success: function (data) {
var res = $.parseJSON(data);
$("#myform").html("<h3>Json data: <h3>" + res.fname + ", " + res.lastname)
},
error: function (xhr, err) {
alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
alert("responseText: " + xhr.responseText);
}
})
});
</script>
amuses,
Mahmoud Sayed
a source to share