madan madan - 11 days ago 6
Ajax Question

Issue while calling action method with ajax contentType

I have an application that need to post back through Ajax. Getting problem while calling the

ActionMethod
. below are the code.

Controller :

[HttpGet]
public ActionResult Index()
{
return View();
}

public JsonResult AjaxTest(object name)
{
return Json("Welcome" + name, JsonRequestBehavior.AllowGet);
}


Cstml :

<form name="frmTest" method="POST">
@Html.Label("Your name Please")
@Html.TextBox("username")
<input class="btn btn-success btn-lg btn-block" type="submit" value="Login">




JQuery :

$(function () {
$("form[name='frmTest']").submit(function (e) {
var name = $('#username').val();
$.ajax(
{
type: "POST",
//contentType: "application/json; charset=utf-8",
url: "MyTest/AjaxTest",
dataType: "json",
data: { name:name },
success: function (data, status) {
alert("Pass"+data);
},
error: function () {
alert("Fail");
}
});
});

});


By using the above code break point hit to
AjaxTest
with the parameter. when I use
contentType: "application/json; charset=utf-8",
then the page postedback without hitting the break point.
But both cases I got fail alert. unable to find the issue,

Answer

I am not sure what you are trying to do but since in one of the comments you stated you will be saving stuff to the database, normally, in ASP MVC it would be done like this.

Create a class for whatever you will be posting using AJAX. For example, in this example, I created a class called Person

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

Then in your form you can have something like this:

@{
    ViewBag.Title = "Test";
}

<form name="frmTest" method="POST">
    @Html.Label("Your name Please")
    @Html.TextBox("username")
    <input class="btn btn-success btn-lg btn-block" type="submit" value="Login">
</form>

<script>
    $(function () {
        $("form[name='frmTest']").submit(function (e) {
            var name = $('#username').val();
            $.ajax(
            {
                type: "POST",
                //contentType: "application/json; charset=utf-8",
                url: "AjaxTest",
                dataType: "json",
                data: { "Age": 55, "Name": name },
                success: function (data, status) {
                    alert("Pass" + data);
                },
                error: function (ex) {
                    alert("Fail" + ex);
                }
            });
        });
    });

</script>

Then have an action which the JSON will be submitted to. For the above, the action will be like this:

public JsonResult AjaxTest(Person person)
{
    return Json("Welcome" +  person.Name, JsonRequestBehavior.AllowGet);
}

ASP MVC will take care of the binding for you. Please also note the url I am posting is "AjaxTest" and it will post to AjaxTest action method of the controller which served the form.

If you have a controller like below, then all of the above will work.

public class AccountController : Controller
{
    // This returns the view with the form
    public ActionResult Test()
    {
        return View();
    }
    public JsonResult AjaxTest(Person person)
    {
        return Json("Welcome" +  person.Name, JsonRequestBehavior.AllowGet);
    }
}