帶有Ajax的ViewModel中的更新列表ASP.NET MVC

我有一個列表（列表）模型對象，它在視圖中呈現。我想在不刷新頁面的情況下添加到列表中 - 因此我認爲Ajax是一個很好的解決方案。我目前很難得到它的工作。帶有Ajax的ViewModel中的更新列表ASP.NET MVC

我的視圖渲染包含列表的PartialView。

有人可以給我一個提示如何將列表傳遞給控制器，然後返回到視圖而不更新整個頁面？

我希望我的問題有道理。

/克里斯

編輯：

我一直在嘗試使用jQuery。看起來是這樣的：

<script> 
$(document).ready(function() { 
    $("#btnSave").click(function() { 

     $.ajax(
      { 
       type: "POST", //HTTP POST Method 
       url: "/Video/Index", // Controller/View 
       data: { //Passing data 
        testString: $("#txtArea").val(), 
        videoID: '@(Model.Video.iVideo_ID)', 
        taskID: document.getElementById('dropVal').value 
       } 
      }).success(function() { 
       $("#proever").load("/Video/Index"); 
      }); 
    }) 
})

用這種方法我到HttpPost方法在我的控制器。我將這些參數成功傳遞給它。

[HttpPost] 
    public ActionResult Index(CommentViewModel viewModel) 
    { 
     System.Diagnostics.Debug.WriteLine(viewModel.testString); 
     System.Diagnostics.Debug.WriteLine(viewModel.videoID); 
     System.Diagnostics.Debug.WriteLine(viewModel.taskID); 



     viewModel.testString = "new text string"; 

     return View(viewModel); 
    }

現在的問題是，我無法獲取更新的viewmodel回到視圖..我做錯了什麼？在這個例子中，我不更新列表中，但只是一個測試字符串是否我能得到它更新的回視..

來源

2017-04-20 crellee

爲什麼你想將列表傳遞給控制器？ –

我想我應該把它傳遞給控制器中的[HttpPost]方法，但我不確定。我願意接受任何解決方案。 – crellee

您尚未提供足夠的信息。「列表」只顯示或可以編輯現有列表中的項目嗎？ –

對於那些誰的興趣我解決了這樣的問題：

<script> 
$(document).ready(function() { 
    $("#btnSave").click(function() { 

     $.ajax(
      { 
       type: "POST", //HTTP POST Method 
       url: "/Video/AddComment", // Controller/View 
       data: { //Passing data 
        //Reading text box values using Jquery 
        sComment: $("#txtArea").val(), 
        videoID: '@(Model.Video.iVideo_ID)', 
        taskID: document.getElementById('dropVal').value 
       } 
      }).success(function() { 
       console.log("good"); 
       var txt = document.getElementById('txtArea').value; 
       console.log(txt); 

       var taskId = document.getElementById('dropVal').value; 
       var taskCont = $("#dropVal option:selected").text(); 
       var taskContNum = Number(taskCont) - 1 
       console.log(taskCont); 

       var node = document.createTextNode(txt); 

       var para = document.createElement("div"); 
       para.appendChild(node); 

       document.getElementById('taskPalace').appendChild(para); 

       document.getElementById('cola-' + '' + taskContNum).appendChild(para); 

       document.getElementById('txtArea').value = ""; 
      }); 
    }) 
})

所以，如果請求成功在HttpPost方法中沒有任何錯誤，它將評論添加到數據庫（通過HttpPost），jquery將它添加到視圖中。

來源

2017-04-20 15:33:22 crellee

你可以試試這個：

$(document).ready(function() { 
    $("#btnSave").click(function() { 
    var model = { 
        testString: $("#txtArea").val(), 
        videoID: '@(Model.Video.iVideo_ID)', 
        taskID: document.getElementById('dropVal').value 
       }; 
     $.ajax(
      { 
       type: "POST", //HTTP POST Method 
       url: "/Video/Index", // Controller/View      
       data: JSON.stringify({ viewModel: model }) 
       async: false, 
       processData: false, 
       contentType: false, 
       dataType: 'json' 
      }).success(function (json) { 
       $("#proever").html(json.responseText); 
      }); 
    }) 
})

來源

2017-04-20 10:49:37

謝謝。在通過post方法後，我仍然有問題將數據傳回給視圖。任何想法如何我可以提供更新的數據？ – crellee

誰在這個世界上投了票 - 它會拋出一個'500內部服務器錯誤 –

對不起，我犯了一個錯誤。我已經更新了代碼。請現在嘗試。 @crellee –

您需要使用持久數據存儲在你的情況。目前，異步發佈請求會更改視圖模型數據，但當您嘗試使用.load（...）jquery函數加載視圖時，隨後的http請求中會丟失數據。

1-向http post控制器動作發送異步請求以更改db存儲中的數據。在http get index操作中從db讀取視圖模型數據。（$（「＃proever」）負載（「/視頻/索引」））

來源

2017-04-20 11:26:43

我不確定你的意思？也許你可以在一些代碼中解釋它？ – crellee

帶有Ajax的ViewModel中的更新列表ASP.NET MVC

回答

相關問題