MVC 5剃刀變量HTML按鈕點擊

NET和MVC，我試圖在一個初學者項目上工作，我有點卡住了。MVC 5剃刀變量HTML按鈕點擊

我有數據模型，其中包含多個圖片路徑，我想知道如何更改哪個圖片我想要顯示在我的按鈕點擊視圖。例如：顯示圖片1，單擊HTML按鈕，並更改爲顯示圖片2.

這就是我到目前爲止？我該如何改變picID變量？有人可以解釋嗎？

<tr> 
     <td><button type="button">Click this to change the picID variable</button></td> 
     <td>@Html.DisplayFor(model => model.Picture.ElementAt(picID).picturePath)</td> 
    </tr>

來源

2014-09-02 CatfishAlpha45

有很多方法。看看這個：

<img id="theImage" src="" /> 
<ul> 
    @foreach (var i in Model.Picture) 
    { 
     <li><a href="#" data-image="@i.picturePath" class="change-image">@i.picturePath</a></li> 
    } 
</ul> 
<script type="text/javascript"> 
    $(function() { 
     //Click event for the image links 
     $('.change-image').click(function (e) { 
      e.preventDefault(); 
      e.stopPropagation(); 

      $('#theImage').attr('src', $(this).data('image')); 
     }); 

     //Display the first link 
     $('#theImage').attr('src', $('ul li:first-child a.change-image').data('image')); 
    }); 
</script>

請注意，我正在使用jQuery。

請讓我知道這是否有幫助。

來源

2014-09-02 01:44:16

我認爲我們在不同的條件下思考。 model.Picture是多張圖片的列表/數組。所以說model.Picture.ElementAt（0）.picturePath將讓我的數組中的第一張圖片。我只是不確定如何在raazor或javascript中將該picID值更改爲我仍然可以從模型中撤回的位置。 Int我上面的示例代碼我只是保持簡單，現在顯示純文本路徑。 – CatfishAlpha45 2014-09-02 02:04:11

@ CatfishAlpha45爲了能夠更改視圖上的當前圖像，您必須將所有圖像路徑（您的數組）放到JS對象或HTML結構中。在我的例子中，我爲每個路徑創建一個鏈接，並在點擊相應的鏈接時更改所呈現的圖像。你試過我的代碼嗎？ – 2014-09-02 02:08:56

我有類似的情況，我想這取決於組合值來改變圖像，所以我使用JQuery

在我把該CSHTML包含圖像，我有：

<img class="imgf"> ... 
<img class="imgp"> ... 
<img class="imgb"> ...

組合上的jquery代碼更改：

var model = $("#ComboValue").val(); 
var pathgimgf = "/Images/" + model + "/imgf.png"; 
var pathimga = "/Images/" + model + "/imga.png"; 
var pathimgb = "/Images/" + model + "/imgb.png"; 


$(".imgf").attr("src", pathgimgf); 
$(".imgp").attr("src", pathimga); 
$(".imgb").attr("src", pathimgb);

我希望這可以幫助你。

來源

2014-09-02 01:44:17 ProtoCUS

你想要做的就是讓按鈕調用一個操作方法，它改變圖片ID並返回你的視圖。類似於/ controller/changepic/1。 Changepic會將picID更新爲2，然後返回相同的視圖和模型。

這裏棘手的部分是該按鈕通常用於提交表單。所以你必須添加一個事件處理程序來手動設置動作鏈接，或者使用一個類似按鈕的錨點元素（@ Html.ActionLink）。你可以使用bootstrap來做那種樣式。

我做了很多假設，但希望這有助於。

來源

2014-09-02 02:53:51 Alex

MVC 5剃刀變量HTML按鈕點擊

回答

相關問題