asp.net-mvc - jquery中如何刷新div的内容？

Question

我正在显示一个名为“表单”的 View ，它有一个下拉列表。当 dropdownlist 有不同的选择时，我有一个 jquery，如下所示:

    $(document).ready(function () {
        $("#myDropDownList").change(function () {
            $.ajax({
                url: '/Home/Forms/' + $("#myDropDownList option:selected").val(),
                type: 'GET',
                success: function (data) {
                // refresh div
                }
            });
        });
    });

这是我的表单 View :

    @model myProject.ViewModels.PageView

    @section JavaScript
    {
       <script type="text/javascript" src="@Url.Content("/Scripts/jquery.myJQuery.js")"></script>
    }

    @Html.DropDownList("myDropDownList", Model.selectList)

    <div id="somediv">
       @Html.Label(Model.ValueThatShouldChange)
    </div>

因此，当再次调用 Forms 操作时，我的 ViewModel 中的 ValueThatShouldChange 将会发生变化，并且它们将显示在 div 中。这就是为什么我想刷新该 div，但我不知道该怎么做。

我尝试了 $('#yourdivID').html(data) 但它在 div 中加载了我的整个 View 。

Answer 1

最简单的方法是使用 load() 函数通过使用其 id 选择页面来加载您需要的页面的特定部分。例如:

$("#yourDivId").load("/Home/Forms/ #" + $('#myDropDownList option:selected').val())

根据网页的构建方式(您不提供该信息)，您还可以通过包含加载所需内容的参数来更改 Ajax 调用。例如:

$(document).ready(function () {
    $("#myDropDownList").change(function () {
        $.ajax({
            url: '/Home/Forms/' + $("#myDropDownList option:selected").val(),
            data: { id : $('#myDropDownList option:selected').val() }
            type: 'GET',
            success: function (data) {
               $('div#yourDivId').html(data);
            }
        });
    });
});

在你的页面中你只需根据id输出你需要的内容(如果是PHP):

<? if (isset($_POST['id'])) {
      if ($_POST['id'] == "somediv") { ?>
         <div id="somediv">Just this content should be loaded</div>
   <? }
   }
   else { ?>
     <!-- your regular html... -->
?  }   ?>