2010-12-17 108 views
1

我是jquery和ajax的新手 - 看起來似乎無法使其工作!見我相關的問題:Use Json and AjaxLink to Toggle Link Values in ASP.NET MVC 2

這裏是我的jQuery:

$(function() { 
    $("div[id^=add]").click(function (ev) { 
     ev.preventDefault(); 
     updateMe(this.id.split('_')[1], "AddRequirement"); 
    }); 

    $("div[id^=remove]").click(function (ev) { 
     ev.preventDefault(); 
     updateMe(this.id.split('_')[1], "RemoveRequirement"); 
    }); 
}); 


function updateMe(myId, myAction) { 
    $.ajax({ 
     type: "POST", 
     url: "AgreementType.aspx/" + myAction, 
     data: 'aId=' + <%:Model.AgreementType.Id%> + '&rId=' + myId, 
     dataType: "text", 
     error: function(request, msg){ 
      alert("Error upon saving request: " + msg); 
     }, 
     success: function (data) { 
      alert(data); 
     } 
    }); 
} 

目前我有兩個不同的div。一個foreach循環確定要顯示哪一個:

<%if(req.Agreements.Any(r => r.AgreementTypeId == Model.AgreementType.AgreementTypeId)) 
    {%> 
     <div id="<%:string.Format("remove_{0}", req.Id)%>" class="divLink">Remove</div> 
    <% } 
    else 
    { %> 
     <div id="<%:string.Format("add_{0}", req.Id)%>" class="divLink">Add</div> 
    <%{%> 

這是我的控制器操作。很簡單:

public JsonResult AddRequirement(string aId, string rId) 
    { 
     string result = "Remove"; 
     //Code to add requirement 

     return this.Json(result); 
    } 


    public JsonResult RemoveRequirement(string aID, string rID) 
    { 
     string result = "Add"; 
     //Code to remove requirement 

     return this.Json(result); 
    } 
} 

所有的成功函數都需要這樣做,用目錄更新目標的innerHtml,並更改id以匹配。看起來很簡單!但我似乎無法弄清楚。 TIA

+0

我寧願只返回一個簡單的文本字符串,whic h是爲什麼控制器是JsonResult,而$ ajax數據類型是「text」;用於僅返回一個字符串對象的控制器。我一直在調整這段代碼一段時間...... – morganpdx 2010-12-17 20:51:07

+1

Thia行def看起來不正確:url:「AgreementType.aspx /」+ myAction你可以從你的global.asax發佈你的路由數據嗎?我是100%你需要從該行刪除.aspx。 – Paul 2010-12-18 05:55:23

+0

不,沒錯。我必須在路由中添加.aspx,以便MVC可以在IIS 6上運行:routes.MapRoute( 「Default」,// Route name 「{controller} .aspx/{action}/{id}」,//具有參數的網址 新{controller =「Home」,action =「Index」,id = UrlParameter.Optional} //參數默認值 ); – morganpdx 2010-12-20 17:30:49

回答

3

最後 - 有效的代碼。這將允許用戶點擊一個div,它將根據該div的內容調用不同的控制器方法,實際上允許您在foreach循環中切換對象的切換元素。我相信它可以改進;例如,我可能不需要從控制器方法獲得div的值,但至少它可以工作。

的Javascript

<script type="text/javascript"> 
    $(function() { 
     $("div[class^=toggleLink]").click(function (ev) { 
      ev.preventDefault(); 

      var divText = $('#' + this.id).text(); 

      if (divText == "Remove") { 
       updateMe(this.id, "Remove"); 
      } 
      else if (divText == "Add") { 
       updateMe(this.id, "Add"); 
      } 
     }); 
    }); 


function updateMe(myId, myAction) { 
    $.ajax(
    { 
     type: "POST", 
     url: "/AgreementType/" + myAction, 
     data: "aId=<%:Model.AgreementType.Id%>&rId=" + myId, 
     success: function (result) { 
      if (result.success) { 
       $('div#' + myId).text(result.value); 
      } 
     }, 
     error: function (req, status, error) { 
      alert(req + " " + status + " " + error); 
     } 
    }); 
} 

</script> 

控制器

public ActionResult Add(string aId, string rId) 
    { 
     //Add to the template 

     string result = "Remove"; 
     string nClass = "remLink"; 

     return Json(new { success = true, value = result, newClass = nClass }); 
    } 


    public ActionResult Remove(string aID, string rId) 
    { 
     //Remove from the template 

     string result = "Add"; 
     string nClass = "addLink"; 

     return Json(new { success = true, value = result, newClass = nClass }); 
    } 

標記

<% foreach(var req in std.Requirements)%> 
    <% { %> 
    <tr> 
     <td> 
     <%if(req.Agreements.Any(r => r.AgreementTypeId == Model.AgreementType.Id)) 
     {%> 
      <div id="<%:req.Id%>" class="toggleLink">Remove</div> 
     <% } 
     else { %> 
      <div id="<%:req.Id%>" class="toggleLink">Add</div> 
     <%} %> 
相關問題