Can I choose which element I want a property to bind to when using ModelBinding in ASP.NET MVC?

Say I have a view, strongly typed to MyObject, with an Html.HiddenFor(x => x.MyValue)

When I post the for back to t开发者_StackOverflow中文版he server, MyValue is bound properly with myObject.MyValue.

Now, say on the form I want to use jQuery to make a TextBox visible containing MyValue, allow the user to edit this, and post the new value back to the server.

How can I handle this? Should I just update the hidden field? Can I somehow specify which element to bind to on the client side?

you can update values of your hidden field in submit event of the form. Probably, you are displaying form values in labels (or spans or divs) when user is not in edit mode and user can toggle between edit and display mode. if you update your values only before the form is being submit you don't have to bother about intermediate values user entered and cancelled out

$(function(){
$("#Myform").submit(function(){
   //Here you can update values of your hidden fields
    return true;
});
});

You would just update the element on the client side and it will automatically bind at the server side.

ASP.NET MVC uses the name attribute on elements to bind it with their corresponding objects. So for Html.HiddenFor(x => x.MyValue) ..it will generate >

<input type="hidden" name="MyValue' />

As long as you don't mess around with the name attribute then you don't need to worry about the binding even if you make changes to the element (show/hide) or it's value(using jQuery). It will get the latest value at the sever side once the form is submitted.

EDIT:

This is what you should be doing. Switching the value of your binded element when the Save form is submitted.

<form id="theForm">

<%= Html.Hiddenfor(m => m.MyValue) %> <!-- the binded element, it's hidden -->

<input type="text" id="newMyValue" /> <!-- the shown element for user -->

<button type="submit" text="save" />

</form>

<script type="text/javascript">
//when the save form is submitted, we switch the values of the binded element to the newer one.
$("#theForm").live("submit", function () { 
    $("#MyValue").val($("#newMyValue").val());
});
</script>

Unless I'm missing something you can just use the TextBoxFor HtmlHelper extension

<%=Html.TextBoxFor(m => m.MyValue) %>

and to find this element on the page using jQuery you can write:

$("#MyValue").show();

based on your updates I don't think you need to manage the overhead of setting the hidden input value before you submit. Rather, try managing some element for the display and only worry about the TextBox value.

<div class="field>
    <%=Html.LabelFor(m => m.MyValue) %>
    <%=Html.TextBoxFor(m => m.MyValue) %>
    <span><%: m.Value %></span>
</div>

If by default the TextBoxes were hidden you could do this with CSS

form div.field input,
form div.field select,
form div.field textarea
{ display: none; }

or with jQuery onready

$("form div.field").find("input,select,textarea").hide();

and when you trigger your Edit-Mode you can wire it up like so:

$(".edit").one("click", function(){
    $("form div.field").each(function(){
        $(this).find("input,select,textarea,span").toggle(); // hides span, shows inputs
        // you'll need more logic here if you wish to set the display value
        // back to the span, but if it's just a click to edit and the user cannot
        // click to go back to view mode this should be fine.
    });
});