帶有AJAX的ASP.NET MVC無法按預期工作

Question

這是我想要達到的目標：

View1將name字符串發送到View2，View2將JSON發送到View1，然后View1解析並顯示數據。

View1像這樣將名稱字符串發送到View2：

    $(document).ready(function () {

                var myurl = "/Controller/View2";

                $("form").submit(function (event) {
                    $.ajax({
                        type: 'POST',
                        url: myurl,
                        data: $('#nameid').val(),
                        success: function (newdata) {

View2是一個返回JSON的控制器：

        public ActionResult View2(string nameid)
        {


    //do stuff


            return Json(jsObj, JsonRequestBehavior.AllowGet);
        }

View1控制器是這樣的：

    public ActionResult View1(string nameid)
    {
        if(!string.IsNullOrEmpty(nameid))
        {
            return RedirectToAction("View2", new { nameid = nameid });
        }
        else
        {
            return View();
        }

    }

我不知道我搞砸了哪一部分，但是當我單擊提交時，它會顯示JSON對象本身。 我該如何解決這種情況？ 謝謝。

編輯：這是我的View1視圖（我沒有View2控制器的視圖）：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="~/Scripts/cytoscape.js"></script>
</head>
<style>
    #cy {
        width: 80%;
        height: 80%;
        position: center;
        top: 0px;
        left: 0px;
    }
</style>
<body>

    <form>
        Enter a name:<br>
        <input type="text" name="nameid" id="nameid" value="">
        <br><br>
        <input type="submit" value="Send!">
    </form> 

    <div id="cy"></div>
    <script>

        var myVar = null


        $(document).ready(function () {



            $("form").submit(function (event) {
                //event.preventDefault();
                $.ajax({
                    type: 'POST',
                    url: "/Controller/View2",
                   data: { nameid: $('#nameid').val() },
                    success: function (newdata) {

                        var cy = cytoscape({


                            container: document.getElementById("cy"),
                            elements: JSON.parse(newdata)

                        });

                    }
                });

            });


        });



    </script>
</body>
</html>

Answer 1

首先，您必須阻止常規表單提交。

其次， nameid您的nameid值綁定到操作參數，必須為其指定適當的名稱。

第三。 您是否有一個名為ControllerController的控制器類？

$("form").submit(function (event) {
  event.preventDefault();
  var myurl = '@Url.Content("~/Controller/View2")';
  $.ajax({
    type: 'POST',
    url: myurl,
    data: { nameid: $('#nameid').val() },
    success: function (newdata) {
      console.log(newdata);
      // ...
    },
    error: function(xhr, status, error) {
      console.log("ERROR: " + status + " - " + error);
      console.log(xhr.responseText);
    });
  });

Answer 2

您可以嘗試像這樣重寫ajax並嘗試一下嗎。

 $.ajax({
                type: 'POST',
                url: '/Controller/View2',
                data:{ 
                       nameid: $('#nameid').val()
                      },
                success: function (newdata) {

Answer 3

請檢查您指定的網址是否正確。

var myurl = "/Controller/View2";

當您有一個名為MainGraph2的操作MainGraph2

另外，您將無法從Ajax調用重定向。 因此，請嘗試在Ajax成功回調函數中進行重定向。

另外，如其他答案中所述，您應將數據傳遞給控制器，如下所示：

data: { nameid: $('#nameid').val() },

編輯

一切看起來都很完美，請嘗試以下操作：

$("form").submit(function (event) {
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: "/Sample/View2",
        data: { nameid: $('#nameid').val() },
        success: function (newdata) {
            $("#cy").val(newdata);
         }
     });
  });

這里，Sample（ url：“ / Sample / View2” ）是控制器名稱（ SampleController ）。 另外，請確保不要以nameid作為參數調用視圖id

http://localhost/Sample/View1?nameid=Jason

如果以這種方式調用，它將重新播放json數據。

注意：我已將控制器命名為SampleController，將cy命名為文本的輸入類型。

帶有AJAX的ASP.NET MVC無法按預期工作

問題描述

3 個解決方案

解決方案1
1 2017-05-02 04:34:39

解決方案2
1 2017-05-02 04:41:25

解決方案3
1 已采納 2017-05-02 04:43:14

帶有AJAX的ASP.NET MVC無法按預期工作

問題描述

3 個解決方案

解決方案1 1 2017-05-02 04:34:39

解決方案2 1 2017-05-02 04:41:25

解決方案3 1 已采納 2017-05-02 04:43:14

解決方案1
1 2017-05-02 04:34:39

解決方案2
1 2017-05-02 04:41:25

解決方案3
1 已采納 2017-05-02 04:43:14