0

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

我试过这个：

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

3 回答 3

3

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

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
    });
于 2013-02-09T11:24:48.510 回答
3

确保通过单击处理程序返回 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设置给定元素的内容。
于 2013-02-09T12:51:08.943 回答
0

为此，您需要 AJAX。

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

和模糊的部分视图。

element {
    overflow:hidden;
}
于 2013-02-09T11:06:32.933 回答