Sunday, 19 June 2016

How to bind a partial view in a div?

 <div id="dvMappingList" style="display:none;"> </div>

        public ActionResult ServicetoServiceMapping()
        {
            AModel model = new AModel();
            try
            {
             

                return PartialView("_ServiceMapping", model);
            }
            catch (Exception ex)
            {
                throw ex;
            }

        }

function bindServicetoService(serviceId, IsServiceId) {
        debugger;
        $('#dvMappingList').html('');
        loader();
        $.ajax({
            cache: false,
            type: "GET",
            url: '@Url.Action("ServicetoServiceMapping", "Component")',
            data: { serviceId: serviceId, IsServiceId: IsServiceId },
            success: function (result) {
                debugger;
                $("#dvMappingList").html(result);
                $('.tabclass li').removeClass("active");
                $('#litab3').addClass("active");
                $('.tab-content div').removeClass("in active");
                $('#tab3').addClass("in active");
                //document.getElementById("litab3").style.display = "block";
                document.getElementById("dvMappingList").style.display = "block";
                $("#popup_ok").click();
            },
        }
    )
    };

And after that top to message display and reload the page-:

In Partial view page-

 <div id="prefix_108058000000" class="Metronic-alerts alert alert-success fade in" style="display: none;">
            <a type="button" class="close" data-dismiss="alert" aria-hidden="true"></a>
            <span id="spnmessage1"></span>
        </div>
        <div id="prefix_Error" class="Metronic-alerts alert alert-danger fade in" style="display: none;">
            <a type="button" class="close" data-dismiss="alert" aria-hidden="true"></a>
            <span id="spnmessage2"></span>
        </div>


In Main Page

<div class="page-content" id="dvSubComponat">

In a div tab and partial pages...........

<ul class="nav nav-tabs tabclass">
        <li class="active" id="litab1"><a data-toggle="tab" href="#tab1">A Mapping</a></li>
        <li id="litab2" style="display:none;"><a data-toggle="tab" href="#tab2">Add Edit Employee</a></li>
        <li id="litab3" style="display:none;"><a data-toggle="tab" href="#tab3">DepartmentMapping Mapping</a></li>
        <li id="litab4" style="display:none;"><a data-toggle="tab" href="#tab4">Add Edit Deaprtment Mapping</a></li>
    </ul>

<div class="form-body">
 <div id="tab1" class="tab-pane fade in active">
                                                <div id="dvEmployee">
                                                    @Html.HiddenFor(a => a.EmpID)
                                                    <div class="form-group" style="margin-left:-217px;">
                                                        <label class="control-label col-md-3">
                                                            Search EmployeeID :
                                                        </label>
                                                        <div class="col-md-4">
                                                            @Html.TextBoxFor(m => m.SerTextID, new { @class = "form-control", @onkeypress = "return PopulateEmployeeID();" })
                                                        </div>
                                                    </div>
                                                    <div id="dvserAllList">
                                                        @Html.Partial("_EmployeeAllListPartial", Model)
                                                    </div>
                                                </div>

                                                <div id="dvmaplist" style="display:none;">
                                                    @Html.Partial("_ComponentMappingPartial", Model)
                                                </div>

                                                <div id="dvunmaplist" style="display:none;">
                                                    @Html.Partial("_ComponentUnMappingPartial", Model)
                                                </div>

                                            </div>
</div>

<div id="tab2" class="tab-pane fade">
            @Html.Action("AddEditEmployee", "Component", new { ID = 0 })
        </div>
</div>

 function SuccessSubComponent(data) {
        $("#popup_ok").click();
        if (data != null) {
            debugger;
            if (data.indexOf("exist") != -1) {
                $('#prefix_Error').show();
                $('#prefix_Error').removeClass("fade");
                $("#spnmessage2").html(data);
                $("#spnmessage2").focus();
                $('html,body').animate({
                    scrollTop: $("#dvSubComponat").offset().top
                },
       'slow');
                setTimeout("loadSubComponentReload()", 1000);
            }
            else {
                debugger;
                $('#prefix_108058000000').show();
                $('#prefix_108058000000').removeClass("fade");
                $("#spnmessage1").html(data);
                $("#spnmessage1").focus();
                $('html,body').animate({
                    scrollTop: $("#dvSubComponat").offset().top
                },
       'slow');
                setTimeout("loadComponentMapReload()", 1000);
            }
        }
    }

    function loadComponentMapReload() {
        window.location.href = "@Url.Action("ComponentMapping", "Component")";
    }


No comments:

Post a Comment