Question

我有一个Url Action Link，它向我的控制器发送一个参数，但我需要该参数调用一个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事件，并在客户端做任何你想做的事情（例如：设置一些表单字段值/执行javascript函数等）。

您的视图代码中存在一些问题，您正在为@Html.EditorFor(model => item.ContactValue中的循环中的每个项创建相同的 id 值.Duplicate 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;

    })

})

Url.Action调用Javascript函数

1 个答案: