Question

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

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

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

控制器：

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

           return View("CustomizedQuestion");
       }

使用Javascript：

$(".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, "&nbsp;\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");

        }

    }

});

};

enter image description here

Answer 1

根据评论的要求：

$(".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 , "&nbsp;\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");
                }
            }
        });
};

除此之外，您还需要添加名为questionID的属性，该属性存储答案所涉及的行的ID。

另外，我会避免以这种方式使用属性。您可以将标题存储在标题中，因为这是一个有效的属性，尽管答案和我的示例questionID不是有效的属性，因此，HTML验证将失败。

你可以/应该看看以另一种方式存储它们。

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

1 个答案: