การสร้างภาพสลับ AJAX ใน ASP.NET MVC

ดังนั้นฉันจึงต้องการสร้างปุ่มสลับสำหรับตาราง ซึ่งฉันสามารถทำการเรียกแบบอะซิงก์เพื่ออัปเดตบันทึกฐานข้อมูล (เปิด/ปิดใช้งาน)

img

หลังจากการลองผิดลองถูกมาบ้าง ฉันก็สามารถทำให้มันใช้งานได้ แต่รู้สึกว่ามันต้องมีวิธีที่หรูหรากว่านี้

  • ฉันไม่ชอบการใช้แท็กรูปภาพซ้ำในคอนโทรลเลอร์ของฉัน แน่นอนว่า... ฉันจะหลีกเลี่ยงมันด้วยวิธีที่สวยงามได้อย่างไร
  • มีวิธีที่ดีกว่าโดยรวมในการเข้าถึงสิ่งนี้จากสิ่งที่ฉันทำหรือไม่?

นี่คือรหัสของฉันในคอนโทรลเลอร์:

public ActionResult ToggleEnabled(int id)
    {
        if (Request.IsAjaxRequest())
        {
            var p = this.PageRepository.GetPage(id);
            p.Enabled = p.Enabled != true;
            this.PageRepository.Edit(p);
            return p.Enabled ? Content("<img src='/Content/icons/tick.png' border=0  />") : Content("<img src='/Content/icons/tick_grey.png' border=0  />");
        }
        return Content("Error");
    }

และวิว...:

<% var img = Model.Enabled ? "tick.png" : "tick_grey.png"; %>
<% foreach (var item in Model)
       { %>
...
<td align="center">
    <%=Ajax.ActionLink("[replacethis]", 
        "ToggleEnabled", 
                new { id = Model.ID }, 
                new AjaxOptions { UpdateTargetId = "toggleimage" + Model.ID }).Replace("[replacethis]",
                string.Format("<div id='toggleimage{0}'><img src='/Content/icons/{1}' border='0' alt='toggle'/></div>", 
                Model.ID, Model.Enabled ? "tick.png" : "tick_grey.png"))%>
</td>
...
<% } %>

พบเคล็ดลับ/แฮ็กด้วย Ajax.Actionlink โดยใช้รูปภาพได้ที่นี่.


asp.net-mvc asp.net-ajax
person Kjensen    schedule 03.07.2009    source แหล่งที่มา
comment
ฉันชอบวิธีที่คุณทำจริงๆ ฉันไม่เห็นวิธีที่ชัดเจนในการทำให้มันง่ายขึ้น ตามที่คุณชี้ให้เห็น ตรรกะรูปภาพของคุณซ้ำกันในตัวควบคุมและมุมมอง แต่คุณต้องใช้ตรรกะในมุมมองสำหรับการโหลดเพจ และคุณต้องใช้ตรรกะในตัวควบคุมสำหรับการเรียก Ajax   -  person Robert Harvey    schedule 04.07.2009
comment
กำลังพยายามเขียนสิ่งนี้ใหม่ในมีดโกน Mvc 3 ฉันได้รับข้อผิดพลาดในการแทนที่ มันบอกว่า System.Web.MVC.MVChtmlString ไม่มี defintion...   -  person Chaka    schedule 23.12.2012
comment
ความช่วยเหลือเกี่ยวกับวิธีการเขียนใหม่ในมีดโกน?   -  person Chaka    schedule 23.12.2012

คำตอบ (2)


arrow_upward
3
arrow_downward

วิธีการเกี่ยวกับการเรนเดอร์ช่องทำเครื่องหมายโดยขึ้นอยู่กับว่าโมเดลนั้นเปิดใช้งานหรือไม่

ใน jQuery คุณสามารถแทนที่ช่องทำเครื่องหมายเหล่านั้นด้วยรูปภาพของคุณ สิ่งที่ต้องการ

Your document.ready code may look like,

$(document).ready(
function()
{
    $('.enabledCheckbox').each(
        function()
        {
            var image = $(this).checked ? 'tick.png' ? 'tick_grey.png';
            $(this).parent.click(
                function()
                {
                    if($(this).is('image'))
                        toggleEnabledStatus(); //write code in toggleEnabledStatus to toggle the state of the model on server side.
                }     
                );
            $(this).parent.html('<img src=' + image + '/>');
        }
    );
}
);

หรือคุณสามารถใช้ปลั๊กอินเช่น jquery-checkbox เพื่อให้ปลั๊กอินเหล่านี้มีรูปลักษณ์ที่หรูหรา อาจจะคิด.

person SolutionYogi    schedule 04.07.2009
comment
ฉันจะบอกว่านี่เป็นวิธีที่ดีที่สุด - ด้วยวิธีนี้คุณจะปล่อยให้หน้า html เหลือเพียง html เท่านั้นและอย่าเกะกะด้วยโค้ดพิเศษทั้งหมดนั้น - person sirrocco; 04.07.2009

arrow_upward
0
arrow_downward

หากความสง่างามคือสิ่งที่คุณต้องการ ฉันจะใช้คำขอบริการเว็บ jQuery เพื่อสร้างคำขอ AJAX ไปยังหน้า ASPX ที่เกี่ยวข้องแทน มันดูหรูหรามาก เพราะสิ่งที่คุณต้องการในหน้า ASPX ของคุณคือ [WebMethod] แบบคงที่เพื่อดำเนินการจริง และการเรียก $.ajax() จาก jQuery

person Dave Markle    schedule 04.07.2009