MVC Ajax未填充同一页面

本文介绍了MVC Ajax未填充同一页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在MVC上做的还不是很多，所以我希望这是一件容易的事.我正在尝试构建一个文本框，当用户键入字母时，该文本框将使用搜索到的数据填充弹出窗口.有点像一个下拉列表，但是不想使用它的功能. (就这样吧.) 我已经使用后面的代码和PageMethods在非MVC页面上工作了. MVC需要不同的技术.我已经设置了一个返回适当数据的控制器.我已经在Global.asax.cs中设置了route.MapRoute. 这是我的.ascx文件中的代码:

I''ve not done very much with MVC so I''m hoping this is a easy one. I''m trying to build a textbox that will populate a pop-up with searched data as the user types letters. Kind of like a dropdown but the powers that be don''t want to use one. (So be it.) I''ve gotten this to work on a non-MVC page using code behind and PageMethods. MVC requires different techniques. I''ve setup a controller that returns the appropriate data. I''ve setup routes.MapRoute in the Global.asax.cs. Here is the code in my .ascx file:

<script type="text/javascript"> var timeout = 500; var closetimer = 0; var ddmenuitem = 0; function DisplaySearchResults(searchtxt) { // alert(document.location.href = "/MallSearch/" + searchtxt); $.ajax({ type: "GET", url: document.location.href = "/MallSearch/" + searchtxt, dataType: "text", context: document.body, success: function(data) { //$(this).OnSucceeded(data); OnSucceeded(data); } }); } function OnSucceeded(data) { // Display results //alert(data); $get(''<%=lblSearchResults.ClientID %>'').innerHTML = data; } </script> <link href="/corporate/css/styles.css" rel="stylesheet" type="text/css" /> <!--suggest--> <script type="text/javascript" src="/corporate/js/suggest/jsapi.js"></script> <script type="text/javascript" src="/corporate/js/suggest/script.js"></script> <!--sliding panel--> <script src="/corporate/js/panel/slide.js" type="text/javascript"></script> <link rel="stylesheet" href="/corporate/js/panel/slide.css" type="text/css" media="screen" /> <script type="text/javascript" src="/corporate/js/forms/jquery.jqtransform.js" ></script> <link rel="stylesheet" href="/corporate/js/forms/jqtransform.css" type="text/css" media="all" /> <script type="text/javascript"> $(function() { $(''form.jump'').jqTransform({ imgPath: ''corporate/js/forms/img/'' }); }); /* placeholder text */ jQuery(function($) { $("input[name=''searchmall'']").addPlaceholder(); }); </script> <div id="menu"> <div id="formfield"> <input name="searchmall" type="text" id="inputString" size="21" onkeyup="DisplaySearchResults(this.value);" placeholder="Search mall name or state" /> <br /> <div id="suggestions"> <asp:Label ID="lblSearchResults" name="lblSearchResults" runat="server" Text=""></asp:Label> </div> </div><!--end formfield--> <div id="panel"> <div id="toppanel"> <a href="#">more search options &raquo;</a> </div> <!--toppanel --> </div><!--panel --> </div>

测试控制器返回的数据时，不会填充标签"lblSearchResults" .innerHTML.实际上，我看不到$ .ajax调用返回的数据.发生的情况是打开了一个新的空白虚拟页面，并在其中返回并显示了数据.

When testing the data returned from the controller will not populate the label "lblSearchResults" .innerHTML. In fact I can not see the data returned from the $.ajax call. What happens is a new blank virtual page is opened and the data is returned and displayed there.

推荐答案

.ajax({ 类型:"GET"， 网址:document.location.href ="/MallSearch/" + searchtxt， dataType:文本"， 上下文:document.body， 成功:功能(数据){ // .ajax({ type: "GET", url: document.location.href = "/MallSearch/" + searchtxt, dataType: "text", context: document.body, success: function(data) { //

(this).OnSucceeded(data); OnSucceeded(data); } }); } 函数OnSucceeded(data){ //显示结果 //alert(data); (this).OnSucceeded(data); OnSucceeded(data); } }); } function OnSucceeded(data) { // Display results //alert(data);

get(''<％= lblSearchResults.ClientID％>'')).innerHTML = data; } </script> < link href ="/corporate/css/styles.css" rel ="stylesheet" type ="text/css"/> <！-建议-> < script type ="text/javascript" src ="/corporate/js/suggest/jsapi.js"></script> < script type ="text/javascript" src ="/corporate/js/suggest/script.js"></script> <！-滑动面板-> < script src ="/corporate/js/panel/slide.js" type ="text/javascript"></script> < link rel ="stylesheet" href ="/corporate/js/panel/slide.css" type ="text/css" media ="screen"/> < script type ="text/javascript" src ="/corporate/js/forms/jquery.jqtransform.js"></script> < link rel ="stylesheet" href ="/corporate/js/forms/jqtransform.css" type ="text/css" media ="all"/> < script type ="text/javascript"> get(''<%=lblSearchResults.ClientID %>'').innerHTML = data; } </script> <link href="/corporate/css/styles.css" rel="stylesheet" type="text/css" /> <!--suggest--> <script type="text/javascript" src="/corporate/js/suggest/jsapi.js"></script> <script type="text/javascript" src="/corporate/js/suggest/script.js"></script> <!--sliding panel--> <script src="/corporate/js/panel/slide.js" type="text/javascript"></script> <link rel="stylesheet" href="/corporate/js/panel/slide.css" type="text/css" media="screen" /> <script type="text/javascript" src="/corporate/js/forms/jquery.jqtransform.js" ></script> <link rel="stylesheet" href="/corporate/js/forms/jqtransform.css" type="text/css" media="all" /> <script type="text/javascript">