Send Data from Jquery Dialog and MVC

Question

I have a Jquery modal dialog, My question is what is the best way to send this data to the controller, and to display a message back to the dialog. I can not seem to find and good examples of this.

Answer 1

Put data collection controls within a form like so:

<div id="AddTaskDiv">
    <form id="AddTaskForm" method="post" action="">
    <%= Html.Hidden("AddTaskProjectId") %>
    <%= Html.Hidden("AddTaskTemplateName") %>
        <fieldset>
            <p><label for="TaskId">Task ID</label></p>
            <p>
                <label for="AddTaskLevel">Level:</label>
                <%= Html.TextBox("AddTaskLevel", "", new{@maxlength= "3", @size="3"})%>
                <%= Html.ValidationMessage("AddTaskLevel", "*")%>

                <label for="AddTaskMajorLevel">Major ID:</label>
                <%= Html.TextBox("AddTaskMajorLevel", "", new { @maxlength = "3", @size = "3" })%>
                <%= Html.ValidationMessage("AddTaskMajorLevel", "*")%>

                <label for="AddTaskMinorLevel">Minor ID:</label>
                <%= Html.TextBox("AddTaskMinorLevel", "", new { @maxlength = "3", @size = "3" })%>
                <%= Html.ValidationMessage("AddTaskMinorLevel", "*")%>
            </p>
            <p>
                <label for="AddTaskDescription">Description:</label>
                <%= Html.TextBox("AddTaskDescription", "", new { @maxlength = "32", @size = "32" })%>
                <%= Html.ValidationMessage("AddTaskDescription", "*")%>
            </p>
            <p>
                <label for="AddTaskResponsibleRole">ResponsibleRole:</label>
                <%= Html.TextBox("AddTaskResponsibleRole")%>
                <%= Html.ValidationMessage("AddTaskResponsibleRole", "*")%>
            </p>
            <p>
                <label for="AddTaskDurationInDays">DurationInDays:</label>
                <%= Html.TextBox("AddTaskDurationInDays", "", new { @maxlength = "3", @size = "3" })%>
                <%= Html.ValidationMessage("AddTaskDurationInDays", "*")%>
            </p>
            <p>
                <label for="AddTaskType">Task Type:</label>
                <%= Html.DropDownList("AddTaskType", (SelectList)ViewData["TaskTypes"])%>
            </p>
        </fieldset>
    </form>
</div>

Next add the following Javascript: Note Open function Add has a Serialize. This assembles the Json data. Now go down and look at the DTO then the controller.

<script type="text/javascript">
    AddTaskHandler = function() {
        var SuccessHandler;

        // Open the dialog            
        Open = function(successHandler, projectId, templateName) {
        SuccessHandler = successHandler;
        $('#AddTaskProjectId').val(projectId);
        $('#AddTaskTemplateName').val(templateName);

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

    // Initialize the add Task Dialog
    Init = function() {
        $('#AddTaskDiv').dialog({
            autoOpen: false,
            modal: true,
            height: 400,
            width: 535,
            buttons:
            { 
                Cancel: function() { $(this).dialog("close"); },
                Add: function() {
                    var mydialog = $(this);
                    var formData = $('#AddTaskForm').serializeArray();

                    $.post(
                        "/Template/AddTask", formData,
                        function(data) {
                            if(data.Status == false) { alert(data.Message); }
                            else {
                                SuccessHandler(data);
                                mydialog.dialog("close");
                            }
                    }, "json");
                }
            }
        });
    };

        return { Init: Init, Open: Open };
    } ();

    $(document).ready(function() {
        AddTaskHandler.Init();
    });

</script>

Create a DTO: Note property names ar identical to form control names:

public class TaskDto
{
    public string AddTaskProjectId { get; set; }
    public string AddTaskDescription { get; set; }
    public string AddTaskDurationInDays { get; set; }
    public string AddTaskLevel { get; set; }
    public string AddTaskTemplateId { get; set; }
    public string AddTaskTemplateName { get; set; }
    public string AddTaskMajorLevel { get; set; }
    public string AddTaskMinorLevel { get; set; }
    public string AddTaskResponsibleRole { get; set; }
    public string AddTaskActive { get; set; }
    public string AddTaskType { get; set; }
}

Your MVC controller:

public ActionResult AddTask(TaskDto taskDto)
{
    // Code here
}

And thats it.

So I place the dialog in my site master making it there all the time, ready. It initializes itself.

Then when I need it I call the open and then rest is done.

Answer 2

$.post('site/controller/action', $('#myForm').serialize(), function (data) {
    alert('form submitted');
}, 'json');

Answer 3

With JQuery, you can get the Form plugin, and submit your form easily with Ajax like this:

 $('#myform').ajaxForm({
      url: '/mycontroller/myaction/myid',
      datatype: 'json',
      success: function(responseJson) { 
                    alert ('success! response was:' + responseJson); 
               }
   });