Ajax - 在鼠标悬停时向控制器发送请求并将结果呈现为div

时间:2013-10-14 09:49:30

标签: javascript asp.net ajax asp.net-mvc

我正在使用mvc中的项目,我尝试做的是在mouseover上使用Ajax函数来获取 来自我的数据库的信息。

我添加了一个控制器动作和一个视图来渲染结果。

但没有任何效果。

我尝试过很多东西,但我不明白问题出在哪里,因为什么都没发生。

这是我第一次使用ajax功能,所以我是新手..

希望每个人都能帮助我。

这是我的代码:

的Ajax:

 $("#mybutton").mouseover(function () {
        $.ajax({
            url: "@Url.Action(“MyAction”,”MyController”)", 
            success: function (result) {
                $("#InformationBox").html(result); /*<--div id where the results are showing*/
            }
        });
    });

的MainView:

<form action="@Url.Action("MyPostAction", "MyController")" method="post">
                      <button type="submit" name="submit" id="mybutton">
                      </button>                     
                      <input type="hidden" name="Id_Hidden" value="1" id="AjaxSendId"/>
                  </form>

控制器:

[ChildActionOnly]
        public ActionResult PartialViewExample(FormCollection formcollection) 
        {
            var id_option = formcollection["Id_Hidden"];

            SqlConnection cn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString);
            StringBuilder sb = new StringBuilder();
            cn.Open();
            sb.AppendLine("Select Id From Table1 ");
            sb.AppendLine("WHERE Id='" + id_option + "'");

            SqlDataReader sqlDataReader = new SqlCommand(sb.ToString(), cn).ExecuteReader();

            while (sqlDataReader.Read())
            {
                if (!sqlDataReader.IsDBNull(1))
                {
                    object value = sqlDataReader[1];
                    infolist(new Table1()
                    {
                        Name = value.ToString(),
                    });
                }
            }

            cn.Close();
            cn.Dispose();
            sqlDataReader.Dispose();

            ViewBag.Options = infolist

            return View("HintExampleView_Layout");
    }

HintExampleView_Layout(渲染结果但在MainView中显示):

<div id="InformationBox">
    @foreach (var p in ViewBag.Options)
    {
        @p.Step2Name
        @p.IconHover 
    }
</div>

2 个答案:

答案 0 :(得分:1)

<强>的MainView:

<form action="@Url.Action("PartialViewExample", "MyController")" method="post">
    <button type="submit" name="submit" id="mybutton">
    </button>                     
    <input type="hidden" name="Id_Hidden" value="1" id="AjaxSendId"/>
</form>
<div id="InformationBox">&nbsp;</div>

<强>控制器:

return PartialView("HintExampleView_Layout");

<强>的Ajax:

$(document).ready(function {     
    $("#mybutton").mouseover(function () {
        alert("Mouseover Test"); /* <- Remove me if working */
        $.ajax({
            url: "@Url.Action("MyAction","MyController")", 
            success: function (result) {
                $("#InformationBox").html(result); /*<--div id where the results are showing*/
            }
        });
    });
});

答案 1 :(得分:0)

哼哼你的网址不好(如果你不在cshtml文件中),你在客户端不要忘记:

 $("#mybutton").mouseover(function () {
        $.ajax({
            **url: "@Url.Action(“MyAction”,”MyController”)",** 
            success: function (result) {
                $("#InformationBox").html(result); /*<--div id where the results are showing*/
            }
        });
    });