Javascript JQuery从子窗口返回值到父窗口

首先，我有一个记录列表，每行有一个编辑按钮（请参见下图1父窗口）。单击编辑按钮后，将出现一个弹出窗口，在弹出窗口中显示答案字段（请参见图2子窗口）。在弹出窗口中，有一个处理答案值的文本区域，用户可以在此添加/删除值。用户单击“保存”按钮后，这些值应保存在数据库中，并反映在父窗口中选择要编辑的特定行上答案字段的修改值

这是我到目前为止的代码，我还没有为此实现一个控制器，因为我不知道如何，我不知道是否可以在这里调用控制器来将数据保存到数据库中

我是MVC的新手，我希望有人能帮助和理解我的问题

控制器：

[HttpPost] 
       public ActionResult Sample(string answers, string question, string controlid, string eventid)
       {

           return View("CustomizedQuestion");
       }

$(".editButton").live("click", function (e) {
                e.preventDefault();
                var $title = $(this).attr("title");
                var $answers = $(this).attr("answers");
                var $controlid = $(this).attr("id");
                dropdownlist($controlid, $title, $answers);
            });

 function dropdownlist(controlid, title, answers, eventid) {

var $answersreplaced = answers.replace(/\,/g, " \r");

var $deleteDialog = $('<div><textarea id="answerlist"  rows="10" cols="50">' + $answersreplaced + '</textarea><div><div style="font-size:9px">(To change back to an open answer field, delete all choices above and save)</div>');

$deleteDialog.dialog({

    resizable: false,

    height: 280,

    width: 350,

    title: title + " - Edit Choices",

    modal: true,

    buttons: {

        "Save": function () {
            $.ajax({
                url: '@Url.Action("Sample")',
                type: 'POST',
                dataType: 'json',
                data: { answers: $('#answerlist').val(),
                       question: title,
                       controlid: controlid,
                       eventid: eventid
                     },

                success: function (resp) {

                    $(this).dialog("close");
                },

                error: function () {
                    alert('there was a problem saving the new answers, please try again');
                   }
            });

        },

        Cancel: function () {

            $(this).dialog("close");

        }

    }

});

};

Javascript:

[HttpPost] 
       public ActionResult Sample(string answers, string question, string controlid, string eventid)
       {

           return View("CustomizedQuestion");
       }

$(".editButton").live("click", function (e) {
                e.preventDefault();
                var $title = $(this).attr("title");
                var $answers = $(this).attr("answers");
                var $controlid = $(this).attr("id");
                dropdownlist($controlid, $title, $answers);
            });

 function dropdownlist(controlid, title, answers, eventid) {

var $answersreplaced = answers.replace(/\,/g, " \r");

var $deleteDialog = $('<div><textarea id="answerlist"  rows="10" cols="50">' + $answersreplaced + '</textarea><div><div style="font-size:9px">(To change back to an open answer field, delete all choices above and save)</div>');

$deleteDialog.dialog({

    resizable: false,

    height: 280,

    width: 350,

    title: title + " - Edit Choices",

    modal: true,

    buttons: {

        "Save": function () {
            $.ajax({
                url: '@Url.Action("Sample")',
                type: 'POST',
                dataType: 'json',
                data: { answers: $('#answerlist').val(),
                       question: title,
                       controlid: controlid,
                       eventid: eventid
                     },

                success: function (resp) {

                    $(this).dialog("close");
                },

                error: function () {
                    alert('there was a problem saving the new answers, please try again');
                   }
            });

        },

        Cancel: function () {

            $(this).dialog("close");

        }

    }

});

};

