Question

I have a datatable webpage that shows a list of user in a datatable. On the user page there is a button create new user. On clicking this launches a modal jQuery dialog box for the user to enter details off the new user. There is a Cancel button which just closes the dialog box and a Save User button which on clicking calls DoSaveUser method in my controller. I can see from debugging that I get into the DoSaveUser method which should at the end return to a PartialView if the create user was successful saying User was saved. However my dialog were you enter details is not getting replaced with the Success message – even though the user is getting created – i.e – after I hit the save button – if I then cancel the dialog and refresh the original user page I can see the datatable updated with my new user.

Code on UserList page (there are more fields in the dialog than just forename but have removed them to make question have less code). So when CreateUser button is clicked my newUserDialog is launched.

<div id="newUserDialog">

@using (Html.BeginForm("DoSaveUser", "MyController", FormMethod.Post, new { id = "saveForm" }))
{

     <div id="resultContainer">
        <table class="ui-widget-content" style="width: 565px; margin-top: 10px;">
            <tr>
                <td style="width: 100px;">
                </td>
                <td class="label">
                    Forename :
                </td>
                <td class="value">
                    @Html.TextBoxFor(model => model.Forename, new { style = "width:150px" })
                </td>
            </tr>
        </table>
        <div class="ui-widget-content Rounded" style="width: 565px; margin-top: 10px; text-align: center;">
            <input id="Cancel" type="button" class="dialog-button" value="Cancel" style="margin: 5px" />
            <input id="DoSaveUser" type="submit" class="dialog-button" value="Save User" style="margin: 5px" />
        </div>
    </div>
}

Javascript code for Save User on the dialog being clicked – submit the form.

$(function () {
    $('#saveForm').submit(function () {

        var formData = $("#saveForm").serializeArray();

        $.ajax({
            url: this.action,
            type: this.method,
            data: formData,
            dataType: "json",
            success: function (result) {
                $('#resultContainer').html(result);
            }
        });
        return false;
    });
});

Now in My DoSaveUser method in my controller which I can set a breakpoint and hit and see all the values being sent in correctly for the corresponding fields – once I have saved to the DB this is return.

return PartialView("UserSuccess", model);

And this is all that view contains in the cshtml..note what I wanted was the result container Div which contains all my textbox fields and labels to be replaced with User Created successfully. And then I will need an ok on this page which on clicking will close the dialog box and refresh the UserList page and show the datatable updated with the new user. However when I click save the textboxes just stay on the Div and the Div does not get changed – but if I then cancel the dialog and refresh the page I can see the datatable updated with my new user. Is there something I am missing? (note – i have added jquery.unobtrusive-ajax.js to my _Layout page)

@model MyProject.Models.UserModel
@{
    ViewBag.Title = "UserSuccess";
}
 <div id="resultContainer">
User Created Successfully
</div>

Answer 1

Are you sure that your initial html do have a #resultContainer div? If you don’t the

$('#resultContainer').html(result);

line won’t match anything. If you do on the other hand, you will get duplicate nested #resultContainer divs which is also an error (id must be unique).

The right way to do it is to add an empty div in your original html:

<div id="resultContainer"></div>

And in your view output just the content to go inside the div.

@model MyProject.Models.UserModel
@{
    ViewBag.Title = "UserSuccess";
}
User Created Successfully