ASP.Net MVC ajax controller call

Question

I am trying to call the controller by clicking a button. My goal is getting date values from view and calling other data from controller, but ajax thing is so bugging me out. So I made a testing one, but it still does not work.

I followed several tutorials and SO questions, and this is how I figured out to call the controller method ("testtest") through javascript ajax functions. Here is the tutorial that I followed for the last time.

$(document).ready(function () {
    $('#btnSelectDate').click(function () {
        alert("working");
        var text= $('#txtStartDateI').val();
        var button= $('#btnSelectDate').val();
        alert(text + " " + button);
        $.ajax({
            url: "/Home/testtest",
            type: "post",
            datatype: "text",
            data: { btnSelectDate: button, txtStartDate: text},
            success: function (data) {
                ('#testarea').html(data);
            },
            error: function () {
                $('#testarea').html("ERROR");
            }
        });
    });
});

And this is the method "testtest":

[HttpPost]
public string testtest( string btnSelectDate,string txtStartDate ) {
    return ("btnValue : " + btnSelectDate + "\ntxtStartDate: " + txtStartDate);
}

When I click the button, the alerts are working, but it does not call the method "testtest" in Homecontroller. I set the breakpoints in controller, but it does not go through. After it shows the alert dialog, the whole page blinks and nothing has been changed. I tried to make the <div id="testarea"></div> get the text value.

I tried different URL forms like:

url: '@Url.Action("testtest","Home")'
url: 'localhost/Home/testtest'

But it still does not hit the controller.

Does ajax require any special scripts to add? (I guess I added ajax scripts since there are some links containing 'ajax'.) Or do I need to do something special to call the method using ajax?

The bellow is my whole code. This is my controller "Home":

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace haha.Controllers {
    public class HomeController : Controller {
        public ActionResult View() {
            return View("View");
        }

        [HttpPost]
        public string testtest( string btnSelectDate,string txtStartDate ) {
            return ("btnValue : " + btnSelectDate + "\ntxtStartDate: " + txtStartDate);
        }
    }
}

View: (and for the scripts, I think there are several scripts which are duplicated, but I can't figure those out. What can I remove?)

@using System;
@using System.Collections.Generic;
@using System.Linq;
@using System.Web;
@using System.Web.Mvc;

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>View</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" />

        <script src="~/Scripts/jquery-1.5.1.min.js"></script>
        <script src="~/Scripts/jquery.validate.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

        <script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

        <script src="~/scripts/jquery-*.*.*.min.js"></script>
        <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

        <script>
            $(function () {
                $(".Datepicker").datepicker({
                    dateFormat: "yy-mm-dd",
                    changeMonth: true,
                    changeYear: true,
                    nextText: 'next Month',
                    prevText: 'previous Month',
                    showButtonPanel: true,
                    currentText: 'Today'
                })
            });
        </script>

        <script type="text/javascript">  
            $(document).ready(function () {
                $('#btnSelectDate').click(function (event) {
                    alert("working");
                    var text= $('#txtStartDateI').val();
                    var button= $('#btnSelectDate').val();
                    $.ajax({
                        url: "/Home/testtest",
                        type: "post",
                        datatype: "text",
                        data: { btnSelectDate: button, txtStartDate: text},
                        success: function (data) {
                            ('#testarea').html(data);
                        },
                        error: function () {
                            $('#testarea').html("ERROR");
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        this is test area
        <div id="testarea"></div>
        <hr />
        <p></p>
        <div>
        <form id="formDTInsurer">
            StartDate:
            <input type="text" class="Datepicker" id="txtStartDateI" name="txtStartDate">
            <button type="submit" id="btnSelectDate" name="btnSelectDate" value="InsurerDate">Select</button>
            </form>
        </div>
    </body>
</html>

Edit

Following Stephen Muecke's comment, I inspected the console using chrome tool. The following is the error.

                                                                      jquery-1.5.1.js:869 
Uncaught TypeError: b.parents(...).addBack is not a function
    at Object.parse (jquery.validate.unobtrusive.min.js:19)
    at HTMLDocument.<anonymous> (jquery.validate.unobtrusive.min.js:19)
    at Object.resolveWith (jquery-1.5.1.js:862)
    at Function.ready (jquery-1.5.1.js:420)
    at HTMLDocument.DOMContentLoaded (jquery-1.5.1.js:1055)
parse            @ jquery.validate.unobtrusive.min.js:19
(anonymous)      @ jquery.validate.unobtrusive.min.js:19
resolveWith      @ jquery-1.5.1.js:862
ready            @ jquery-1.5.1.js:420
DOMContentLoaded @ jquery-1.5.1.js:1055

Since there were more errors with these scripts, I commented out some of those, and it actually reduced the number of errors. The only left is the one above.The following is what I now have in current html file.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" />

    <!--<script src="~/Scripts/jquery-1.5.1.min.js"></script>-->
    <!--<script type="text/javascript" src="~/Scripts/jquery-1.7.1.js"></script>-->
    <!--<script src="~/scripts/jquery-*.*.*.min.js"></script>-->
    <!--<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>-->

And include only one copy of the scripts and in the correct order - jquery-{version}.js then jquery-validate.js and jquery.validate.unobtrusive.js and jquery-ui.js (but that is not related to your error) — user3559349
– user3559349, Commented Feb 14, 2017 at 23:54
Of course there are error(s) (otherwise it would hit the method) — user3559349
– user3559349, Commented Feb 14, 2017 at 23:55
Oh :'D yeah then there are errors.. but how could i find those? in the web browser, nothing changes. I will fix the scripts one thanks! — pebble
– pebble, Commented Feb 14, 2017 at 23:58

Michel Amorosa · Accepted Answer · 2017-02-16 16:17:39Z

1

It is awkward to include two versions of jquery (1.5 and then 1.7), you have to find the right order and have only one jquery include. Maybe replacing the 1.5 by another one ?

answered Feb 16, 2017 at 16:17

Michel Amorosa

5055 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Iman Salehi · Accepted Answer · 2017-02-15 12:00:47Z

1

send your parameters by json type :

  type: 'POST',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify({ btnSelectDate: button, txtStartDate: text})

and use alert(text); and alert(button);and make sure their values are correct(not null)

answered Feb 15, 2017 at 12:00

Iman Salehi

9562 gold badges15 silver badges37 bronze badges

4 Comments

pebble Over a year ago

Thank you for the answer. The alerts are getting the values what they are supposed to get. However, the error which I added in the post happens again..

Michel Amorosa Over a year ago

You're welcome, It is awkward to include two versions of jquery (1.5 and then 1.7), you have to find the right order and have only one jquery include. Maybe replacing the 1.5 by the 1.7 ?

pebble Over a year ago

Yesss you are right!! I had no idea so copied all the scripts, but after I read your comment, I deleted 1.5 and change to the 1.11 (I think this is the newest when I searched).. and not there is no error! Thank you so much :D

Michel Amorosa Over a year ago

I copied the comment as an answer so you can validate it as an answer. Have a nice day

Collectives™ on Stack Overflow

ASP.Net MVC ajax controller call

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related