使用部分視圖HTML片段返回jSON添加到DOM

Question

我比較新使用ASP.NET MVC和WebAPI，我正在重寫我的網站，並隨後使用PHP。

我有一個頁面，用戶可以添加一些新的測驗密碼。使用PHP和jQuery我有一個頁面，我會使用jQUERY $ .ajax發佈測驗密碼的詳細信息。我曾經與以下字段返回JSON：

• 成功 - 該項目是否被添加到數據庫
• 的ErrorMessage - 與錯誤信息填充的，如果有一個
• 的Html - 對象的HTML這將被添加到DOM

我決定，因爲我會添加，更新和刪除測驗密碼，我會使用WebAPI控制器。

只要返回Success BOOL和ErrorMessage值（如果有），但我不確定如何使用轉義HTML填充Html值，該值使用我用於項目在頁面上。

這裏是我的WebAPI控制器至今：

using System; 
using System.Collections.Generic; 
using System.Data.Entity; 
using System.Linq; 
using System.Net; 
using System.Net.Http; 
using System.Web.Http; 
using uQuiz.Domain.Abstract; 
using uQuiz.Domain.Models; 
using uQuiz.WebUI.Models.Api; 
using Microsoft.AspNet.Identity; 
using uQuiz.Domain.Helpers; 

namespace uQuiz.WebUI.Controllers 
{ 
    [Authorize] 
    public class PasswordController : ApiController 
    { 
     private IQuizEntities Context; 

     public PasswordController(IQuizEntities context) 
     { 
      this.Context = context; 
     } 

     // GET: api/Password/5 
     public object Get(int id) 
     { 
      // Check that quiz password exists 
      if (this.Context.EntitySet<QuizPassword>().Any(x => x.Id == id)) 
      { 
       QuizPassword quizPassword = this.Context.EntitySet<QuizPassword>().Where(x => x.Id == id).FirstOrDefault<QuizPassword>(); 

       ApiQuizPassword model = new ApiQuizPassword() 
       { 
        Id = quizPassword.Id, 
        Password = quizPassword.Password 
       }; 

       return model; 
      } 
      else 
      { 
       return null; 
      } 
     } 

     // POST: api/Password 
     public ApiResult Post([FromBody]ApiQuizPassword apiQuizPassword) 
     { 
      Quiz quiz = this.Context.EntitySet<Quiz>().Find(apiQuizPassword.QuizId); 
      int userId = User.Identity.GetUserId<int>(); 
      ApiResult result = new ApiResult(); 

      if (!ModelState.IsValid) 
      { 
       // Return the first validation result 
       result.Success = false; 
       result.ErrorMessage = ModelState.First().Value.Errors[0].ErrorMessage; 
       return result; 
      } 

      if (!quiz.IsQuizOwner(userId)) 
      { 
       result.Success = false; 
       result.ErrorMessage = "Logged in user is not quiz owner"; 
       return result; 
      } 

      if (quiz.DoesPasswordAlreadyExistForQuiz(apiQuizPassword.Password)) 
      { 
       result.Success = false; 
       result.ErrorMessage = "Password already exists for this quiz"; 
       return result; 
      } 

      using (var transaction = this.Context.Database.BeginTransaction()) 
      { 
       try 
       { 
        QuizPassword quizPassword = this.Context.EntitySet<QuizPassword>().Create(); 

        // Assign posted values 
        quizPassword.Password = apiQuizPassword.Password; 
        quizPassword.QuizId = apiQuizPassword.QuizId; 

        // Assign default values 
        quizPassword.RemainingUses = 0; 
        quizPassword.UnlimitedUses = true; 
        quizPassword.UseCount = 0; 
        quizPassword.Deleted = false; 
        quizPassword.CreatedTime = TimeHelper.UnixTimestamp; 

        this.Context.EntitySet<QuizPassword>().Add(quizPassword); 
        this.Context.SaveChanges(); 
        transaction.Commit(); 

        result.Success = true; 
        return result; 
       } 
       catch (Exception) 
       { 
        transaction.Rollback(); 
        result.Success = false; 
        result.ErrorMessage = "Failed to save the quiz password"; 
        return result; 
       } 
       finally 
       { 
        transaction.Dispose(); 
       } 
      } 
     } 

     // PUT: api/Password/5 
     public void Put(int id, [FromBody]string value) 
     { 
     } 

     // DELETE: api/Password/5 
     public void Delete(int id) 
     { 
      using (var transaction = this.Context.Database.BeginTransaction()) 
      { 
       try 
       { 
        QuizPassword quizPassword = this.Context.EntitySet<QuizPassword>().Find(id); 
        this.Context.Entry(quizPassword).State = EntityState.Deleted; 
        this.Context.SaveChanges(); 

        transaction.Commit(); 
       } 
       catch (Exception) 
       { 
        transaction.Rollback(); 
       } 
       finally 
       { 
        transaction.Dispose(); 
       } 
      } 
     } 
    } 
} 

下面是我從Post方法返回我的控制器中我的API結果類：

public class ApiResult 
{ 
    public bool Success { get; set; } 
    public string ErrorMessage { get; set; } 
    public HtmlString Html { get; set; } 
} 

我的部分觀點被稱爲_QuizPasswordPartial。

我完全忽略了這個標記，我應該只從我的Get方法中返回HTML嗎？

無論哪種方式，我想返回我的控制器內呈現的部分在JSON結果。

Answer 1

Web API返回數據（JSON/XML）而不是渲染視圖（HTML）。使用Javascript調用API，檢索原始數據並更新瀏覽器內的視圖。