MVC：JSON結果自動填充查看

我被困在從JSON發佈結果，因此留下了成功部分空白。MVC：JSON結果自動填充查看

查看

@model MvcApplication2.Models.About 

@{ 
    ViewBag.Title = "About"; 
} 


<p> @Html.DisplayFor(m=>m.test) </p> 
<p> @Html.DisplayFor(m=>m.test1) </p>

型號

public class About 
    { 
     public string test { get; set; } 
     public string test1 { get; set; } 
    }

控制器

public class HomeController : Controller 
    { 
     public JsonResult About() 
     { 
      ViewBag.Message = "Your app description page."; 
      About ab = new About() 
           { 
            test = "a", 
            test1 = "b" 
           }; 
      return Json(ab, JsonRequestBehavior.AllowGet); 
     } 
}

的JQuery在外部文件

$(document).ready(function() { 

    var itemName = "#btn-about"; 

    $(itemName).click(function() { 
     $.ajax({ 
      type: 'GET', 
      dataType: 'Json', 
      url: '/Home/About', 
      success: function (data) { 
       var option = ''; 

      }, 
      error: function (xhr, ajaxOption, thorwnError) { 
       console.log("Error") 
      }, 
      processData: false, 
      async: true 
     }); 
    }); 
});

=>我現在有點困惑。儘管我使用AJAX獲得了JSON格式的結果，但我想在此視圖'關於'中發佈它。視圖已經有@model定義了，所以一旦我得到結果，我希望視圖自動加載它，因爲我不認爲它是一個很好的選項來創建JavaScript中的HTML控件。

=>是否有可能或是否必須逐個填寫控件。

=>我是新來的MVC，所以你可以讓我知道任何好的建議。

來源

2013-09-26 Lakpa Sherpa

我們通常沒有提及的事情，如MVC「控制」。相反，我們使用HTML /瀏覽器的語言，並將它們稱爲DOM元素或其特定標籤名稱。如果您想要提供更復雜的片段 - 比如說菜單或製表符 - 並且仍想通過AJAX提供，請考慮將部分視圖作爲HTML而不是JSON返回。使用JSON，更新複雜的HTML片段可能會更困難。 – tvanfosson

您需要爲您的元素提供一些id或class，以便您在客戶端輕鬆地與它們交互。然後，當你得到你的迴應時，從JSON數據中獲取值並用新值更新元素（使用id/class來找到它）。我假設你沒有爲你的字符串定義任何特殊的模板，根據需要調整代碼中的選擇器來解釋它，如果你這樣做。

查看

<p class="testDisplay"> @Html.DisplayFor(m=>m.test) </p> 
<p class="test1Display"> @Html.DisplayFor(m=>m.test1) </p>

客戶端代碼

$(document).ready(function() { 

    var itemName = "#btn-about"; 

    $(itemName).click(function() { 
     $.ajax({ 
      type: 'GET', 
      dataType: 'Json', 
      url: '/Home/About', 
      success: function (data) { 
       $('.testDisplay').html(data.test); 
       $('.test1Display').html(data.test1); 
      }, 
      error: function (xhr, ajaxOption, thorwnError) { 
       console.log("Error") 
      }, 
      processData: false, 
      async: true 
     }); 
    }); 
});

來源

2013-09-26 15:03:22 tvanfosson

即使這樣做，但這不是我期待的解決方案。從我的角度來看，我們認爲我們有'@model'，每個DOM元素都與它鏈接。所以當我從JSON得到結果時，我希望這些DOM元素自動填充。否則，在視圖頂部聲明'@model'是無用的。 –

@LakpaSherpa - 你誤解了視圖與瀏覽器中呈現的HTML。在服務器端，該模型用於生成HTML。瀏覽器對服務器上的Razor代碼一無所知，並且在客戶端中，您必須直接與HTML進行交互。 – tvanfosson

可能是我與MVC模式混淆。感謝您糾正我。我會查看更多的細節來獲得替代解決方案。 –

-1

，而不是返回的數據，你將不得不返回查看串和使用jQuery替代的結果。

控制器：如下DIV：

public JsonResult About() 
    { 
     var model = // Your Model 
     return Json((RenderRazorViewToString("ViewNameYouWantToReturn", model)), JsonRequestBehavior.AllowGet); 
    } 

    [NonAction] 
    public string RenderRazorViewToString(string viewName, object model) 
    { 
     ViewData.Model = model; 
     using (var sw = new StringWriter()) 
     { 
      var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName); 
      var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw); 
      viewResult.View.Render(viewContext, sw); 
      viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View); 
      return sw.GetStringBuilder().ToString(); 
     } 
    }

然後使用jquery您可以如更換導致容器

$.ajax({ 
     type: 'GET', 
     dataType: 'Json', 
     url: '/Home/About', 
     success: function (result) { 
      $("#divId").replaceWith(result); 
     },

來源

2013-09-26 15:26:30

如果您要返回HTML，那麼沒有理由使用JSON。只需返回HTML並跳過JSON編碼即可。 – tvanfosson

控制器：

public ActionResult About() 
{ 
    var model = repo.GetModel(); 
    return PartialViewResult("about", model); 
}

的jQuery：

$.ajax("/Controller/About/", { 
    type: "GET", 
    success: function (view) { 
     $("#aboutDiv").html(view); 
    } 
});

在主視圖：

<div id="aboutDiv"><div>

來源

2013-09-27 09:12:13 anthr

謝謝。讓我試試這個。 –

MVC：JSON結果自動填充查看

回答

相關問題