ASP MVC Ajax和模型重新綁定

我有這樣的操作方法：ASP MVC Ajax和模型重新綁定

[HttpPost] 
public ActionResult GetNextImage(int m_id) 
{ 
    ... 
    return Json(new{...}); 
}

我調用它是這樣的：

$(function() { 
     $('#nextImage').submit(function() { 
      $.ajax({ 
       url: this.action, 
       type: this.method, 
       data: "m_id=" + $('#img').attr('alt'), 
       success: function (result) { 
        $('#img').attr("src", result.imagePath); 
        $('#img').attr("alt", result.ImageId); 
       } 
      }); 
      return false; 
     }); 
    });

我有Image對象

public class Image 
{ 
    public int ImageId {get;set;} 
    public string imagePath {get;set;} 
    public List<Comment> Comments {get;set;} 
}

現在。是否有可能從行動方法我的「圖像」對象返回並綁定它？
我不知道如何使用JSon加載註釋列表。這就是爲什麼我想返回對象，並用簡單的循環顯示所有評論。但我不知道如何從操作方法返回對象並將其綁定到（剃鬚刀）頁面。

來源

2011-11-06 1110

簡單地回答你的問題，是的，你可以綁定你的圖像對象並返回對象。請參閱下面的代碼。我簡化了我的示例，但我認爲它提供了一個足夠的示例，您可以根據自己的目的進行審閱和修改。例如，不是像使用原始問題那樣使用表單，而是使用按鈕並綁定click事件來調用ImageController的GetImage方法。

查看

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Sandbox.Models.Image>" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Image Test</title> 

<script type = "text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script> 
<script type = "text/javascript"> 
    $(document).ready(function() { 
     $('#nextImage').click(function() { 
      $.ajax({ 
       url: "Image/GetImage", 
       type: "post", 
       data: "m_id=" + $('#img').attr('alt'), 
       success: function (image) { 
        $('#img').attr("src", image.ImagePath); 
        $('#img').attr("alt", image.ImageId); 

        //here is where we loop over the list of comments 
        //associated with the Image JSON object that is returned 
        //from the controller. here 'val' is the Comment model 
        //and .Data simply calls the string member containing the 
        //actual comment 
        $.each(image.Comments, function (index, val) { 
         $('#comments').append("<div>" + val.Data + "</div>"); 
        }); 
       } 
      }); 
     }); 
    }); 
</script> 
</head> 
<body> 
    <img alt="1" id="img" src=""/> 
    <button id="nextImage">Next</button> 
    <div id="comments"></div> 
</body> 
</html>

控制器

public class ImageController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult GetImage(int m_id) 
    { 
     Image image = new Image { 
      ImageId = m_id, 
      ImagePath = "Content/mandrill.png", 
      Comments = new List<Comment> 
          { 
           new Comment {Data = "I love it"}, 
           new Comment {Data = "I love it also!"} 
          }}; 

     return Json(image); 
    } 

}

模型

public class Image 
{ 
    public int ImageId { get; set; } 
    public string ImagePath { get; set; } 
    public List<Comment> Comments { get; set; } 
} 

public class Comment 
{ 
    public string Data { get; set; } 
}

希望這有助於

來源

2011-11-06 22:59:09

你也可以使用jQuery嘗試.load功能，而不是一個AJAX的打電話，並在你的控制ler返回一個局部視圖，該視圖綁定到您希望視圖呈現的對象。 [鏈接]（http://evolpin.wordpress.com/2011/04/12/asp-net-mvc-partialview-with-ajax/） – ptfaulkner

ASP MVC Ajax和模型重新綁定

回答

相關問題