单击ASP.NET MVC中的ActionLink后如何保持同一页面?

时间:2016-09-09 14:33:57

标签: asp.net-mvc actionlink

我是ASP.NET MVC的新手。我正在制作我的Web应用程序,并希望实现从列表中添加好友,点击链接“Dodaj”(英语:“添加”)后我想保存我的朋友,但是保持同一页面,只是更新我的列表。enter image description here

在我的Profil.cshtml中,我有:

@foreach (var item in Model.neprijatelji)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.IME_GOSTA)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PREZIME_GOSTA)
        </td>

        <td>

            @Html.ActionLink("Dodaj", "Dodaj", new { id = item.EMAIL_GOSTA })

        </td>
    </tr>
}

在我的ProfilController.cs动作Dodaj我有这个:

[HttpPost]
public ActionResult Dodaj( string id)
{
    string posiljalac = Session["idGosta"].ToString();
    PRIJATELJI pr = new PRIJATELJI();
    pr.EMAIL_GOSTA = posiljalac;
    pr.EMAIL_GOSTA1 = id;
    pr.PRIJATELJI_OD = System.DateTime.Now;
    db.PRIJATELJIs.Add(pr);
    db.SaveChanges();
    return RedirectToAction("Profil"); //O just want to do some change and stay on same page
}

我得到的结果是找不到错误404。我知道这是错的,但我该如何实现呢?

更新 这是我尝试的: 在我的Profil.cshtml中,我做了: 这是我尝试过的:在Profil.cshtml中我有这个:

    @foreach (var item in Model.neprijatelji)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.IME_GOSTA)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PREZIME_GOSTA)
        </td>

        <td>
            <a href="#" onclick="AddFriend(this)" data-id='@item.EMAIL_GOSTA' > Dodaj </a>

            <script>
                function AddFriend(ele)
                {
                    var values={id:$(ele).attr('data-id')};
                    $.post("/Profil/Dodaj", values, function (abc) {
                        var result=$.parseJSON(abc)
                        if (result.isAdded == "success") { alert("I just added this alert that my if isn't empty"); }
                            //Logic to append tr to existing table
                        else { alert("Some alert"); }
                        //raise exception or alert maybe.

                    });
                } 
                </script>
                </td>

在我的ProfilController中我有这个:

    public JsonResult Dodaj(string id)
    {
        string posiljalac = Session["idGosta"].ToString();
        PRIJATELJI pr = new PRIJATELJI();
        pr.EMAIL_GOSTA = posiljalac;
        pr.EMAIL_GOSTA1 = id;
        pr.PRIJATELJI_OD = System.DateTime.Now;
        try
        {
            db.PRIJATELJIs.Add(pr);

            db.SaveChanges();
            return Json(new { isAdded = "success" }, JsonRequestBehavior.AllowGet);
        }
        catch (Exception ex)
        {
            return Json(new { isAdded = "failure" }, JsonRequestBehavior.AllowGet);
        }
    }

当我在JavaScript函数上放置断点时,我得到: 如果没有可执行代码与此行相关联,则不会触发断点

当我点击“Dodaj”时,它似乎只识别href =“#”,因为从链接:http://localhost:50884/Profil/Profil然后我得到http://localhost:50884/Profil/Profil#

此外,我是否必须进行一些其他设置才能使我的JavaScript代码正常工作。我应该将JS代码保存在不同的文件中,然后是Profil.cshtml吗?

1 个答案:

答案 0 :(得分:2)

此处不使用动作链接尝试使用ajax post.And从动作Dodaj返回JSON结果。然后,如果返回的结果是成功,则通过Jquery将新的tr附加到表中,否则返回错误。

@foreach (var item in Model.neprijatelji)
{
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.IME_GOSTA)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.PREZIME_GOSTA)
    </td>

    <td>
    <a href="#" onclick="AddFriend(this)"  data-id='@item.EMAIL_GOSTA'/>
    </td>
</tr>
}

JS代码

<script>
function AddFriend(ele)
{
   var values={id:$(ele).attr('data-id')};
   $.post(someRootPath + "/Profil/Dodaj", values, function (abc) {
   var result=$.parseJSON(abc)
   if(result.isAdded=="success")
     //Logic to append tr to existing table
   else
     //raise exception or alert maybe.

    });
}

和控制器

    public JsonResult Dodaj( string id)
    {
        string posiljalac = Session["idGosta"].ToString();
        PRIJATELJI pr = new PRIJATELJI();
        pr.EMAIL_GOSTA = posiljalac;
        pr.EMAIL_GOSTA1 = id;
        pr.PRIJATELJI_OD = System.DateTime.Now;
        try{
        db.PRIJATELJIs.Add(pr);

        db.SaveChanges();
        return Json(new { isAdded = "success"}, JsonRequestBehavior.AllowGet);
        } 
        catch (Exception ex)
        {
            return Json(new { isAdded = "failure" }, JsonRequestBehavior.AllowGet);
        }
    }

虽然我已经测试了代码,但approch应该是这样的。