將值從視圖傳遞到控制器-MVC

Question

我有一個縮略圖列表，用戶可以選擇其中一張圖像。

在縮略圖上單擊，將較大的圖像打開成表格。

我現在想做的就是將所選圖像的ID發送給我的控制器。

注意：即時通訊使用MVC 4。

我怎樣才能做到這一點？

有人可以幫忙嗎？

提前致謝：

這是我的代碼：

 @foreach (var p in ViewBag.Images)
    {           
     <li>
       <a href="~/Files/@p.Name" onclick="swap(this); return false;">
          <img src="~/Files/@p.Name"/>
       </a>
     </li>
}

當選擇時將以我的形式使用此img標簽：

<img id="main" src="" >

為此事件使用此javascript：

function swap(image) {
        document.getElementById("main").src = image.href;
    }

我現在要做什么？

我嘗試使用<input type="hidden" name="Img_Id" value="Viewbag.??????"/>將此值傳遞給我的控制器？

Answer 1

首先，一些術語幫助：您不能將值從視圖傳遞給控制器​​動作，視圖將在控制器動作完成后呈現。

您要做的是使用表單字段將數據從客戶端（Web瀏覽器）傳遞到控制器操作。

在您的JavaScript交換方法中，您可以將Img_Id字段的值設置為所選圖像的值。 提交表單后，Img_Id將作為表單數據發布，並且可以作為操作中的參數接受。

您可以使用JQuery（或其他方式）執行客戶端操作。

這是一個示例（雖然未測試！）：

首先，將ID作為元素的data屬性添加：

<a href="~/Files/@p.Name" data-id="@p.ID" onclick="swap(this); return false;">

然后使用一些JavaScript將其保存為表單（在此處使用jquery）：

function swap(image) {
    document.getElementById("main").src = image.href;
    $("input[name='Img_Id']").val($(image).data("id"));
}

Answer 2

要將值傳遞回控制器，您要么需要提交表單，要么向控制器發出AJAX請求。

在第一種情況下，您需要使用javascript更新隱藏字段的值，然后等待用戶提交表單，或根據需要觸發通過javascript提交。

如果要發出ajax請求，則差不多是同一件事，但是不需要隱藏字段來存儲值。

Answer 3

您可以在交換函數中使用jQuery。 請參閱此處獲取官方文檔。

如果選擇使用這種方法，並假定將JavaScript放在單獨的文件中，則請確保獲取動作和控制器的路徑並將其也傳遞進來。

var url = @Url.Action("Index","Home");

因此，您可以致電：onclick =“ swap（this.id，url）”