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作为数据属性：

<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。有关官方文档，请参阅here。

如果您选择使用此方法，并假设您将JavaScript放在单独的文件中，那么请确保获取操作和控制器的路径并将其传递给它。

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

因此你可以打电话：onclick =“swap（this.id，url）”

将视图中的值传递给控制器 - MVC

3 个答案:

将视图中的值传递给控制器​​ - MVC

3 个答案:

将视图中的值传递给控制器 - MVC