Question

I have the following Jquery that returns values from a dialog Box and fills in the values in the main page :

function AutoCompleteTopayer(pName, addLine, pCity, pState, pZip, pPhone) {
        $(".PayerName").html(pName);
        $("#txtPayerAddress").val(addLine);
        $("#txtPayerCity").val(pCity);
        $("#txtPayerState").val(pState);
        $("#txtPayerZip").val(pZip);
        $("#txtPayerPhone").val(pPhone);
        var csz = pCity + ", " + pState + ", " + pZip;
        $("#txtCStateZip").val(csz);
        $("#SearchPayDlg").dialog("close");
    }

Code from my View :

    @Html.TextBoxFor(model => model.cityStateZip, new { @class = "fauxInput", id = "txtCStateZip" })
    @Html.HiddenFor(model => model.payerCityName, new { id = "txtPayerCity" })
    @Html.HiddenFor(model => model.payerStateCode, new { id = "txtPayerState" })
    @Html.HiddenFor(model => model.payerPostalZoneOrZipCode, new { id = "txtPayerZip" })

This gives the following output:

---

When I replace the TextBoxFor with DisplayFor … The values are not shown. I’ve found one article that somehow adresses my issue here ,so I’ve comeup with this code :

<span class="txtPayerName">
     @Html.DisplayFor(model => model.payerName, new { @class = "fauxInput" })
 </span>

and in the JQuery method :

$(".txtPayerName").html(pName);

,but that doesnt work either.Any solutions ?

---

Later Edit: Sorry , i found out it was all about a typo… the last one actually works .. I’ve edited and gonna let it here so others may benefit from it.

The above code works with the sole remark that the displayFor’s class will not work( thanks Darin Dimitrov), so this should work:

 <span class="txtPayerName fauxInput">
         @Html.DisplayFor(model => model.payerName)
     </span> 

Answer 1

The second argument of the DisplayFor helper doesn’t do at all what you think it does (apply CSS class). It allows you to pass additional ViewData to the display template.

So you could apply the CSS to the containing element

<span class="txtPayerName fauxInput">
    @Html.DisplayFor(model => model.payerName)
</span>

and then adapt your selector:

$('.fauxInput').html(pName);

Your code also works because in your selector you used $(".txtPayerName") but it is important to point out that there won’t be any fauxInput if you use this approach.