$（“.editButton”）.live（“单击”，函数（e）{
e、 预防默认值（）；
var$title=$（this.attr（“title”）；
var$answers=$（this.attr（“answers”）；
var$controlid=$（this.attr（“id”）；
dropdownlist（$controlid，$title，$answers）；
});
函数dropdownlist（控件ID、标题、答案、事件ID）{
var$answersreplace=answers.replace（/\，/g，“\r”）；
var$deleteDialog=$（“+$answersreplace+”（要更改回打开的答案字段，请删除上面的所有选项并保存）”；
$deleteDialog.dialog({
可调整大小：false，
身高：280，
宽度：350，
标题：标题+“-编辑选项”，
莫代尔：是的，
按钮：{
“保存”：函数（）{
$.ajax({
url:“@url.Action（“示例”）”，
键入：“POST”，
数据类型：“json”，
数据：{答案：$（'#答案列表'）.val（），
问题:标题,，
controlid:controlid，
eventid:eventid
},
成功：功能（resp）{
$（此）.dialog（“关闭”）；
},
错误：函数（）{
警报（“保存新答案时出现问题，请重试”）；
}
});
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
};

---

应评论要求：

$(".editButton").live("click", function (e) {
        e.preventDefault();
        var $title = $(this).attr("title");
        var $answers = $(this).attr("answers");
        var $controlid = $(this).attr("id");
        var questionID = $(this).attr('questionID');
        dropdownlist(this, questionID, $controlid, $title, $answers);
    });

function dropdownlist(el, questionID, controlid, title, answers) {
    var $answersreplaced = answers.replace( /\,/g , " \r");
    var $deleteDialog = $('<div><textarea id="answerlist"  rows="10" cols="50">' + $answersreplaced + '</textarea><div><div style="font-size:9px">(To change back to an open answer field, delete all choices above and save)</div>');
    $deleteDialog
        .dialog({
            resizable: false,
            height: 280,
            width: 350,
            title: title + " - Edit Choices",
            modal: true,
            buttons: {
                "Save": function () {
                    var dialog = $(this);
                    $.ajax(function()
                    {
                        url : 'controller-path',
                        type : 'POST',
                        dataType : 'json',
                        data : 
                        {
                            Answers : $("#answerlist").val(),
                            QuestionID : questionID
                        },
                        success : function(resp)
                        {
                            $(dialog).dialog("close");
                            var newanswers = $("#answerlist").val();
                            modifyanswers(controlid,newanswers);
                        },
                        error : function()
                        {
                            alert('there was a problem saving the new answers, please try again');
                        }
                    });
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
};

$（“.editButton”）.live（“单击”，函数（e）{
e、 预防默认值（）；
var$title=$（this.attr（“title”）；
var$answers=$（this.attr（“answers”）；
var$controlid=$（this.attr（“id”）；
var questionID=$（this.attr（'questionID'）；
dropdownlist（这个，问题ID，$controlid，$title，$answers）；
});
功能下拉列表（el、问题ID、控制ID、标题、答案）{
var$answersreplace=answers.replace（/\，/g，“\r”）；
var$deleteDialog=$（“+$answersreplace+”（要更改回打开的答案字段，请删除上面的所有选项并保存）”；
$deleteDialog
.对话({
可调整大小：false，
身高：280，
宽度：350，
标题：标题+“-编辑选项”，
莫代尔：是的，
按钮：{
“保存”：函数（）{
var对话框=$（此）；
$.ajax（函数（）
{
url:“控制器路径”，
键入：“POST”，
数据类型：“json”，
数据：
{
答案：$（“#回答列表”）.val（），
问号：问号
},
成功：功能（resp）
{
$（对话框）。对话框（“关闭”）；
var newanswers=$（“#应答列表”）.val（）；
修改答案（controlid、newanswers）；
},
错误：函数（）
{
警报（“保存新答案时出现问题，请重试”）；
}
});
},
取消：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
};

除此之外，您还需要添加一个名为

questionID

的属性，该属性存储答案相关行的ID

另一方面，我将避免以这种方式使用属性。您可以将标题存储在title中，因为这是一个有效的属性，尽管在我的示例中，答案和问号都不是有效的属性，因此将无法通过HTML验证

---

您可以/应该考虑以另一种方式存储它们

您可以在对话框的

save

回调中添加一个ajax调用，它会将新值发送到服务器？您可以给我发送一些关于如何执行的示例代码吗。我会非常感激：）谢谢，但我有一个问题，为什么ajax中的错误总是出现？错误：function（）{alert（'保存新答案时出现问题，请重试]；}这取决于您是如何实现它的。。。你是否只是复制并粘贴了我给你的代码，而没有做任何其他事情？您是否已设置控制器以接收请求并插入新答案？如果您有Chrome或Firefox（安装firebug），请按F12查看Ajax请求及其引发错误的原因。我创建了如下控制器：[HttpPost]public ActionResult示例（字符串答案、字符串问题、字符串控制ID、字符串事件ID）{return View（“CustomizedQuestion”）；}请查看更新的一个。实际上，它成功地调用了控制器，但在执行之后