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

Question

$("#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 (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.

Can you show what $("#target").serialize() do and editFtpViewModel class. — Andrew Orsich
– Andrew Orsich, Commented Feb 23, 2011 at 9:00
I just want to send form data to the controller according to editFtpViewModel class. — Alex
– Alex, Commented Feb 23, 2011 at 9:32

Chris Woolum · Accepted Answer · 2011-05-03 23:31:12Z

1

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"); } });

answered May 3, 2011 at 23:31

Chris Woolum

2,92921 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Somedeveloper Over a year ago

Fantastic answer. thanks very much for this. I have been trying to fix this problem for the last few hours and was wrecking my head. thanks again.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related