ASP.Net MVC Ajax控制器調用

Question

我試圖通過單擊按鈕來調用控制器。 我的目標是從視圖中獲取日期值並從控制器中調用其他數據，但是ajax的事情是如此困擾我。 因此，我做了一個測試，但仍然無法正常工作。

我遵循了一些教程和相關問題，這就是我想出了如何通過javascript ajax函數調用控制器方法（“ testtest”）。 這是我最后一次學習的教程。

$(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");
            }
        });
    });
});

這就是方法“ testtest”：

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

當我單擊按鈕時，警報正在起作用，但是在Homecontroller中它沒有調用方法“ testtest”。 我在控制器中設置了斷點，但沒有通過。 顯示警報對話框后，整個頁面閃爍，並且沒有任何更改。 我試圖使<div id="testarea"></div>獲得文本值。

我嘗試了不同的URL形式，例如：

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

但是它仍然沒有擊中控制器。

ajax是否需要添加任何特殊腳本？ （我想我添加了ajax腳本，因為有些鏈接包含'ajax'。）或者我是否需要做一些特殊的事情才能使用ajax調用該方法？

波紋管是我的全部代碼。 這是我的控制器“主頁”：

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);
        }
    }
}

查看：（對於這些腳本，我認為有幾個腳本是重復的，但是我無法弄清楚。我可以刪除什么？）

@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>

編輯

按照Stephen Muecke的評論，我使用chrome工具檢查了控制台。 以下是錯誤。

                                                                      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

由於這些腳本存在更多錯誤，因此我注釋了其中一些錯誤，實際上減少了錯誤數量。 唯一剩下的就是上面的。以下是我當前在html文件中擁有的內容。

<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>-->

Answer 1

通過json類型發送參數：

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

並使用alert(text); 和alert(button); 並確保其值正確（不為null）

Answer 2

包括兩個版本的jquery（分別為1.5和1.7）是很尷尬的，您必須找到正確的順序並僅包含一個jquery。 也許用另一個替換1.5？

ASP.Net MVC Ajax控制器調用

問題描述

2 個解決方案

解決方案1
1 2017-02-15 12:00:47

解決方案2
1 已采納 2017-02-16 16:17:39

ASP.Net MVC Ajax控制器調用

問題描述

2 個解決方案

解決方案1 1 2017-02-15 12:00:47

解決方案2 1 已采納 2017-02-16 16:17:39

解決方案1
1 2017-02-15 12:00:47

解決方案2
1 已采納 2017-02-16 16:17:39