2017-11-10 275 views
0

我想通過post傳遞js數組到控制器,然後處理數據並將數據返回到另一個視圖。將js數組傳遞給mvc控制器,然後返回另一個視圖

難道不會

使用AJAX發佈數據,因爲我將無法返回另一種觀點認爲

當您使用:我所經歷的

enter image description here

問題$ .post它會調用您的操作,然後獲取一堆 HTML。然後你什麼也不做,所以瀏覽器只是把它扔到 以外。如果你只想去新的頁面,做一個普通的帖子, 不使用ajax。 Ajax更適合於如果你需要打電話給你的服務器到 獲取一些信息來更新當前頁面,而不是去一個新的。

(我想這是爲$ http.post一樣呢?)

使用難道不會定期崗位(@ Html.Beginform)我想我becaue將無法通過js數組?

我應該如何處理?

+1

你可以做一個普通郵寄如果表單包含含有在值輸入數組 –

+0

這是一個想法,但不是有點原始? (只是好奇) –

+2

提交表單的標準方式是原始的?你也可以做一個ajax調用,而是返回一個你不使用的視圖,只是返回一個簡單的'JsonResult',否則表示成功,如果成功,使用'location.href'在'success'中重定向。回調 –

回答

1

如果你絕對要做一個正常的形式提交(非Ajax)的數據在你的js變量,你可以打造爲某種形式的輸入元素你在js變量中的數據,然後你可以使用javascript來提交這個表單。只要元素的名稱與您的操作方法參數匹配,模型綁定就可以工作。

下面是一個簡單的例子,使用jQuery在按鈕單擊事件上發送字符串列表。

$(function() { 

    var flags = ["aa", "bb", "cc"]; 
    var targetUrl="@Url.Action("Summary","Home")"; 

    $("#SubmitButton").click(function(e) { 

     //First build a form element and set the action attribute value 
     var $f = $("<form></form>").attr("action",targetUrl).attr("method","post"); 

     //Loop throug the string and create an input element for each item 
     $.each(flags, function(a, b) { 

      var $el = $("<input type='hidden' name='flagsChecked' />").attr("value",b); 

      //Add the input element to the form 
      $f.append($el); 

     }); 

     //Add the form to the page and submit the form 
     $f.appendTo("body").submit(); 

    }); 

}); 

並且在你的http post action方法中,你可以返回一個視圖。

[HttpPost] 
public ActionResult Summary(List<string> flagsChecked) 
{ 
    return View("Summary"); 
} 

如果你的代碼是UDPATE一些數據,我強烈建議你遵循P-R-G pattern並返回一個重定向響應。

[HttpPost] 
public ActionResult Summary(List<string> flagsChecked) 
{ 
    return RedirectToAction("Summary"); 
} 
+0

工作正常,看起來不錯,謝謝! –

0

通JS數組MVC控制器

那麼你有兩個不同的問題。首先,您必須將application/x-www-form-urlencoded或multipart/form-data或json綁定到您的對象/數組。

Phil Haacked - Model Binding To A List

摘錄:

開始

<form method="post" action="/Home/UpdateInts"> 
    <input type="text" name="ints" value="1" /> 
    <input type="text" name="ints" value="4" /> 
    <input type="text" name="ints" value="2" /> 
    <input type="text" name="ints" value="8" /> 
    <input type="submit" /> 
</form> 

你採取小提琴手,看看什麼樣的數據實際上得到點擊提交按鈕時發佈的,你會看到下面的。

ints=1&ints=4&ints=2&ints=8 

默認的model binder看到所有具有相同的名稱,這些名稱/值對並將其轉換爲與關鍵整數,然後將其與整型參數到你的動作方法匹配一個集合。很簡單!

年底

然後返回另一種觀點認爲

那麼你有非常兩種選擇。

首先,您使用標準<form>元素的URL和提交表單(提交按鈕,jQuery等)的方式。優點:它一直在litteraly左右,使用非常簡單。缺點:如果有網絡中斷或你的用戶體驗很差(瀏覽器,url無法找到,所以我刷新了,我重新提交...我不知道..等)

二,你使用Ajax請求併發送數據。當迴應成功時,您將window.location您的用戶移到下一個屏幕。優點:出色的用戶體驗,如果網絡出現故障,您可以重試或給用戶重試的方式。缺點:實施更多的工作。

0

是否必須是帖子?

一個JavaScript示例使用GET請求,這樣做的:

var url = "/Controller/Action?"; 
var myArray = {id1: 100, id2: 200, "id3": 300}; 

for (var key in myArray) { 
url += key+"="+myArray[key] + "&" 
} 

window.top.location.href = url 

否則只是做一個帖子:

var form = $('<form></form>'); 
var url = "/Controller/Action"; 
form.attr("method", "post"); 
form.attr("action", url); 
var myArray = {id1: 100, id2: 200, "id3": 300}; 

for (var key in myArray) { 
    var field = $('<input></input>'); 

    field.attr("type", "hidden"); 
    field.attr("name", key); 
    field.attr("value", myArray[key]); 

    form.append(field); 
}); 

$(document.body).append(form); 
form.submit(); 
相關問題