使用 Ajax.ActionLink 获取所选行的 ID答案

【问题标题】：Get ID of selected row using Ajax.ActionLink使用 Ajax.ActionLink 获取所选行的 ID
【发布时间】：2017-05-19 04:06:58
【问题描述】：

我有一个看起来像这样的视图：

          @foreach (var car in Model)
            {
            <tr>
                <td>
                    @car.ID
                </td>
                <td>
                    @car.carMake
                </td>
                <td>
                    @car.carModel
                </td>
                <td>
                    <div id="result"></div> //update result based on ID

                </td>
                <td>
                 Check for @Ajax.ActionLink(
                               @car.carMake,
                               "getUpdate",
                               "Home",
                               new { ID = car.ID },
                               new AjaxOptions
                                {
                               UpdateTargetId = "result", //use car.ID here? not sure
                               InsertionMode = InsertionMode.Replace,
                               HttpMethod = "Get"
                                })                      
                </td>
            </tr>
            }

我要做的是获取所选汽车的 ID，并仅使用部分视图中的数据更新该行，例如如果有 3 辆车

Car ID | Car Make | Car Model | result   | Get car updates
1          VW          Polo               (Ajax actionlink)       
2          BMW         3                  (Ajax actionlink)
3          Ford        Focus              (Ajax actionlink)

如果我单击 BMW 的操作链接，我希望仅使用局部视图操作更新该行。我尝试过使用 JQuery：

ID = $('#car_ID').val(); on a @Html.HiddenFor(model => car.ID)

但它不断获取第一辆车的 ID。不知道我会怎么做。

我看到了这个：dynamic update target id in Ajax.ActionLink，但没有用。

【问题讨论】：

检查为 ActionLink 生成的 Html。对于 jquery 中的 ID 属性，您需要执行 $(element).attr("id")
当您点击操作链接时，您只会收到第一个 ID？
@rem 如果您找到答案，请告诉我。

标签： c# jquery ajax asp.net-mvc

【解决方案1】：

这行得通。请让我知道您的想法，如果您还需要完成工作，请告诉我。这是你如何做到的。这是您的局部视图 (_PartialView.cshtml)：

model Testy20161006.Controllers.CarModel

<div>
    Updated Row: @Html.Raw(Model.CarId), @Html.Raw(Model.CarMake), @Html.Raw(Model.theCarModel) 
</div>

这是您的控制器/模型：

 public class CarModel
{
    public int CarId { get; set; }
    public string CarMake { get; set; }
    public string theCarModel { get; set; }
}

public class HomeController : Controller
{
    public PartialViewResult getUpdate(int carId)
    {
        CarModel carModel = new CarModel();
        switch (carId)
        {
            case 1:
                carModel.CarId = 1;
                carModel.CarMake = "updated11111Make";
                carModel.theCarModel = "updated11111Model";
                break;
            case 2:
                carModel.CarId = 2;
                carModel.CarMake = "updated2Make";
                carModel.theCarModel = "updated22222Model";
                break;
            case 3:
                carModel.CarId = 3;
                carModel.CarMake = "updated3Make";
                carModel.theCarModel = "updated33333Model";
                break;
            default:
                break;
        }
        return PartialView("_PartialView", carModel);
    }

    public ActionResult Index700()
    {
        IList<CarModel> carModelList = Setup();
        return View(carModelList);
    }

这是你的看法：

    @model IEnumerable<Testy20161006.Controllers.CarModel>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index700</title>
    @*I had to add these references*@
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".getClick").click(function () {
                alert("ap");
                $(".clearMe").text("");
            })
        })
    </script>
</head>
<body>
    <table>
        @foreach (var car in Model)
        {
            <tr>
                <td>
                    @car.CarId
                </td>
                <td>
                    @car.CarMake
                </td>
                <td>
                    @car.theCarModel
                </td>
                <td>
                    @if (@car.CarId == 1)
                    {
                        <div id="result1" class="clearMe"></div> @*//update result based on ID*@
                    }
                    else if (@car.CarId == 2)
                    {
                        <div id="result2" class="clearMe"></div> @*//update result based on ID*@
                    }
                    else
                    {
                        <div id="result3" class="clearMe"></div> @*//update result based on ID*@
                    }
                </td>
                <td>
                    Check for @Ajax.ActionLink(
                  @car.CarMake,
                               "getUpdate",
                               new { carId = car.CarId },
                               new AjaxOptions
                                {
                                    UpdateTargetId = "result" + car.CarId, //use car.ID here? not sure
                                    InsertionMode = InsertionMode.Replace,
                                    HttpMethod = "GET"
                                }, new { @class = "getClick" })
                </td>
            </tr>
        }
    </table>
</body>
</html>

【讨论】：