Url.Action调用Javascript函数

Question

我有一个Url Action Link，它向我的控制器发送了1个参数，但是我需要该参数来调用JavaScript函数来获取document.getElementById并将该值发送给我的控制器。 在我看来，我有以下代码：

@foreach (var item in ViewBag.PersonsContacts as List<Software___FPPD.Models.Contact>)
{
    <tr>
        <td>@Html.DisplayFor(model => item.ContactType.Name)</td>
        <td>@Html.EditorFor(model => item.ContactValue, new { htmlAttributes = new { @class = "form-control", id = "contactValue"} })</td>
        <td>
            <a href="@Url.Action("EditPersonContact", "Person", new { contactValue = getValue(item.ContactValue)})" class="btn  btn-success">Alterar</a>
        </td>
    </tr>
}

我的JavaScript：

function getValue(contactValue) {
    document.getElementById("contactValue").value = contactValue; 
}

我做错了什么，因为我无法使它正常工作。

Answer 1

Url.Action是一种由razor在服务器中执行的方法，而您的JavaScript在客户端执行。 因此，将两者混合并不容易。

我不确定您要做什么。 在您提到的问题中，您想将值设置为某个表单字段。 但是由于您将被重定向到新页面，所以没有意义！ 您设置的任何值都消失了（除非您在新标签页中打开新页面）

无论如何，您可以做的是在JavaScript中监听锚标记的click事件， click在客户端执行您想做的任何事情（例如：设置一些表单字段值/执行javascript函数等）。

您的视图代码有问题，您正在@Html.EditorFor(model => item.ContactValue中为循环中的每个项目创建相同的ID值，重复的ID无效，因此请避免这种情况。

<td>
    @Html.EditorFor(model => item.ContactValue,
                     new { htmlAttributes = new { @class = "form-control myContactVal"} })
</td>
<td>
    <a href="@Url.Action("SignUp", "Home")"  data-contactvalue="@item.ContactValue" 
                                            class="btn  btn-success myEdit"> Alterar</a>
</td>

我在表单字段中添加了2个新的CSS类， myContactVal和myEdit ，以帮助我们选择jQuery。 我们正在将html5数据属性中的item.ContactValue值设置为锚标记，以便稍后在我们的JavaScript代码中进行访问。

和JavaScript来处理链接点击事件

$(function () {

    $("a.myEdit").click(function (e) {

        e.preventDefault();
        _this = $(this);
        var contactVal = _this.data("contactvalue");
        var url = _this.attr("href");
        url = url + "?contactValue=" + contactVal;
        alert(url);

        //You can do any other thing here.

        //If you want to update the field with  myContactVal class in prev td
        _this.closest("tr").find(".myContactVal").val(contactVal);


       // finally do the redirect 
        window.location.href=url;

    })

})