在不刷新页面的情况下单击按钮将部分视图加载到 div答案

【问题标题】：Load partial view into div on button click without refreshing page在不刷新页面的情况下单击按钮将部分视图加载到 div
【发布时间】：2013-02-14 23:23:02
【问题描述】：

我知道这个问题可能会重复，但我的查询有所不同让我解释一下，我在页面中有一个下拉菜单，通过在下拉列表中选择值，然后单击提交按钮。我想通过单击提交按钮我需要在标记中加载部分视图，该标记是所选下拉列表值的记录列表。

我试过这个：

$("#btnclick").click(function () {
            $.ajax({
                type: 'POST',
                url: '@Url.Content("~/Search/MDLNoDataList")',
                data: mdlno,
                success: function (data) { $("#viewlist").innerHtml = data; }
            });
        });

但没有得到结果而且我正在使用这些许多 jquery 插件

<script src="../../Scripts/jquery-migrate-1.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>

【问题讨论】：

标签： asp.net-mvc jquery

【解决方案1】：

如果我理解正确，以下是你需要做的。

HTML 示例：

<div id="records">
</div>
<select id="ddlRecordType">
<option value="1">Type 1</option>
<option value="2">Type 2</option>
</select>
<input type="submit" value="Load Records" id="btn-submit" />

jQuery 代码

$(document).ready(function(){
 $('#btn-submit').click(function(){
  var selectedRecVal=$('#ddlRecordType').val();
   $('#records').load('/LoadRecords?Id='+selectedRecVal);
   return false; // to prevent default form submit
 });
});

这里?id=是查询字符串参数传递给服务器获取下拉列表中的选定项。

编辑：添加了以下答案，因为问题内容与最初的帖子不同

   $("#btnclick").click(function () {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("MDLNoDataList","Search")',
            data: mdlno,
            success: function (data) { 
              // $("#viewlist")[0].innerHtml = data; 
               //or 
               $("#viewlist").html(data);
             }
        });
      return false; //prevent default action(submit) for a button
    });

【讨论】：

我没有将 id 传递给控制器的问题。我可以成功地将 id 传递给控制器，并且可以成功地在局部视图中获取数据.. 但事实是.. 我只希望在单击按钮时将带有数据的局部视图加载到 div 标记中。
@Anu $('#btn-submit').click(function(){ 这行代码只代表按钮点击！
@Anu，请参阅我的更新答案。您可以使用 $("#viewlist").html() 或 $("#viewlist")[0].innerHtml

【解决方案2】：

确保通过单击处理程序返回 false 来取消表单提交的默认操作：

$("#btnclick").click(function () {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("MDLNoDataList", "Search")',
        data: mdlno,
        success: function (data) { 
            $("#viewlist").html(data); 
        }
    });

    return false; // <!-- This is the important part
});

如果您使用的是 WebForms 视图引擎而不是 Razor，请确保使用正确的语法来指定 url：

$("#btnclick").click(function () {
    $.ajax({
        type: 'POST',
        url: '<%= Url.Action("MDLNoDataList", "Search") %>',
        data: mdlno,
        success: function (data) { 
            $("#viewlist").html(data); 
        }
    });

    return false; // <!-- This is the important part
});

如果你不返回 false，当你点击提交按钮时，表单只是简单地提交给服务器，浏览器重定向离开页面，显然你的 AJAX 调用永远没有时间执行。

您还会注意到我对您的原始代码所做的一些改进：

在指向服务器端控制器操作时使用 Url.Action 帮助程序，以考虑应用程序中定义的路由。
使用 jQuery 的 .html() 方法而不是 innerHTML 来设置给定元素的内容。

【讨论】：

【解决方案3】：

为此，您需要 AJAX。

$.get(url, data, function(data) { $(element).append(data) });

以及模糊的部分视图。

element {
    overflow:hidden;
}

【讨论】：