0

I am working with Jquery AJAX Call in MVC Application. My view looks like this :

<p>

    Name @Html.TextBox("Name")
    Date @Html.TextBox("Date")
    <input type="submit" id="SubmitName" value="Submit" />
</p>

My AJAX call is as follows :

<script type="text/javascript">
    function send() {
        var Details = JSON.stringify({
            StudentName: $("#Name").val(),
            DateofJoining: $("#Date").val()
        });
        $('#target').html('sending..');

        $("SubmitName").click(function () {

            $.ajax({
                url: "/DQR/Details",
                type: "POST",
                dataType: "json",
                contentType: "application/json",
                data : Details ,
                success: function (data) {
                    $('#target').html(data.msg);
                },

            });
        })
    }
</script>

And my controller looks like this :

[HttpPost]
        public ActionResult Details (string StudentName, string DateofJoining)
        {

            var result = (from dc in _db.Details
                          where dc.Name== StudentName
                          select dc.Address);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

I don't know what I'm missing. The ajax request is not working. Could anyone help me with this ?

3 Answers 3

1

Imagining that ur controller name is DQR then you need to write as below:-

 $.ajax({
                url: "/DQR/Details",
                type: "POST",
                dataType: "json",
                contentType: "application/json",
                data : Details ,
                success: function (data) {
                    $('#target').html(data.msg);
                },

            });

and id should be:-

 $("#SubmitName").click(function () {
        var Details = JSON.stringify({
        StudentName: $("#Name").val(),
        DateofJoining: $("#Date").val()
    });
    $('#target').html('sending..');

    //// your ajax call
}});

and what is Send()? i mean the click event should be under $(document).ready(function() {});

I would suggest take simple button rather than "submit" if you are playing client side with that.

2
  • Thanks @Neel. I have made a change in that. But Still I couldn't get the request
    – Priya
    Jul 22, 2015 at 8:23
  • put debugger; in code and check if it is called or not @Priya
    – Neel
    Jul 22, 2015 at 8:34
1

Bind click handler properly, move Details object creation in click handler

$(function() {
    $("#SubmitName").click(function () {
        var Details = JSON.stringify({
            StudentName: $("#Name").val(),
            DateofJoining: $("#Date").val()
        });
        $('#target').html('sending..');
        $.ajax({
            url: "/DQR/Details",
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            data : Details ,
            success: function (data) {
                $('#target').html(data.msg);
            }
        });     
    });
});
0
0

You can use jQuery $.post method as well.

Here is an example.

var StudentName = $("#Name").val();
var DateofJoining = $("#Date").val();

$.post('/Controller/Action', { 'StudentName': StudentName , 'DateofJoining': DateofJoining  }, function(data) {
    $('#target').html(data.msg);
}, 'json');

Here is more information about $.post

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.