Url.Action调用Javascript函数

Question

I have an Url Action Link that sends to my controller 1 paramater, but I need that paramater to call a javascript function to get document.getElementById and send that value to my controller. In my view I have the follwoing code:

@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>
}

My javascript:

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

What I'm I doing wrong because I can not get this to work.

Answer 1

Url.Action is a method which gets executed in the server by razor and your javascript executes on the client side. So it is not that easy to mix both.

I am not sure what you are trying to do. In your question you mentioned you want to set value to some form field. But since you are going to be redirected to the new page, there is no point ! whatever value you set is gone (unless you are opening the new page in a new tab)

Anyway, What you can do is to listen for the click event of the anchor tag in your javascript and do whatever you want at the client side (ex: setting some form field value /executing a javascript function etc).

You have some problem in your view code, you are creating the same id value for each item in the loop in @Html.EditorFor(model => item.ContactValue .Duplicate id's are not valid. So avoid that.

<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>

I added 2 new css classes , myContactVal and myEdit to the form fields to help us do our jQuery selection. We are setting the item.ContactValue value in html5 data attribute to the anchor tag for accessing later in our javascript code.

And the javascript to handle the link click event

$(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;

    })

})