Question

I am using Visual Studio 2010 updated to the latest version and the MVC3 framework updated to the latest version. I am also using jquery 1.5.1 but this issue does not appear to be jquery related.

I have the following main page:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"  type="text/css" />
<link href="@Url.Content("~/Content/UserMaintainance.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/UserMaintainance.js")" type="text/javascript"></script>

@model TourSystem2.Models.UserMaintainanceViewModel
@{
    ViewBag.Title = "UserMaintainance";
}

@Model.Debug

<h2>User Maintainance</h2>
<div id = "EditUser"></div>
<table>
<tr id="1">
    <td><button type="button"  class = "deleteButton"></button></td>

    <td><button type="button"  class = "editButton"></button></td>
    <td>John                          </td>
    <td>john                          </td>
    <td>A</td>
    <td>1234                </td>
    <td></td>

    //snipped some unrelated form generation of user information showing
    <tr id = "0">
    <td colspan = "7"><button type = "button" id = "addButton">Add New User</button></td>
    </tr>
</table>

In the java script for this form, I do the following for the addButton:

$(function () {
$(':button.editButton, :button#addButton').click(function () {
    var myData = $(this).parent().parent().attr("id");
    $.post("/Admin/EditUser", { UserID: myData },
        function (data) {
            $('#EditUser').html(data);
            $('#EditUser').dialog({
                modal: true,
                width: 400,
                resizable: false,
                buttons: {
                    "Save": function () {
                        $(this).dialog("close");
                        },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });


        });  //end post
});

The partial page /Admin/EditUser looks like this:

@model TourSystem2.Models.UserEditViewModel
<link href="/Content/UserEdit.css" rel="stylesheet" type="text/css" />     
@Html.HiddenFor(Model => Model.UserInfo.iUserID)      
<table id="useredit">
    <tr>
        <td>@Html.LabelFor(Model => Model.UserInfo.cLoginName, "Login Name")</td>
        <td>@Html.TextBoxFor(Model => Model.UserInfo.cLoginName)</td>
    </tr>
    //Snip more fields
</table>

My controller code for EditUser looks like:

    public ActionResult EditUser(int UserID)
    {
        UserEditViewModel myUser = new UserEditViewModel();

        if (UserID == 0)
        {
            myUser.UserInfo.iUserID = 0;
            return PartialView("UserEdit", myUser);
        }
        else if (myUser.Load(UserID))
        {
            return PartialView("UserEdit", myUser);
        }
        else
        {
            return Json("Broken: " + myUser.Debug);
        }
    }

My intention is that upon clicking save, I will do another AJAX post to pass the information back to the server.

So far, everything is working pretty well except the value attribute of the textbox does not change even though the text in the box has changed. If I click on edit, the data files out correctly on the editUser partial page… but any changes are not reflected in the value.

Using firebug, I can visually see that value does not change for any textbox I have on the screen. During the “save user” post, only the original value is returned and not the modified value.

Did I miss something very basic?

*EDIT 1***
I am trying to do the following in my SaveButton event:

                    "Save": function () {
                        var myUser =
                            {
                                iUserID: ('#UserInfo_iUserID').val,
                                cLoginName: ('#UserInfo_cLoginName').val,
                            };
                            $.ajax({
                                type: "POST",
                                url: "/admin/SaveUser",
                                data: myUser,
                                success: function (bNum) {
                                    alert("returned" + bNum);
                                }
                            });

I am getting old results for the cLoginName: (‘#UserInfo_cLoginName’).val

This happens before the second POST.

Answer 1

That’s a common gotcha when you try to modify values in a POST action that are contained in the ModelState and rendering the same view. You will need to remove the value from model state before changing it or HTML helpers (such as HiddenFor) will use the POSTed value when binding:

ModelState.Remove("UserInfo.iUserID");
myUser.UserInfo.iUserID = 0;
return PartialView("UserEdit", myUser);

Verify by debugging that ModelState contains a value called UserInfo.iUserID.

---

UPDATE:

It seems that the wrong syntax is used to retrieve the values:

('#UserInfo_iUserID').val

instead of:

$('#UserInfo_iUserID').val()