加载部分视图到按钮点击div没有刷新页面

问题描述：

我知道这个问题可能会重复，但我的查询是不同的让我解释一下，我有一个下拉页面，并通过选择下拉列表中的值，我点击提交按钮..我希望通过点击提交按钮我需要加载部分视图的标签，这是所选下拉列表值的记录列表。加载部分视图到按钮点击div没有刷新页面

我想这：

$("#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>

答

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

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 
}); 
});

这里编号=是传递给服务器，以获得所选项目的查询字符串参数？落下。

编辑：下面的答案加入，因为这个问题的内容从最初的交变

$("#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 
    });

我已经使用HTML助手类下拉列表... – 2013-02-09 11:37:54

– 2013-02-09 11:38:26

我没有问题将ID传递给控制器。我可以成功地将ID传递给控制器，并且我可以在局部视图中成功获取数据..但事情是这样的..我只是想让我的部分视图与数据应该加载在div标签中，当我点击按钮。 – 2013-02-09 11:41:53

答

需要AJAX用于这一目的。

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

和部分视图是模糊的。

element { 
    overflow:hidden; 
}

答

确保你从你的点击处理程序返回错误取消表单提交的默认操作：

$("#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来设置给定元素的内容。

加载部分视图到按钮点击div没有刷新页面

相关推荐