MVC Ajax未填充同一页面 [英] MVC Ajax Not Populating Same Page

问题描述

我在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">

这篇关于MVC Ajax未填充同一页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！