asp.net mvc jquery $ajax passes null values to the controller

$("#ftp-dialog").dialog({ autoOpen: false });
    $('.ftp').live("click", function(event) { loadDialog(this, event, '#ftp-dialog'); });
});
    function loadDialog(tag, event, target) {
        event.preventDefault();
        var $loading = $('<img src="../../Content/images/ajaxLoading.gif" alt="loading" class="ui-loading-icon">');
        var $url = $(tag).attr('href');
        var $title = $(tag).attr('title');
        var $dialog = $('<div></div>');
        $dialog.empty();
        $dialog
            .append($loading)
            .load($url)
            .dialog({
                autoOpen: false,
                title: $title,
                width: 300,
                modal: true,
                minHeight: 200,
                show: 'fade',
                hide: 'fade'
            });


            $dialog.dialog("option", "buttons", {
                "Cancel": function() {
                    $(this).dialog("close");
                    $(this).empty();
                },
                "Save": function() {
                    var dlg = $(this);
                    $.ajax({
                        url: $url,
                        type: 'POST',
                        data: $("#target").serialize(),
                        success: function(response) {
                            $(target).html(response);
                            dlg.dialog('close');
                            dlg.empty();
                            $("#ajaxResult").hide().html('Record saved').fadeIn(300, function() {
                                var e = this;
                                setTimeout(function() { $(e).fadeOut(400); }, 2500);
                            });
                        },
                        error: function(xhr) {
                            if开发者_C百科 (xhr.status == 400)
                                dlg.html(xhr.responseText, xhr.status);     /* display validation errors in edit dialog */
                            else
                                displayError(xhr.responseText, xhr.status); /* display other errors in separate dialog */

                        }
                    });
                }
            });


        $dialog.dialog('open');
    };

And here is the view and the controller:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<jh.Models.editFtpViewModel>" %>
<%using (Html.BeginForm("EditFtp", "Pages", FormMethod.Post, new { id = "target" }))
  { %>
<table>
    <tr>
        <td colspan="2">
            Enter Ftp Address:
             <%=Html.TextBoxFor(x => x.ftpAddress, new {@class="text ui-widget-content ui-corner-all"})%>
        </td>
        <td>
        </td>

    </tr>
    <tr>
        <td>
            Login Name:<br/>
            <%=Html.TextBoxFor(x => x.loginName, new { @class = "text ui-widget-content ui-corner-all", style="width:120px;"})%>
        </td>
        <td>
            Password:
            <%=Html.PasswordFor(x => x.Password, new { @class = "text ui-widget-content ui-corner-all", style="width:120px;" })%>
        </td>
    </tr>
</table>
<input type="submit" id="button" value="Save" />
<%} %>

Controller:

[HttpPost]
        public ActionResult EditFtp(editFtpViewModel model)
        {
            return View();
        }

The problem is that all values what pass to the controller are null. But if I make a simple submit all is OK. Can anybody help me?

editFTPViewModel class:

public class editFtpViewModel
    {
        public string ftpAddress { get; set; }
        public string loginName { get; set; }
        public string Password { get; set; }
    }

I want to pass form values to the controller according to this model.

The values being null are because when dialog is called, it rebuilds the DOM and MVC loses the inputs. When you initially call dialog, you need to add:

open: function () { $(this).parent().appendTo("#target"); }

to the constructor. So in your case it would be:

$("#ftp-dialog").dialog({ autoOpen: false, open: function () { $(this).parent().appendTo("#target"); } });