Question

我有一个Jquery模式对话框，我的问题是将这些数据发送到控制器以及向对话框显示消息的最佳方法是什么。我似乎无法找到这个好例子。

Answer 1

使用JQuery，您可以获得Form plugin，并使用Ajax轻松提交表单：

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

Answer 2

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

Answer 3

将数据收集控件放在如下的表单中：

<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>

接下来添加以下Javascript：注意Open function Add有一个Serialize。这组装了Json数据。现在下去看看DTO然后看看控制器。

<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>

创建DTO：注意属性名称与表单控件名称相同：

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

你的MVC控制器：

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

就是这样。

所以我将对话框放在我的网站主人中，一直在那里准备好。它初始化自己。

然后当我需要它时，我打电话给开放，然后休息完成。

从Jquery Dialog和MVC发送数据

3 个答案: