加载页面后加载部分视图

时间:2017-06-22 14:38:24

标签: javascript jquery html asp.net-mvc

我有一个包含加载下拉列表的视图,当下拉值更改时,它会加载部分视图,然后打开包含输入表单的下拉列表。这可以正常工作。

现在,当我打开页面,但已经选择了下拉值时,我需要加载相同的局部视图。

但是当我这样做时,整个布局再次被加载而不是我的局部视图。 这两个都回到了同样的行动。有没有人有想法。

请查看下面的图片了解输出。



$('#DbDropdown').on('change', function (evt) {
                LoadBody();
            });

            $(window).bind("load", function () {
                var e = document.getElementById("DbDropdown");
                var text = e.options[e.selectedIndex].value;
                if (text != "Please select")
                { 
                    LoadBody();
                }                
            });

            function LoadBody()
            {
                var url = "GetHeader";
                var $Detail = $("#HeaderSection")
                $.ajax({
                    data: $("#PRForm").serialize(),
                    type: 'GET',
                    cache: false,
                    dataType: 'html',
                    url: url,
                    success: function (result) {
                        $Detail.html(result);
                    },
                    error: function (ex) {
                        alert(ex);
                    }
                });
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
@model PRHeaderVM

<section>
    <h2>Purchase Requesition @Model.PrNumber
     </h2>
    <form asp-action="SubmitPR" role="form" id="PRForm" style="width: 100%;top:0;right:0;left: 10px; bottom:10px" enctype="multipart/form-data">
        @Html.HiddenFor(x => x.PrNumber)
        @Html.HiddenFor(x => x.Status)
        <div style="margin-top : 10px; position:fixed;top:50px;right:50px;width : 150px">
            @if (Model.Status == 1)
            {
                Html.RenderPartial("_CreateButtonTemplate");
            }
            @if (Model.Status == 2)
            {
                Html.RenderPartial("_ApproveButtonTemplate");
            }
        </div>
        <div class="form-horizontal">
            <div class="row">
                <div class="col-lg-3">
                    <div class="form-group">
                        <div style="padding-bottom: 40px;">
                            <label class="col-lg-4 control-label">Company</label>
                            <div class="col-lg-8">
                                <select id="DbDropdown" asp-for="CompanyID" asp-items="@Model.Companies" class="form-control">
                                    <option>Please select</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="HeaderSection">
            </div>            
        </div>
</form>
</section>
&#13;
&#13;
&#13;

自己选择值

Selecting the value myself

从模型加载的值 Value loaded from model

2 个答案:

答案 0 :(得分:0)

下面的答案应该这样做(已删除,请参阅注释)。还有一个输入:

从jQuery 3.0开始,.bind()已被弃用。 您正在使用第一行.on和第4行.bind。 .on已经替换了.live和.bind,所以你应该在每个元素上使用.on以供将来开发。

$('#DbDropdown') *.on* ('change', function (evt) {
   LoadBody();
});

$(window) *.bind* ("load", function () {

答案 1 :(得分:0)

通过指定on表单的url加载ajax调用解决。

function LoadPRBody(url) {                
                var $Detail = $("#HeaderSection");
                alert($("#PRForm").serialize().toString());
                $.ajax({
                    data: $("#PRForm").serialize(),
                    type: 'GET',
                    cache: false,
                    dataType: 'html',
                    url: url,
                    success: function (result) {
                        $Detail.html(result);
                    },
                    error: function (ex) {
                        alert(ex);
                    }
                });
            }

            $('#DbDropdown').on('change', function (evt) {
                LoadPRBody("GetHeader");
            });

            $(window).on("load", function () {
                var val = $('#DbDropdown').val();
                alert(val);
                if (val != 0) {
                    LoadPRBody("@Url.Action("GetHeader", "Requests")");
                }
            });

问题似乎是网址没有被正确加载到ajax reqest时的点,因此不知道在哪个控制器中查找动作。