Monday 3 December 2012

Model Pop Up in MVC3


Model Pop Using Jquery UI

<!-- Model PopUp Content-->
<script type="text/javascript">
    var linkObj;
    $(function () {
        $(".authorize").button();

        $('#updateDialog').dialog({
            autoOpen: false,
            width: 950,
            resizable: false,
            modal: true,
            buttons: {
                "Post": function () {
                    $("#update-message").html(''); //make sure there is nothing on the message before we continue                        
                    $("#updateForm").submit();
                },
                "Unpost": function () {
                    var TransId = document.getElementById("hdnTransId").value;
                    var TransType = document.getElementById("hdnTransType").value;
                    if (parseInt(TransId) != 0 && parseInt(TransType) != 0) {
                        $(document).ready(function () {
                            $("#ajax_loading_div").addClass("loading");
                            $.ajax({
                                cache: false,
                                async: true,
                                type: "GET",
                                dataType: "json",
                                url: "../Services/FinTranService.svc/UnpostAuth",
                                data: { Id: TransId, Type: TransType },

                                contentType: "application/json;charset=utf-8",
                                success: function (r) {
                                    if (r != null) {
                                        $("#ajax_loading_div").removeClass("loading");
                                        $(this).dialog("close");
                                    }
                                },
                                error: function (e) {
                                    $("#ajax_loading_div").removeClass("loading");
                                    $(this).dialog("close");
                                }
                            });
                        });
                    }
                }
            }
        });
   
    $(".authorize").click(function () {
        //change the title of the dialgo
        linkObj = $(this);
        var dialogDiv = $('#updateDialog');
        var viewUrl = linkObj.attr('href');
        $.get(viewUrl, function (data) {
            dialogDiv.html(data);
            dialogDiv.dialog('open');
        });
        return false;
    });
});


In List
@Html.ActionLink("Authorize", "ViewAuthorize", new { TAid = item.TransId,mode=item.TransType}, new { @class = "authorize" })       


Pop up content page as partial view
@using (Ajax.BeginForm("ViewTransAuthorize", "FinanceTransaction", null,
        new AjaxOptions
        {
            UpdateTargetId = "update-message",
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "POST",
            OnSuccess = "updateSuccess"
        }, new { @id = "updateForm" }))

    <div id="update-message" class="error invisible">
    </div>

//Your Content here

}

No comments:

Post a Comment