jQuery 单击按钮时将部分视图加载到 div 中而不刷新页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14787413/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Load partial view into div on button click without refreshing page
提问by IT_INFOhUb
I know this question might be repeated but my query is different let me explain, I have a drop down in page and by selecting value in drop down list,and I click on submit button.. I want by click on submit button I need to load partial view in tag that is list of records of selected drop down list value.
我知道这个问题可能会重复，但我的查询不同让我解释一下，我在页面中有一个下拉列表，并通过在下拉列表中选择值，然后单击提交按钮..我想通过单击提交按钮我需要在标记中加载部分视图，即所选下拉列表值的记录列表。
i tried this :
我试过这个：
$("#btnclick").click(function () {
$.ajax({
type: 'POST',
url: '@Url.Content("~/Search/MDLNoDataList")',
data: mdlno,
success: function (data) { $("#viewlist").innerHtml = data; }
});
});
but not getting result And I m using these many jquery plugins
但没有得到结果我正在使用这些 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>
回答by Murali Murugesan
If i understand correctly, below is what you need to do.
如果我理解正确，下面是您需要做的。
HTML Example:
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 Code
jQuery 代码
$(document).ready(function(){
$('#btn-submit').click(function(){
var selectedRecVal=$('#ddlRecordType').val();
$('#records').load('/LoadRecords?Id='+selectedRecVal);
return false; // to prevent default form submit
});
});
Here ?Id=is the query string parameter passed to server to get the selected item in dropdown.
这里的?Id=是传递给服务器的查询字符串参数，用于获取下拉列表中的所选项目。
Edit:The below answer was added, as the question content changed from initial post
编辑：添加了以下答案，因为问题内容与初始帖子有所不同
$("#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
});
回答by Darin Dimitrov
Make sure you cancel the default action of form submission by returning false from your click handler:
确保通过从单击处理程序返回 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
});
And if you are using the WebForms view engine and not Razor make sure you use the correct syntax to specify the url:
如果您使用的是 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
});
If you do not return false, the form is simply submitted to the server when you click on the submit button, the browser redirects away from the page and obviously your AJAX call never has time to execute.
如果您不返回 false，那么当您单击提交按钮时，表单将简单地提交到服务器，浏览器重定向离开页面，显然您的 AJAX 调用永远没有时间执行。
You will also notice some improvements I made to your original code:
您还会注意到我对原始代码所做的一些改进：
- Using the Url.Action helper when pointing to a server side controller action in order to take into account routes defined in your application.
- Using jQuery's
.html()method instead ofinnerHTMLto set the contents of a given element.
- 在指向服务器端控制器操作时使用 Url.Action 帮助程序，以便考虑应用程序中定义的路由。
- 使用 jQuery 的
.html()方法而不是innerHTML设置给定元素的内容。
回答by Muhammad Talha Akbar
You need AJAX for this purpose.
为此，您需要 AJAX。
$.get(url, data, function(data) { $(element).append(data) });
and Partial View that is vague.
和部分观点是模糊的。
element {
overflow:hidden;
}
