jQuery通用代码

时间:2010-11-13 12:35:45

标签: jquery asp.net-mvc asp.net-mvc-2 jquery-ui jquery-dialog


我在我的应用程序中使用jQuery模式对话框来处理正常的CRUD操作。在某些情况下,我甚至打开了两个堆叠的模态对话框。

然后我在外部javascript文件中创建了两个泛型函数来分别处理CRUD表单的显示和提交。

要显示模态对话框,我调用以下函数

function _loadDialog(level, action, id, title, onCloseHandler) {
    var panel = panels[level];
    $(panel).dialog("option", "title", title);
    var url = action;
    if (id != "") url = url + "/" + id;
    $.ajax({
        type: "get",
        dataType: "html",
        url: url,
        data: {},
        success: function(response) {
            $(panel).html('').html(response).dialog('open');
        }
    });
    $(panel).unbind("dialogclose").bind("dialogclose", function(event, ui) {
        if (onCloseHandler != null) {
            onCloseHandler();
        }
    });
}

此函数接收一个level参数,该参数指示函数如何堆叠对话框以及从ajax调用返回的渲染部分标记的放置位置。这个功能很好。

在ajax调用返回的部分视图内部有输入,最后是以下代码

<div style="text-align:right;">
    <input type="submit" id="btnSave" value="Salva" />
</div>

,对于jQuery部分,例如,

$("#contactForm").submit(function(event) {
    _submitForm(1, event, "#contactForm", "post", "html", '<%= Url.Content("~/Contact/Save") %>');
});

如您所见,提交功能具有以下签名

function _submitForm(level, event, formName, atype, adataType, aurl) {
}

并处理

  • 表单提交到正确的控制器操作
  • 用户反馈(例如“行动成功执行”)
  • 对话框关闭操作

需要使用level参数来解决所有功能,包括关闭对话框,使用正确的DIV面板。

我希望能够像对话框一样显示相同的对话框,有时也可以显示为子对话框 为了能够做到这一点,我的意思是“逻辑上说”,因为我对javascript和jQuery不是很强,我需要进行以下更改:

  • 修改_loadDialog函数以将level参数保存在对话框标记本身中
  • 修改_submitForm功能,并使用之前从level功能保存的正确_loadDialog参数进行设置。

我怎样才能做到这一点?

2 个答案:

答案 0 :(得分:1)

听起来你只需要在调用它时将level参数传递给_submitForm函数。

function _loadDialog(level, action, id, title, onCloseHandler) {
    var form = $('<form ...></form>');
    // ... Generates the form markup

    form.submit(function() {
        _submitForm(level, ...);
    });
}

虽然我明显地忽略了我不了解您的实施的所有细节,但关键在于,level传递到_loadDialog的任何细节都会传递到_submitForm当它被召唤时。

在JavaScript中,在调用_submitForm的同时不会调用_loadDialog并不重要。通过所谓的“闭包”(JavaScript程序员喜欢谈论的内容),level变量将安全地保存在form.submit()的匿名回调函数中,并且在该函数中仍然可以使用相同的值最终被称为。

答案 1 :(得分:1)

我对什么时间和地点有点困惑,但似乎你想把一些信息与特定元素联系起来。

为此,您可以使用jQuery的.data()方法。它会将您想要的任何数据与特定元素相关联。

不确定在你的情况下应该如何使用它,但这是一个通用的例子:

$('#someSelector').data('level', 3);

现在,标识为someSelector的元素的数字3会在其关联数据中映射到其'level'属性。

所以要检索它,你会这样做:

$('#someSelector').data('level'); // returns 3

当销毁具有与之关联的数据的元素时(这只是此类数据的一个示例),您应该确保使用.remove().empty()或其中一种自动方法或手动删除数据。