MVC和JQuery Mobile：Radiobutton释放发布状态

Question

I am using Jquery Mobile on a page which is set data-ajax="false" to always refresh content on load.

A javascript set's the radiobutton state (checked/not checked) on document.ready(), however it only is successful on the GET request.

When I click the save button and the page loads again after it's POST, then the selection is gone.

    @using (Html.BeginForm())
{
  @Html.HiddenFor(x => x.CurrentCulture);

    <input type="radio" name="radio-language" id="radio-language-eng" value="en-US" />
    <label for="radio-language-eng">English</label>
    <input type="radio" name="radio-language" id="radio-language-esp" value="es-MX" />
    <label for="radio-language-esp">Spanish</label>
    <input type="submit" value="Save Changes" />
}

<script type="text/javascript">
  $(document).ready(function () {
    var currentCulture = $("#CurrentCulture").val();
    $('input[type=radio][name=radio-language]').checkboxradio();
    $("#radio-language-eng").prop("checked", currentCulture == "en-US");
    $("#radio-language-esp").prop("checked", currentCulture == "es-MX");
    $('input[type=radio][name=radio-language]').checkboxradio("refresh");

    $('input[type=radio][name=radio-language]').change(function () {
      $("#radio-language-eng").prop("checked", this.value == "en-US");
      $("#radio-language-esp").prop("checked", this.value == "es-MX");
      $("#CurrentCulture").val(this.value);
    });
  });
</script>

Checking the value of the hiddenfield, it holds the correct culture, so why does the radiobutton looses it's state?

Answer 1

You can replace you code including the script with RadioButtonFor() and strongly bind to your model. Note you need to give the buttons an id attribute to work with the associated label and to prevent invalid html.

@Hml.RadioButtonFor(m => m.CurrentCulture, "en-US", new { id = "eng" })
@Html.Label("eng", "English")
@Hml.RadioButtonFor(m => m.CurrentCulture, "es-MX", new { id = "esp" })
@Html.Label("esp", "Spanish")