使用MVChelper类在模态弹出窗口中使用jquery选项卡

时间:2014-07-12 08:03:50

标签: asp.net-mvc jquery-ui popup

我正在使用MVC助手类来显示模态弹出窗口。我的要求是在这个模态弹出窗口中显示标签...这是做什么

我的帮助班

public static MvcHtmlString DialogROFormLink(this HtmlHelper htmlHelper, string linkText, string dialogContentUrl,
         string dialogTitle, string updateTargetId, string updateUrl, string l_intHeight, string l_intWidth, string l_strFrmLinkPost )
    {
        TagBuilder builder = new TagBuilder("a");
        builder.SetInnerText(linkText);
        builder.Attributes.Add("href", dialogContentUrl);
        builder.Attributes.Add("data-dialog-title", dialogTitle);
        builder.Attributes.Add("data-update-target-id", updateTargetId);
        builder.Attributes.Add("data-update-url", updateUrl);
        builder.Attributes.Add("data-dialog-height", l_intHeight );
        builder.Attributes.Add("data-dialog-width", l_intWidth );
        builder.Attributes.Add("data-dialog-frmLink", l_strFrmLinkPost);
        // Add a css class named dialogLink that will be
        // used to identify the anchor tag and to wire up
        // the jQuery functions
        builder.AddCssClass("ROdialogLink");

        return new MvcHtmlString(builder.ToString());
    }

JS文件

$(function () {

// Don't allow browser caching of forms

$.ajaxSetup({ cache: false });

// Wire up the click event of any current or future dialog links
$('.ROdialogLink').live('click', function () {
    var element = $(this);


    // Retrieve values from the HTML5 data attributes of the link        
    var dialogTitle = element.attr('data-dialog-title');
    var updateTargetId = '#' + element.attr('data-update-target-id');
    var updateUrl = element.attr('data-update-url') + "?id=" + Math.floor(Math.random() * 1000);

    // Generate a unique id for the dialog div
    var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)
    var dialogDiv = "<div id='" + dialogId + "'></div>";
    var lheight = element.attr('data-dialog-height');
    var lwidth = element.attr('data-dialog-width');
    var l_frmPost = element.attr('data-dialog-frmLink');


    // Load the form into the dialog div
    $(dialogDiv).load(this.href, function () {
        $(this).dialog(
        {
            modal: true,
            resizable: false,
            width: lwidth,
            height: lheight,
            title: dialogTitle,
            cache: false,
            type: 'get',

            buttons:
            {
                "Save": function () {

                    // Manually submit the form                        
                    var form = $('form', this);
                    $(form).submit();

                },
                "Cancel": function ()
                { $(this).dialog('destroy'); }
            },
            show: {
                effect: "blind",
                duration: 200
            },
            hide: {
                effect: "blind",
                duration: 200
            }
        })

        // Enable client side validation
        $.validator.unobtrusive.parse(this);

        // Setup the ajax submit logic
        wireUpForm(this, updateTargetId, updateUrl, l_frmPost);
    });
    return false;
});

});
function wireUpForm(dialog, updateTargetId, updateUrl, l_frmPost) {
$('form', dialog).submit(function () {
    // Do not submit if the form
    // does not pass client side validation
    if (!$(this).valid())
        return false;



    $(dialog).dialog('close');

    // Client side validation passed, submit the form
    // using the jQuery.ajax form



    return false;
});
}

以下是我添加了标签脚本

的视图
<script>
$(function () {
    $("CalendarTabs").tabs();
});
</script>

@using (Html.BeginForm())
{
<div id="CalendarTabs">
    <ul>
        <li><a href="#CalTab-1">Estimate</a></li>
        <li><a href="#CalTab-2">Address/Phone/Insurance</a></li>
    </ul>
    <div id="CalTab-1">
    </div>
    <div id="CalTab-2">
    </div>
</div>
}

我试图显示模态弹出窗口而不使用帮助器类来显示弹出窗口,包括选项卡并且工作正常。但在这种情况下失败了。

请帮帮我!感谢

0 个答案:

没有答案