Javascript 调用部分视图后，主视图堆栈在同一页上

我有一个操作，它根据下拉列表中的选定值返回不同的局部视图

控制器：

[HttpPost]
        public ActionResult Foo(SomeViewModel VM)
        {
            var model = VM
            if (Request.IsAjaxRequest())
            {
                if (model.SelectedValue == 1 || model.SelectedValue == 2 || model.SelectedValue == 3)
                {
                    // ...
                    return PartialView("PartialView1", model);
                }
                else if (model.SelectedValue == 4)
                {
                    // ...
                    return PartialView("PartialView2", model);
                }
                else (model.SelectedValue == 5)
                {
                    // ...
                    return PartialView("PartialView3", model);
                }
            }
            return View(model);
        }

主要观点：

<script src="~/Scripts/jquery-3.2.1.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<div>
    <h2>Paint Computation</h2>
    @using (Ajax.BeginForm("Foo", "Controller",
 new AjaxOptions
 {
     HttpMethod = "POST",
     UpdateTargetId = "Result"
 }))
    {
        <div class="col-md-10">
            <h5>Type of Paint</h5>
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="form-group">
                @Html.DropDownListFor(m => m.SelectedValue, new SelectList(Model.PaintType, "Value", "Text"),
                "Please Select", htmlAttributes: new { @class = "form-control" })
            </div>
            <br />

        // Some HTML helpers
            <input type="submit" value="Compute" class="btn btn-default" id="Submit" />

        </div>
    }
</div>

//This is how I render my partial view using jQuery in my main View:

    <div id="Result">
        <hr />
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#Submit').click(function () {
                $('#Result').load('/Controller/Foo');
            });
        });
    </script>

每当我单击按钮时，都会显示部分视图，但当我再次单击第三次或第四次时，主视图内容会堆叠在同一主视图上。我尝试使用inspect元素，这就是我确定它堆叠相同主视图元素的方式

我称之为局部视图的方式正确吗？我希望尽可能使用ajax在每次单击按钮时调用局部视图。请引导我改正它。谢谢

这是问题的症结所在

<script type="text/javascript">
    $(document).ready(function () {
        $('#Submit').click(function () {
            $.ajax({
                type: 'POST',
                url: '/Controller/Foo',
                cache: false,
                contentType: "application/html; charset=utf-8",
                dataType: 'html',
                success: function (result) {
                    $('#Result').html(result);
                }
            });
        });
    });
</script>

---

现在它起作用了。我更改了代码并使用了上面的代码。我使用.html而不是.append或.replaceWith。现在，每次我点击按钮，它都会改变我个人的想法，我会有两个或更多的动作，而不是一个动作来完成所有事情，但除此之外，原则是正确的，虽然我不明白为什么要在部分中使用ajax调用，但这似乎与提交有关——这看起来应该是在加载视图和通过ajax加载结果时设置的。看起来有一些额外的代码/html未包括在内。看起来您的问题是每个部分都有自己的部分，所以您要多次添加这些代码，以获得多个结果。“堆叠”最有可能是由bootstrap的“col-md-10”引起的。我想在每次使用ajax根据dropdownlist中的m.SelectedValue单击按钮时调用部分视图，这样页面就不会在用户每次提交时刷新。您能建议我应该采取什么方法使主视图不堆叠吗@freedomn mTake从部分中取出并放在主页上。它在主页上。我只是在与$result.loadurl相同的代码上将其分开。问题中没有提到.append，每次都会生成重复项。