Question

我已经制作了一个Ajax功能但是我得到了一个很大的问题。
我点击链接显示内容.. 链接从数据库中获取，并且链接的URL也从数据库中获取。我已经通过点击链接动态调用内容了

<script type="text/javascript">
$(document).ready(function () {
  $('a').click(function (e) {
   e.preventDefault();
   var filename = $(this).text();
   var Hobbyurl = '@Url.Action("FetchUrlByHobbyName")';
   $.ajax({
            type: "POST",
            url: Hobbyurl,
            data: { data: filename },
            success: function (returndata) {
            $('iframe').attr('src', returndata);
            }
                    });
                });
            });
  </script>

现在FetchUrlByHobbyName是从Controller调用的函数，它返回url

 //Ajax routine to fetch the hobbyinfo by hobbyname
    [HttpPost]
    public ActionResult FetchUrlByHobbyName(string data)
    {
        HobbyMasters hobbymaster = new HobbyHomeService().FetchHobbyMasterByHobbyName(data);
        string url = hobbymaster.InformationUrl;
        if (HttpContext.Request.IsAjaxRequest())
            return Json(url);
        return View();
    }

在我的视图中，我写了这样的链接：

@foreach (var item in Model)
{
   <li >@Html.ActionLink(item.HobbyName, "Hobbies")
   </li>
}

我试过这个：

@Html.ActionLink(item.HobbyName, "Hobbies", null, new { id = "alink" })

然后单击'alink'调用Ajax但是这样我的ajax函数不会被调用 现在的问题是，点击页面上的每个链接都会调用ajax函数 ..
我想为它分配一个唯一的ID，但我不知道如何做到这一点请帮助我...

Answer 1

对于该特定链接，请指定一个ID。 E.g

<a id="someID" href="url">Link</a>

并且仅将点击与该链接绑定。

$('#someID').click(function (e)) ....

Answer 2

如果我理解正确，这有助于你

<a href="/somepath" id="mySuperLink" onclick="myAjaxFunction()">The text of the link</a>
    <script type="text/javascript">
    function myAjaxFunction(){
       e.preventDefault();
       var filename = $(this).text();
       var Hobbyurl = '@Url.Action("FetchUrlByHobbyName")';
       $.ajax({
                type: "POST",
                url: Hobbyurl,
                data: { data: filename },
                success: function (returndata) {
                $('iframe').attr('src', returndata);
                }
      });


  </script>

Answer 3

尝试给你的动作链接提供一个css类选择器......

@Html.ActionLink("some link", "Create", "Some_Controller", new { }, new { @class = "test" })

然后用户jquery ..

<script type="text/javascript">
$(document).ready(function () {
  $('.test').click(function (e) {
   e.preventDefault();
   var filename = $(this).text();
   var Hobbyurl = '@Url.Action("FetchUrlByHobbyName")';
   $.ajax({
            type: "POST",
            url: Hobbyurl,
            data: { data: filename },
            success: function (returndata) {
            $('iframe').attr('src', returndata);
            }
                    });
                });
            });
  </script>

如何将事件与MVC3中的Html.ActionLink相关联

3 个答案: