Question

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

我试过这个：

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

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

Answer 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，请确保使用正确的语法来指定网址：

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

Answer 3

为此需要AJAX。

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

和偏见的部分视图。

element {
    overflow:hidden;
}

在没有刷新页面的情况下，在按钮单击时将局部视

3 个答案: